Sunbeam Counter Minimalism

/sunbeamCounterMinimalism
A hospitality-inspired design system that blends sunlit warmth, crisp imagery, and spacious layouts. It delivers premium café interfaces with immaculate typographic hierarchy and highly reusable, spring-based UI patterns.
Jul 10, 2026
Design System Content
# Sunbeam Counter Minimalism Design System

A design language for bright, highly reusable café and premium hospitality interfaces.

---

## Philosophy

> "Light pours the foundation; warmth invites them in."

This system creates interfaces that feel like stepping into an immaculate, sun-drenched modern café. The aesthetic abandons stark clinical whites in favor of a single, solid sunlit background—wrapping the user in an environment that is bright, approachable, and effortlessly premium. The design relies on crisp product photography, expansive whitespace, and meticulous, friendly typography to evoke physical hospitality.

### Core Beliefs

1. **The Sunlit Canvas** — Stark white is replaced by soft, single-tone warmth (coconut white, lemon cream, or pale peach). The background acts as a physical countertop.
2. **Photography as the Anchor** — Crisp, high-contrast food and drink imagery provides the visual weight, floating seamlessly on the warm backgrounds.
3. **Friendly Precision** — Satoshi brings geometric perfection but maintains an open, approachable curve. Scale dictates the hierarchy.
4. **Rhythmic Layouts** — The eye moves naturally from oversized heroes to sweeping horizontal carousels, resting on centered editorial blocks.
5. **Tactile Boundaries** — Elements aren't boxed in by heavy borders; they sit naturally on the canvas, separated by vast whitespace and subtle tonal shifts.

### Strict Rules

* **Single Solid Backdrop** — The primary background must remain a single sunlit tone. No gradient meshes or stark `#FFFFFF` primary canvases.
* **Isolate or Bleed** — Product photography must either be deeply isolated (no background, sharp drop shadow for realism) or completely full-bleed edge-to-edge.
* **Warm Contrast** — Pure black `#000000` is forbidden. Deep espresso browns and warm charcoals provide text contrast without feeling harsh.
* **Carousel over Grid** — Secondary product exploration should default to horizontal scanning (carousels) to mimic viewing a physical pastry case or menu board.
* **Minimal Overlays** — UI sits flat on the canvas. Depth is achieved via scale and photography, not heavy UI layers.

---

## Color Palette

### The Sunbeam & Espresso Scale

The palette replaces stark gallery tones with soft, food-safe warm hues. The canvas is bathed in a sunlit tone, while typography is grounded in a rich, roasted espresso. The accent color is an organic, vibrant Matcha Green.

```css
/* Sunlit Backgrounds (The Countertop) */
bg-coconut-50         /* Main canvas option 1: Soft warm off-white (#fcfaf8) */
bg-lemon-50           /* Main canvas option 2: Lemon cream (#fdf8ed) */
bg-peach-50           /* Main canvas option 3: Pale peach (#fdf5f0) */
bg-melon-50           /* Main canvas option 4: Soft melon (#fdf2ee) */

/* Structural Panels & Editorials */
bg-warm-gray-100      /* Centered editorial text blocks, subtle secondary panels */
bg-espresso-900/5     /* Hover states for menu cards, gentle interaction feedback */
bg-espresso-900/10    /* Active states, subtle selection fills */

/* Borders */
border-espresso-900/10 /* Ultra-light structural borders, menu item dividers */
border-espresso-900/20 /* Hover boundaries, carousel edge definitions */

/* The Organic Accent: Matcha Green */
text-matcha-600       /* Primary interactive focus, links (#4d7c5d) */
bg-matcha-600         /* Primary call-to-action buttons, cart badges */
border-matcha-600     /* Focused input rings, selection indicators */
bg-matcha-50          /* Soft interactive highlights */

/* Text Hierarchy (Espresso Scale) */
text-espresso-950     /* Hero headlines, primary menu item names (#2b2624) */
text-espresso-800     /* Section headings, main body paragraphs */
text-espresso-600     /* Nav labels, editorial subtext, menu descriptions */
text-espresso-400     /* Muted metadata, prices in secondary contexts, footers */

```

### Destructive Actions

```css
hover:bg-terracotta-50
hover:text-terracotta-600
hover:border-terracotta-200

```

---

## Typography

Satoshi powers the entire system. It delivers a polished, geometric sans-serif aesthetic that remains inherently friendly. Scale variations are dramatic—from massive, premium hero text to compact, elegant menu labels.

### Font Weights

```css
font-regular     /* Core body copy, menu descriptions, editorial text */
font-medium      /* Compact nav labels, primary CTAs, secondary headings */
font-semibold    /* Product names, price tags, section headers */
font-bold        /* Reserved strictly for small, impactful data points */

```

### Font Size Scale

```css
text-xs          /* Fine print, dietary badges (12px) */
text-sm          /* Menu descriptions, standard buttons, secondary metadata (14px) */
text-base        /* Compact nav labels, core paragraph text, standard menu items (16px) */
text-lg          /* Editorial lead-ins, prominent card titles (18px) */
text-xl          /* Subtitles, minor section headers (20px) */
text-[38px]      /* Default section headings (Mobile/Tablet) */
text-[48px]      /* Primary section headings, large editorial block titles */
text-[84px]      /* Hero headlines (Tablet/Small Desktop) */
text-[108px]     /* Premium oversized hero headlines (Large Desktop) */

```

### Letter Spacing & Transforms

```css
tracking-tighter /* Oversized hero headlines to maintain structural block feel */
tracking-tight   /* Section headings (38-48px) */
tracking-normal  /* Menu descriptions, editorial body */
tracking-wide    /* Compact nav labels, small buttons */

uppercase        /* Nav labels, small metadata, dietary tags (e.g., VEGAN, GF) */

```

### Hierarchy Examples

| Element | Size | Weight | Color | Tracking | Transform |
| --- | --- | --- | --- | --- | --- |
| Hero Headlines | [108px] | medium | espresso-950 | tighter | none |
| Section Headings | [48px] | medium | espresso-900 | tight | none |
| Nav Labels | base | medium | espresso-600 | wide | uppercase |
| Menu Item Names| base | semibold | espresso-950 | normal | none |
| Menu Descriptions| sm | regular | espresso-600 | normal | none |

---

## Animation System

### Core Philosophy: The Natural Glide

Interactions should feel as frictionless as sliding a ceramic cup across a polished wooden counter. Animations prioritize horizontal movement and soft fades.

### Page Transitions (Warm Dissolve)

```tsx
initial={{ opacity: 0, y: 15 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, ease: [0.33, 1, 0.68, 1] }} // Natural, easing out smoothly

```

### The Carousel Spring (Horizontal Movement)

Dragging or clicking through the item carousel utilizes a satisfying, physical spring setup that prevents rigid snapping.

```tsx
drag="x"
dragConstraints={{ right: 0, left: -width }}
transition={{ type: "spring", stiffness: 200, damping: 25, mass: 0.8 }}

```

---

## UI Components

### The Alternating Layout Rule

The page rhythm is strictly defined by alternating visual weight:
1. **The Hero:** Oversized copy, transparent floating photography, 2 clear CTAs.
2. **The Carousel:** Horizontal scrolling list of crisp products with generous gaps.
3. **The Bleed:** Full-width edge-to-edge lifestyle imagery.
4. **The Editorial:** Centered, medium-width text blocks on `bg-warm-gray-100`.

### The Edge-Fade Carousel Basin

Carousels never end at a hard cut; they fade out softly into the sunlit background to imply continuation.

```tsx
<div className="absolute right-0 top-0 h-full w-24 bg-gradient-to-l from-lemon-50 to-transparent z-10 pointer-events-none" />

```

### Centered Editorial Panel

A structural container for long-form text that provides a subtle, warm contrast to the main sunlit canvas.

```tsx
<section className="w-full bg-warm-gray-100 py-24 flex justify-center items-center">
  <div className="max-w-2xl text-center space-y-6">
    {/* Editorial content */}
  </div>
</section>

```

---

## Component Catalog

### Hero Navigation & CTAs

The hero requires an immediately premium feel: large compact navigation and exactly two clear Calls to Action.

```tsx
// Primary CTA (Solid Organic Accent)
"bg-matcha-600 text-white font-medium text-base tracking-wide rounded-full px-8 py-3.5 hover:bg-matcha-700 transition-colors shadow-sm"

// Secondary CTA (Outlined, subtle)
"bg-transparent border border-espresso-900 text-espresso-950 font-medium text-base tracking-wide rounded-full px-8 py-3.5 hover:bg-espresso-900/5 transition-all"

// Compact Nav Label
"text-base uppercase tracking-wide font-medium text-espresso-600 hover:text-espresso-950 transition-colors"

```

### Menu-Cards (Carousel Items)

Clean, borderless typography sitting directly under highly isolated, crisp imagery.

```tsx
// Menu Card Container
"w-72 flex flex-col items-center text-center gap-4 group cursor-pointer"

// Menu Image Container (Isolates photography)
"w-full aspect-square bg-transparent relative transition-transform duration-500 group-hover:scale-105"

// Menu Typography Lockup
<div className="space-y-1">
  <h3 className="text-base font-semibold text-espresso-950">Iced Yuzu Matcha</h3>
  <p className="text-sm font-regular text-espresso-600">$5.50</p>
</div>

```

### Badges & Dietary Indicators

```tsx
// Standard Dietary Tag (e.g., GF, Vegan)
"px-2.5 py-1 text-xs font-medium uppercase tracking-wide rounded-full bg-coconut-50 text-espresso-600 border border-espresso-900/10"

// Highlighted Tag (e.g., New, Seasonal)
"px-2.5 py-1 text-xs font-medium uppercase tracking-wide rounded-full bg-matcha-50 text-matcha-700 border border-matcha-600/20"

```

### Inputs

```tsx
// Clean Minimal Input (Newsletter/Order Notes)
"w-full px-5 py-4 rounded-xl bg-transparent border-b-2 border-espresso-900/20 text-espresso-950 placeholder-espresso-400 focus:outline-none focus:border-matcha-600 transition-colors text-base"

```

---

## Quality Checklist

* [ ] Does the page use one solid sunlit background (lemon cream, pale peach, coconut white, or soft melon) instead of `#FFFFFF`?
* [ ] Is all typography exclusively utilizing the Satoshi font family?
* [ ] Does the hero headline hit the mandatory 84px to 108px size range?
* [ ] Are section headings cleanly sized between 38px and 48px?
* [ ] Does the product imagery feature crisp silhouettes (isolated) or completely full-bleed execution?
* [ ] Are there exactly two clear CTAs in the hero section?
* [ ] Does the page rhythm alternate correctly (Hero -> Carousel -> Full-Bleed -> Editorial)?
* [ ] Is there massive, generous whitespace between menu-card clusters and text blocks?

---

## Allowed vs Not Allowed

### ✓ Allowed

* Solid sunlit canvases mapping to physical café countertops.
* Crisp, high-contrast, deeply isolated food or drink photography floating directly on the background.
* The exclusive use of Satoshi for a polished, friendly typographic foundation.
* Spring-physics based horizontal item carousels.
* Deep espresso tones replacing harsh blacks.

### ✗ Not Allowed

* Stark, clinical white (`#FFFFFF`) as the main background.
* Standard grid blocks for primary product discovery (must use carousels).
* Boxy, heavily bordered cards with distinct background colors separating them from the main canvas.
* Drop shadows on UI elements (shadows are reserved strictly for product photography to create realism).
* Mismatched font sizes for structural headings (must strictly follow the oversized 84-108px and 38-48px rules).
Preview