---
version: alpha
name: "Gubi"
description: "Deep-shadow canvas, Kings Caslon editorial serif for furniture poetry, and tracked Helvetica utility chrome — a Danish luxury furniture house with the visual gravity of a museum after hours"

colors:
  background: "#000000"
  surface: "#1a1a1a"          # was rgb(26,26,26) — near-black card surface
  surface-elevated: "#ffffff"  # white modal and overlay panels
  surface-warm: "#2c2c2b"     # --main-color: the dark warm charcoal used for panels
  ink: "#ffffff"
  ink-muted: "#888888"        # was rgb(136,136,136) — secondary text, subdued chrome
  ink-quiet: "#767676"        # --color-gray-40: placeholder and disabled text
  on-primary: "#ffffff"
  primary: "#000000"
  primary-inverse: "#ffffff"   # for buttons on light surfaces
  border: "#e4e3df"           # rgb(228,227,223) — the warm parchment divider line
  border-dark: "#222222"      # dark-mode hairline separators
  focus-ring: "#000000"
  error: "#ef0000"            # --critical-color
  error-alt: "#e95034"        # --input-invalid-border-color: warmer error on inputs
  shadow-soft: "#000000"      # rgba(0,0,0,0.15) base — flattened for hex requirement

typography:
  display-hero:
    fontFamily: "Kings Caslon, Cormorant Garamond, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Kings Caslon, Cormorant Garamond, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "Kings Caslon, Cormorant Garamond, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.6px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.6px
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.6px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.6px
  label-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.64px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.6px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 20px
  xl: 40px
  2xl: 48px
  3xl: 96px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary-inverse}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink-muted}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-secondary-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    borderColor: "{colors.ink-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-outline-light:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 20px 0px 8px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 20px 0px 8px
  input-error:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.primary}"
    borderColor: "{colors.error-alt}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 20px 0px 8px
  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px
---

# Gubi Design System

## Overview

Gubi's digital presence is designed to feel like entering a gallery after closing time: the site opens on near-total darkness, and then furniture materializes in it — warm brass pendants caught in candlelight, a chaise longue against textured Mediterranean stone, a lounge chair positioned between shadow and afternoon sky. The canvas is pure black (`{colors.background}`), and every visual decision flows from that choice. Photography is not decoration here; it is the primary architectural material, and the darkness is the frame the brand insists on holding around it.

The typographic pairing is deliberate and unusual for a Danish furniture house. Kings Caslon — a sharp-bracketed display serif with Caslon optical proportions — handles all editorial naming and product poetry. Product collections, hero headlines, and category labels read as inscriptions rather than labels when set in Kings Caslon at weight 400 with `text-transform: uppercase`. Helvetica Neue handles everything that is not poetry: navigation items tracked to `1.6px` in the `{typography.nav-link}` register, button labels capitalized in the `{typography.button-ui}` register, fine-print captions. The two-typeface contract creates a system where the serif names objects and the sans-serif gets you to them.

Where the canvas is black and the photography is warm, the moments of white are deliberate and rare. Modals and overlay cards appear in `{colors.surface-elevated}` — pure white panels floating over the dark ground — creating a figure-ground relationship borrowed from product photography on seamless paper. The navigation bar sits at near-black, barely distinguishable from the hero it overlays. The single filled primary CTA is white text on black fill in most dark-mode contexts, reversed when floating over the light card surfaces. Elevation is achieved not through shadow but through the literal contrast of a white surface against the absorptive dark.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) — the site is dark by default, not as a mode toggle but as the brand's permanent visual premise
- Kings Caslon serif for all editorial and product naming — operated at weight 400, uppercase, with tight `1.2` line-height for inscription authority
- Tracked Helvetica Neue for navigation and UI chrome — `1.6px` letter-spacing throughout `{typography.body}` and `{typography.nav-link}` creates deliberate horizontal breath in the sans system
- Two-typeface contract: Caslon for poetry (product names, hero text, categories); Helvetica for logistics (navigation, buttons, forms, captions)
- `{colors.border}` at `#e4e3df` — a warm parchment-toned hairline, the sole warm accent in an otherwise cool dark system; used as the primary structural divider
- Sharp-cornered geometry (`{rounded.none}`) for buttons and cards — no radius softening in the furniture vocabulary
- White modals (`{colors.surface-elevated}`) floating over the black ground — the system's only light surface; elevation by contrast rather than shadow
- Minimal color palette: black, off-white, a warm grey hairline, and an ink-muted grey for secondary text. No brand hue, no accent color.
- Motion system at `0.6s cubic-bezier(0.25,1,0.5,1)` for transitions — slow, deliberate, like a door opening on well-made hardware
- Product photography is always full-bleed, set against atmospheric environments: Mediterranean courtyards, Nordic interiors, gallery lighting

## Colors

### Primary Surfaces
- **Gubi Black** (`{colors.background}`): The dominant canvas — pure black. Not charcoal, not near-black, but the absolute dark of a photography studio or an unlit gallery room. Every page loads into this ground.
- **Warm Dark** (`{colors.surface-warm}`): The CSS `--main-color` (`#2c2c2b`), a warmed near-black used for panel backgrounds, navigation surfaces, and secondary containers that need to read as "surface" rather than "background."
- **Dark Card** (`{colors.surface}`): A slightly lifted near-black (`#1a1a1a`) for cards and containers against the deeper canvas.
- **White Panel** (`{colors.surface-elevated}`): Pure white, used exclusively for modals, overlay cards, and light-surface product contexts. The most contrastive moment in the system.

### Text / Ink
- **White Ink** (`{colors.ink}`): Primary text on dark surfaces — the only legible color on `{colors.background}` black.
- **Mid Grey** (`{colors.ink-muted}`): Secondary text at `#888888` — supporting copy, subdued labels, hover-state text on dark surfaces.
- **Quiet Grey** (`{colors.ink-quiet}`): Placeholder text and disabled states — the `--color-gray-40` system variable at `#767676`.

### Interactive
- **Primary CTA (dark context)** (`{colors.primary-inverse}`): White fill — the CTA button on dark surfaces reverses to pure white to surface against the absorptive canvas.
- **Outline Explore** (`{colors.border}`): The warm parchment-toned `#e4e3df` border used on the "EXPLORE" outline button over dark photography — the brand's sole warm accent.

### Semantic
- **Error** (`{colors.error}`): The `--critical-color` red at `#ef0000` for form validation failures.
- **Input Error** (`{colors.error-alt}`): A warmer coral-red at `#e95034` for inline input border error states.

### Borders & Structure
- **Warm Hairline** (`{colors.border}`): The signature structural divider — `#e4e3df` warm parchment. One pixel. Used on sidebar dividers, section separators, and the "EXPLORE" ghost button border.
- **Dark Hairline** (`{colors.border-dark}`): Dark separators for use on light surfaces and within the white modal panels.

## Typography

### Font Family
- **Editorial Serif**: `Kings Caslon` — a Caslon-class display serif with sharp bracketed serifs and high contrast strokes. Served as a custom web font (`kingsCaslonTypo` in CSS, also as `KingsCaslon`). Used for product names, hero headlines, category labels. Fallbacks: `Cormorant Garamond, Cormorant, Georgia, Times New Roman, serif`. Closest Google Fonts substitute: **Cormorant Garamond** (preserves the high-contrast Caslon proportions).
- **UI Sans-Serif**: `Helvetica Neue` — the Swiss rationalist standard, tracked consistently at `1.6px` throughout the navigation, body, and button registers. Never bold. Weight `500` at most. Fallbacks: `Helvetica, Arial, sans-serif`.
- **Letter-spacing culture**: Helvetica Neue is operated with positive tracking (`1.6px` on body, nav, buttons) while Kings Caslon display sizes receive slight negative tracking at large scales — the same reversal principle as Kinfolk and Aman.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Primary hero module headings — product collection launches, campaign titles in Kings Caslon |
| `display` | Product category headings, section editorial titles, model names |
| `heading-section` | Kings Caslon uppercase for subcategory labels and chapter heads |
| `heading-sub` | Helvetica Neue with `1.6px` tracking — supporting section titles and navigation panel heads |
| `body-large` | Lead supporting copy, product description intros at 16px |
| `body` | Standard navigation links, product detail copy, form labels — Helvetica at 15px with `1.6px` tracking |
| `nav-link` | Primary navigation items — 15px Helvetica, `1.6px` tracking, uppercase |
| `button-ui` | CTA button labels — 14px Helvetica weight 500, uppercase, `1.6px` tracking |
| `label-ui` | Sub-navigation labels and filter headings — 15px weight 500, `0.64px` tracking |
| `caption` | Image captions, fine print, notification text — 13px Helvetica with open tracking |

### Principles
- **Kings Caslon names objects; Helvetica navigates them.** The serif never appears in buttons, form fields, or navigation chrome. The sans never appears in hero headlines or product title moments.
- **Uppercase as default for editorial.** Kings Caslon display text runs `text-transform: uppercase` throughout — category labels, section headings, product series titles. It reads as catalog annotation, not as shouting.
- **Tracked sans, always.** `1.6px` letter-spacing on Helvetica Neue is the system's constant. The only moments of reduced tracking are in the `label-ui` register (`0.64px`) for denser panel labels.
- **No bold display text.** Kings Caslon operates at weight 400; Helvetica peaks at weight 500 (medium) for buttons and labels. Weight escalation is not part of this system's hierarchy vocabulary.
- **Line-height as signal of register.** Display heads compress to `1.1`–`1.2` for typographic density; navigation and body open to `1.4`–`1.5` for comfortable reading.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 15px (the most recurrent value across the system — `15px` appears 68 times, `20px` 104 times).

The Gubi spacing language is compressed at the small end (tight internal padding in navigation, 15px text margins) and expansive at the large end (48px and 96px section breaks that give the dark canvas room to breathe). The jump from `{spacing.xl}` (40px) to `{spacing.2xl}` (48px) and `{spacing.3xl}` (96px) marks the difference between component padding and editorial breathing room.

### Grid & Container
- Max content width: ~1370px (the widest dembrandt breakpoint, consistent with standard luxury e-commerce containers)
- Hero: full-viewport cinematic photography at all desktop sizes; product positioned at environmental scale
- Product grid: multi-column editorial grid for collection pages; 2–4 columns depending on viewport
- White modal overlay: centered, fixed-width card floating over the darkened photography — the signup and detail panels

### Whitespace Philosophy
- **Darkness as whitespace.** The black canvas is the breathing room. Product images do not need margins to establish presence — the void between them is the frame.
- **Compression within, expansion between.** Component internals use tight 15–20px padding; section-to-section intervals jump to 48–96px. The experience pulses: close, then open, then close again.
- **Photography as negative space.** Full-bleed hero images often feature product objects set against environmental voids — courtyard stone, open sky, gallery shadow. The negative space inside the photography mirrors the space around it.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All dark-canvas surfaces, product cards on black, navigation chrome |
| Warm Hairline (Level 1) | `border-top: 1px solid {colors.border}` | Structural dividers, sidebar rules, filter separators |
| White Panel (Level 2) | `{colors.surface-elevated}` on `{colors.background}` | Modal and overlay cards — depth by contrast, not shadow |
| Soft Lift (Level 3) | `rgba(0,0,0,0.15) 0px 0px 30px 0px` | Light-context cards and hover states on elevated surfaces |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on interactive controls |

**Shadow Philosophy**: Gubi's design is functionally shadow-free on dark surfaces — the black canvas already implies maximum depth, and drop shadows would be invisible against it. Elevation is expressed through surface color contrast: white panels float against black without needing a shadow to mark the boundary. The one shadow value in the system (`rgba(0,0,0,0.15) 0px 0px 30px 0px`) appears on light-surface product panels and PrimeReact modal shells, not on the brand-facing dark chrome.

## Shapes

The complete radius scale is declared in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, image containers, section panels — universal Gubi shape |
| `sm` | 4px | Form inputs (`{rounded.sm}`) — the sole exception in the system, detected on input borders |
| `pill` | 9999px | Reserved for third-party UI shells (PrimeReact), not part of brand-facing design |

Gubi's shape language is square. Every CTA, every card, every image crop runs at `{rounded.none}`. The `4px` radius detected on input fields is the browser-default behavior for the form framework — even there, the system aspires to zero. Furniture is made from rectilinear structures: steel, marble, wood in rectangular forms. The interface honors that vocabulary.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — White fill on dark context: `{colors.primary-inverse}` background, `{colors.primary}` text, `{typography.button-ui}` (14px Helvetica Neue weight 500, uppercase, 1.6px tracking), `{rounded.none}` sharp corners, `13px 20px` padding. The "SIGN UP NOW" form submit; any primary conversion action on dark backgrounds.
- **`button-primary-hover`** — Softens to `{colors.ink-muted}` (`#888888`) fill on hover — the button recedes slightly rather than darkening dramatically, consistent with the brand's unhurried transition cadence.
- **`button-secondary`** — Outline ghost variant for secondary actions on dark surfaces: transparent fill, `{colors.ink}` white 1px border, same typography. Used for "EXPLORE" and navigation-adjacent CTAs.
- **`button-secondary-hover`** — Border and text shift to `{colors.ink-muted}` on hover — the same softening principle applied to the outline variant.
- **`button-outline-light`** — Ghost variant for use inside white panels: transparent fill, `{colors.primary}` black 1px border, black text. Used in modal cards and light-surface contexts.

### Cards

Product display cards and editorial feature panels: `{colors.surface}` dark fill or transparent on black canvas, `{rounded.none}` sharp corners, no shadow, product photography edge-to-edge or with generous internal margins. Modal overlay cards (`{components.card}`) reverse to `{colors.surface-elevated}` white — the modal is the negative-space inversion of the dark site.

### Inputs

Newsletter and account form inputs within modals: `{colors.surface-elevated}` white background, `{rounded.sm}` 4px radius, bottom-ruled rest state with `{colors.border-dark}` hairline, `2px solid {colors.focus-ring}` outline on focus, `{typography.body}` 15px Helvetica at 1.6px tracking. Error state shifts border to `{colors.error-alt}`. The form lives in the white modal; on the dark canvas, inputs are absent.

### Badges / Tags

Category markers and collection labels: transparent fill, `{colors.border}` warm parchment border, `{typography.caption}` 13px Helvetica uppercase with 1.6px tracking, `{rounded.none}` sharp. These act as wayfinding labels — "LIGHTING," "SEATING," "COLLABORATION" — set in the same tracked-sans register as navigation.

### Navigation

The Gubi navigation is a thin strip over the dark hero: "GUBI" wordmark in Kings Caslon weight 400 at far left; category links ("ROOMS," "LOUNGE," "DINING," "OUTDOOR," "ACCESSORIES," "INSPIRATION," "NEWS") in `{typography.nav-link}` Helvetica with 1.6px tracking; icon actions (wishlist, search, bag) at far right. The bar floats over the full-bleed photography without background — no surface, no border. On scroll, it acquires a `{colors.surface-warm}` panel to maintain legibility. Transition duration `0.32s` ease-in-out.

## Do's and Don'ts

### Do
- Use `{colors.background}` pure black as the universal canvas — this is a permanent, unconditional brand decision, not a dark mode
- Serve Kings Caslon (or Cormorant Garamond as substitute) for all product names, collection headings, and editorial moments — uppercase, weight 400
- Apply `1.6px` letter-spacing to all Helvetica Neue text in `{typography.body}`, `{typography.nav-link}`, and `{typography.button-ui}` — the tracked-sans voice is the single most consistent technical choice in the system
- Let photography occupy full-bleed regions without borders, rounded crops, or competing drop shadows — the image is the brand
- Use `{rounded.none}` for all CTAs, cards, and panels — rectilinear geometry is non-negotiable
- Reserve `{colors.surface-elevated}` white for modal and overlay contexts only — it is rare and therefore legible as a signal of elevation
- Use `{colors.border}` warm parchment (`#e4e3df`) for structural hairlines — the only warm accent in an otherwise cool dark system
- Set button transitions at `0.6s cubic-bezier(0.25,1,0.5,1)` — slow enough to feel like deliberate craft, not digital snap
- Uppercase all UI chrome labels in Helvetica Neue — `text-transform: uppercase` is the bridge between the Caslon editorial register and the sans navigation register

### Don't
- Don't introduce mid-range radiuses (4–16px) on buttons or cards — `{rounded.sm}` is reserved for form inputs only, and even that is a compromise
- Don't add gradients or scrims over full-bleed photography — the system has no gradient tokens; darkness in the photography is the photography's own depth
- Don't use Kings Caslon in navigation links, button labels, or form fields — the serif is for naming, not for navigating
- Don't apply a white or light background to the primary page canvas — white is elevated, rare, and meaningful; making it the default dissolves the brand's core atmosphere
- Don't reduce Helvetica Neue letter-spacing below `0.64px` in any UI context — the tracked sans is audible; removing the tracking breaks the voice
- Don't add drop shadows to dark-surface elements — on a black canvas, shadows are invisible and the intent is lost
- Don't use the error reds (`{colors.error}`, `{colors.error-alt}`) outside validation contexts — they are the only saturated colors in the system and their rarity carries meaning
- Don't bold Kings Caslon headlines — weight 400 is the ceiling; authority comes from size, uppercase, and letter-spacing, never weight escalation
- Don't introduce new accent colors — the palette is black, white, warm grey hairline, and ink-muted grey. Any hue addition breaks the monochromatic luxury contract.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <350px | Compressed navigation, single-column layout |
| Mobile | 350–599px | Single column, full-width photography, hamburger navigation |
| Mobile Large | 600–767px | Slightly wider grid columns, two-up product cards possible |
| Tablet Portrait | 768–833px | Navigation transitions toward horizontal; 2-column product grids |
| Tablet Landscape | 834–999px | Full navigation bar restored; editorial grid opens |
| Large Tablet | 1000–1023px | Pre-desktop, full content width |
| Desktop | 1024–1279px | Full navigation, 3–4 column product grids, hero at viewport width |
| Wide Desktop | 1280–1369px | Maximum container, expanded section margins |
| Large Desktop | ≥1370px | Full-resolution hero photography, maximum content width at ~1370px |

### Touch Targets
- Primary CTA buttons: `~44px` effective height via `13px 20px` padding on `14px` type with `1.0` line-height
- Navigation links: tap target includes label text plus generous adjacent whitespace in the navigation strip
- Product cards: entire card surface including photography region is tappable, not just the title zone

### Collapsing Strategy
- **Navigation**: Horizontal nav collapses to hamburger icon at tablet breakpoints; the "GUBI" wordmark stays left-anchored; icon tray (wishlist, search, bag) remains right-aligned
- **Hero**: Full-viewport photography maintained at all breakpoints; editorial heading scales from `{typography.display-hero}` to `{typography.heading-section}` at mobile
- **Product grid**: 4-column desktop collapses to 2-column at tablet and single-column at mobile; photography proportions preserved with `object-fit: cover`
- **Modal overlays**: Expand to near-full-screen at mobile breakpoints; padding compresses from 24px to 15px; input fields become full-width

### Image Behavior
- Product and campaign photography always full-bleed within its grid column — never inset, never bordered, never cropped to a radius
- Hero images maintain viewport-height aspect ratio on desktop; compress to a fixed tall aspect (~3:4) on mobile
- Product thumbnails maintain consistent aspect ratios through `padding-bottom` technique; the object within the frame may be repositioned but never distorted

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` (`#000000`)
- Primary text (on dark): `{colors.ink}` (`#ffffff`)
- Secondary text: `{colors.ink-muted}` (`#888888`)
- Structural hairline: `{colors.border}` (`#e4e3df`)
- CTA fill (dark context): `{colors.primary-inverse}` (`#ffffff`)
- CTA text (dark context): `{colors.primary}` (`#000000`)
- Elevated modal surface: `{colors.surface-elevated}` (`#ffffff`)

### Example Component Prompts

- "Build a Gubi hero section on `{colors.background}` (`#000000`) canvas. Full-bleed atmospheric photography covering the viewport — no border, no shadow, no radius on the image. Overlaid at the bottom-left: a product category eyebrow in `{typography.caption}` (13px Helvetica Neue uppercase 1.6px tracking, `{colors.ink}`), then a Kings Caslon weight 400 uppercase headline in `{typography.display-hero}` at 48px in `{colors.ink}`, line-height 1.1. Navigation bar floats over the top with no background surface. No scrim over the image."

- "Design a Gubi primary CTA button for a dark surface: `{colors.primary-inverse}` white background, `{colors.primary}` black text, `{typography.button-ui}` (14px Helvetica Neue weight 500, uppercase, 1.6px tracking), `{rounded.none}` sharp corners, `13px 20px` padding. Hover state shifts background to `{colors.ink-muted}` (`#888888`). Transition: `background-color 0.6s cubic-bezier(0.25,1,0.5,1), border-color 0.6s`."

- "Create a Gubi white modal card floating over a darkened canvas. Card: `{colors.surface-elevated}` white, `{rounded.none}` sharp, `24px` padding, no shadow. Inside: a Kings Caslon 24px heading in `{typography.display}` in `{colors.primary}` black, then two input fields (`{components.input}`: white background, `{rounded.sm}` 4px, bottom-border at rest, `2px solid {colors.focus-ring}` on focus, `{typography.body}` Helvetica 15px 1.6px tracking in `{colors.primary}`), then a full-width `{components.button-primary}` CTA. Close icon (×) top-right in `{colors.ink-quiet}`."

- "Build the Gubi navigation bar. Background: `{colors.surface-warm}` (`#2c2c2b`) on scroll, transparent over hero. Left: 'GUBI' wordmark in Kings Caslon weight 400, `{colors.ink}` white. Center: navigation links ('ROOMS', 'LOUNGE', 'DINING', 'OUTDOOR', 'ACCESSORIES') in `{typography.nav-link}` (15px Helvetica Neue, uppercase, 1.6px tracking, `{colors.ink}` white). Right: wishlist, search, bag icons in `{colors.ink}`. No border-bottom at rest; `1px solid {colors.border}` on scroll. Transition `0.32s ease-in-out`."

- "Design a Gubi product category badge: transparent background, `{colors.border}` (`#e4e3df`) warm-parchment `1px solid` border, `{typography.caption}` (13px Helvetica Neue uppercase 1.6px tracking, `{colors.ink}` white), `{rounded.none}` sharp, `4px 10px` padding. Labels: 'LIGHTING', 'SEATING', 'COLLABORATION', 'OUTDOOR'."

- "Create a Gubi product card for a dark grid. Background: `{colors.surface}` (`#1a1a1a`), `{rounded.none}`, no shadow. Full-bleed product photography at top — object on atmospheric background, no border. Below: `{typography.display}` Kings Caslon weight 400 24px product name in `{colors.ink}` uppercase, then `{typography.body}` Helvetica 15px 1.6px tracking `{colors.ink-muted}` for designer credit and price. `{rounded.none}` on the image container. Hover: slight opacity shift on photography (0.85) with `0.3s ease-in-out` transition."

### Iteration Guide

1. Begin with `{colors.background}` (`#000000`) as the total canvas. The darkness is the brand's first sentence — everything emerges from it.
2. Set typography by function: Kings Caslon (or Cormorant Garamond) at weight 400 for any moment that names a product, collection, or creative concept. Helvetica Neue for everything else.
3. Apply `1.6px` letter-spacing to all Helvetica Neue text — this is the system's most consistent technical signature; without it the sans registers as generic.
4. All buttons are `{rounded.none}` sharp rectangles. No exceptions in brand-facing UI.
5. Introduce `{colors.surface-elevated}` white only for modal and overlay surfaces — its rarity is its power.
6. Use `{colors.border}` warm parchment (`#e4e3df`) as the sole structural hairline — it is the system's only warm tone, and it carries all the visual warmth the dark palette needs.
7. Set interaction transitions at `0.6s cubic-bezier(0.25,1,0.5,1)` — the deceleration curve feels like a well-balanced drawer, not a digital tap.
8. Photography is always full-bleed and untreated — no radius, no shadow, no scrim. The depth and warmth are already in the image.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Gubi. Brand names and trademarks belong to their respective owners.