--- version: alpha name: "Cann" description: "Token-first design system reference for Cann — a cannabis social tonic brand built on vivid cyan, Gotham Condensed Bold all-caps display, and a clean white-canvas storefront that feels joyful without feeling loud." colors: # Surface / canvas background: "#ffffff" surface: "#f2f2f8" # very light lavender-gray — secondary section backgrounds surface-teal: "#00a7c7" # Cann cyan — hero backgrounds, primary sections # Text / ink ink: "#1a1a2e" # near-black navy — primary body text on white canvas on-background: "#1a1a2e" on-surface: "#1a1a2e" on-primary: "#ffffff" # white text on cyan surfaces # Brand accent primary: "#00a7c7" # Cann cyan — signature brand color, primary CTA, hero backgrounds primary-dark: "#008ea9" # hover/active variant of cyan primary-container: "#d0f0f7" # light cyan tint — badge/tag backgrounds # Secondary accent secondary: "#666bb2" # dusty lavender — secondary CTAs, quiz prompts, social elements on-secondary: "#ffffff" # white text on lavender surfaces secondary-light: "#8a8fc8" # lighter lavender hover # State / interaction text-hover: "#008ea9" # was rgb(0, 142, 169) — hover on cyan links and elements focus-ring: "#00a7c7" # cyan focus ring for keyboard nav focus-tint: "#d0f0f7" # was rgba(0,167,199,0.12) — Google format requires hex # Semantic success: "#44be70" # green for confirmation states warning: "#fbca10" # warm yellow for stock/notice alerts error: "#c41f4b" # deep crimson — form errors, urgent notices # Borders border: "#f2f2f8" # same as surface — very light lavender-gray dividers border-teal: "#00a7c7" # cyan border for highlighted inputs and tiles # Shadow tints shadow-soft: "#191b1e" # was rgba(25,27,30,0.03) — flattened to near-black for hex typography: display-hero: fontFamily: "Gotham Condensed Bold, 'Bebas Neue', Impact, 'Arial Narrow', sans-serif" fontSize: 140px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px display: fontFamily: "Gotham Condensed Bold, 'Bebas Neue', Impact, 'Arial Narrow', sans-serif" fontSize: 96px fontWeight: 700 lineHeight: 1.02 letterSpacing: 0px heading-section: fontFamily: "Gotham Condensed Bold, 'Bebas Neue', Impact, 'Arial Narrow', sans-serif" fontSize: 60px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0px heading-sub: fontFamily: "Gotham Condensed Bold, 'Bebas Neue', Impact, 'Arial Narrow', sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "Gotham Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: 0px body: fontFamily: "Gotham Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px nav-link: fontFamily: "Gotham Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.6 letterSpacing: 0px button-ui: fontFamily: "Gotham Condensed Bold, 'Bebas Neue', Impact, 'Arial Narrow', sans-serif" fontSize: 17px fontWeight: 700 lineHeight: 1.2 letterSpacing: 0px caption: fontFamily: "Gotham Medium, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px 5xl: 96px rounded: none: 0px sm: 4px md: 8px lg: 18px xl: 48px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.on-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 32px button-secondary-hover: backgroundColor: "{colors.secondary-light}" textColor: "{colors.on-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 32px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.primary}" borderColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" borderColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px card-teal: backgroundColor: "{colors.surface-teal}" textColor: "{colors.on-primary}" rounded: "{rounded.xl}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.primary}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 16px 20px borderColor: "{colors.focus-tint}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 16px 20px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.on-secondary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Cann Design System ## Overview Cann's website opens like an invitation to a very good party. The page is anchored by a full-bleed cyan hero (`{colors.primary}`) — a warm, pool-water teal that sits somewhere between Caribbean and tech, lively without being abrasive. Against it, the Gotham Condensed Bold wordmark and headline stack lands in heavy all-caps: "YOU'VE GOT A MYSTERY DISCOUNT." This is a brand that came out of the gate with a personality, and every design choice reinforces it. The canvas flips to clean white below the fold, where the same cyan appears as CTA buttons and accent tiles — never diluted, always the loudest element in the room. The typeface strategy is singular and decisive. Gotham Condensed Bold handles every display role, always uppercase, always compressed — the silhouette of a word is as important as its meaning. Gotham Medium (and Gotham Book for lighter moments) takes body and navigation copy, grounding the condensed display energy with a familiar, approachable read. Together they create a voice that feels like a well-designed beverage can at shelf: punchy at a glance, legible up close. There's no serif to soften the system, no quirky secondary typeface — Gotham IS the system. What distinguishes Cann's approach is its **tight simplicity**. Unlike Poppi's flavor-palette maximalism or Recess's periwinkle commitment, Cann operates with a two-color system — cyan (`{colors.primary}`) and white (`{colors.background}`) — and lets photography carry the warmth. The cans themselves, with their soft illustrated labels, bring the color variety; the UI stays out of the way. Rounded 48px containers and pill-shaped buttons (`{rounded.pill}`) soften the condensed-bold energy into something approachable and social. The overall impression is a DTC cannabis tonic that is genuinely confident: no apology in the palette, no hedging in the type, no muddiness in the layout. **Key Characteristics:** - Cyan (`{colors.primary}`) as the hero background and primary CTA — the brand's singular color commitment - Gotham Condensed Bold at 96–140px in uppercase for all display — compressed, high-impact poster energy - Gotham Medium for body and nav — grounded sans foil to the display extremes - Pill-shaped buttons (`{rounded.pill}`) across all CTAs — social and approachable, not corporate - 48px rounded image containers (`{rounded.xl}`) for can photography — soft crop treatment - White canvas (`{colors.background}`) with cyan accents — photography provides the warmth - Dusty lavender (`{colors.secondary}`) for secondary CTAs and quiz moments — a muted complement to cyan - Light cyan tint (`{colors.focus-tint}`) for bordered inputs and subtle interaction states - A continuous-loop marquee animation (`translateFull` at 15.5s linear) for social proof and press tiles - Gentle soft shadows (`box-shadow: 0 0 5px rgba(25,27,30,0.03)`) on cards — barely visible depth ## Colors ### Primary - **Cann Cyan** (`{colors.primary}`): The brand's defining color. Used wall-to-wall as hero background, primary CTA fill, accent bands, and progress indicators. The most distinctive surface in the system — unmistakable at shelf and on screen. - **Pure White** (`{colors.background}`): The default page canvas below the hero. Lets photography and cyan CTAs dominate without competition. - **Near-Black Navy** (`{colors.ink}`): Primary body text and heading text on white surfaces. Not pure black — a slightly warm navy that reads sophisticated against the cyan-saturated palette. ### Brand Accent - **Cann Cyan** (`{colors.primary}`): Primary CTA buttons, focus outlines, border highlights on inputs, progress bar fills, card tile backgrounds. One color doing many jobs. - **Cyan Dark** (`{colors.primary-dark}`): Hover and active variant of the primary cyan — a deeper teal for directional feedback. Extracted from the dembrandt hover data. - **Light Cyan Tint** (`{colors.primary-container}`): Input border washes, badge backgrounds, hover surfaces — the 12% cyan overlay flattened to opaque hex for token compatibility. ### Secondary Accent - **Dusty Lavender** (`{colors.secondary}`): Quiz prompts, secondary CTAs ("NOT YET, BUT I'M CURIOUS"), circle-button UI — a warm counterpoint to the cool cyan. Appears in age-gate and quiz flows. - **Light Lavender** (`{colors.secondary-light}`): Hover state on lavender elements — a slightly brighter shift to signal interaction. ### State & Interaction - **Cyan Hover** (`{colors.text-hover}`): Hover state for cyan-colored links and nav elements — a purposeful darkening. - **Focus Ring** (`{colors.focus-ring}`): Keyboard accessibility ring — matches primary cyan to maintain brand coherence. - **Focus Tint** (`{colors.focus-tint}`): The lightest possible cyan application — borders and washes that need a brand presence without full saturation. ### Semantic - **Success Green** (`{colors.success}`): Positive confirmations, product availability, review star accent. - **Warning Yellow** (`{colors.warning}`): Star ratings, stock notices. - **Error Crimson** (`{colors.error}`): Form validation, age-gate denial state — the deepest warm color in the palette. ### Borders & Shadows - **Surface Gray** (`{colors.border}`): Subtle section dividers and card borders — nearly invisible on white canvas. - **Shadow Near-Black** (`{colors.shadow-soft}`): The tint used in the barely-visible soft shadow on cards (`0 0 5px` at 3% opacity, flattened to hex). ## Typography ### Font Family - **Display**: `Gotham Condensed Bold` — Hoefler&Co's Gotham family, condensed cut, Bold weight. Self-hosted on the Cann Shopify storefront as `gotham-cond-bold.woff2`. All display and heading text is uppercase, running at extreme sizes (60–140px). The condensed cut maximizes the space for large type at narrow column widths. Closest Google Font substitute: **Barlow Condensed** (weight 700) or **Bebas Neue** (display-only, no body sibling). - **Body / UI**: `Gotham Medium` and `Gotham Book` — the regular-width cuts of the same Gotham family. Self-hosted as `gotham-medium.woff2`, `gotham-book.woff2`, `gotham-bold.woff2`. Handles all body copy, navigation, captions, and UI labels. Closest Google Font substitute: **DM Sans** weight 400/500 or **Inter** weight 400/500. - **Note**: The site also loads Source Sans Pro and Noto Sans via Google Fonts for third-party widget fallbacks (Okendo reviews, smart search). These are widget fonts, not brand decisions — do not use for UI. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero announcement headlines ("YOU'VE GOT A MYSTERY DISCOUNT") — Gotham Condensed Bold 140px uppercase | | `display` | Primary section heads, page-level statements — Gotham Condensed Bold 96px uppercase | | `heading-section` | Feature section titles, product category heads — Gotham Condensed Bold 60px uppercase | | `heading-sub` | Card titles, pull-quote heads, sub-feature labels — Gotham Condensed Bold 36px uppercase | | `body-large` | Hero subtext, intro copy, feature descriptions — Gotham Medium 18px | | `body` | Standard reading text, product descriptions, FAQ content — Gotham Medium/Book 16px | | `nav-link` | Navigation links, footer links — Gotham Medium 16px weight 700 | | `button-ui` | CTA labels, pill button text — Gotham Condensed Bold 17px uppercase | | `caption` | Legal, metadata, footnotes — Gotham Medium 12px | ### Principles - **All display is uppercase**: Every heading token uses `text-transform: uppercase`. This is not optional — the compressed letterspacing of Gotham Condensed only reads correctly as a headline in caps. Sentence-case display would lose the poster quality. - **Condensed only for display**: `Gotham Condensed Bold` never descends into body copy or navigation. The regular-width cuts (Medium, Book) handle everything below 24px for legibility. - **No tight tracking needed**: Gotham Condensed has built-in tight letterform geometry — do not apply additional negative `letter-spacing` at display sizes. The natural 0px tracking is correct. - **Line-height compresses at scale**: Display runs at 1.0–1.02 line-height — stacked uppercase letters, almost touching, for maximum block impact. Body text expands to 1.6 for comfortable reading. - **Button labels follow the condensed rule**: CTAs use `{typography.button-ui}` — Gotham Condensed Bold at 17px uppercase. The button label is a mini-headline, not a body sentence. ## Layout ### Spacing System Base unit: 8px. The scale runs clean powers of 8 from 4px micro-gaps to 96px section breaks. Cann's spacing is confident: compact within components (8–16px), and generous between sections (64–96px). The hero's full-bleed cyan makes section transitions read clearly — there's no ambiguity about where one zone ends and another begins. Horizontal container padding is typically 32px on desktop, collapsing to 16px on mobile. ### Grid & Container - Max content width: approximately 1280px - Hero: full-bleed cyan band, single-column with product photography right-aligned - Product grid: approximately 3–4 columns on desktop for can SKUs - Feature sections: 2-column with alternating text/image layout - Social proof: marquee strip (continuous scroll) for press coverage and testimonials - Container horizontal padding: 32px desktop → 16px mobile ### Whitespace Philosophy - **Photography earns the breathing room**: Product photography on white canvas needs generous margin — the cans are the visual anchor and should not feel crowded. - **Cyan sections are full-bleed**: When `{colors.primary}` is the background, it runs edge-to-edge. Partial-width cyan blocks would undermine the brand's commitment to the color. - **Compact UI elements**: Pill buttons, badges, and nav elements are tight. The compression in `{typography.button-ui}` allows CTAs to stay small and numerous without visual noise. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Page canvas, nav background, hero sections, footer | | Whisper (Level 1) | `0px 0px 5px 0px rgba(25,27,30,0.03)` | Product cards, content tiles — nearly invisible depth | | Subtle (Level 2) | `0px 4px 40px 0px rgba(25,27,30,0.2)` | Modals and overlays — more visible lift for layer separation | | Dropdown (Level 3) | `0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)` | Cart drawer, dropdown menus | | Focus Ring | `0 0 0 1px {colors.focus-ring}` | Keyboard accessibility — single-pixel cyan outline | | Input Outline | `0 0 0 1px {colors.focus-tint}` | Input default state — very faint cyan presence | **Shadow Philosophy**: Cann's shadow system is almost invisible by design. The site relies on color contrast — cyan against white, image against canvas — rather than shadow to establish hierarchy. The `0px 0px 5px 0px` whisper shadow on cards reads only in direct sunlight at full brightness; in typical use it's invisible. Modals and drawers step up to a real shadow to maintain modal layering semantics. There are no hard stamp shadows, no flat-offset effects — the system is clean and contemporary, letting the cyan and the photography do the visual lifting. ## Shapes The complete radius scale is declared in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Rarely used — full-bleed section backgrounds only | | `sm` | 4px | Small UI tags, progress indicators | | `md` | 8px | Input fields, dialog containers | | `lg` | 18px | Video player containers, smaller media frames | | `xl` | 48px | Can photography containers, feature imagery — the dominant image treatment | | `pill` | 9999px | All buttons, quantity badges, cart count indicators | Cann's radius system has a clear two-tier personality: `{rounded.xl}` (48px) on image containers creates soft, friendly can-cropping that matches the illustrated label art on the cans themselves. `{rounded.pill}` on all interactive elements makes every CTA feel approachable and social — a deliberate anti-corporate signal in a category that leans clinical. The gap between "image rounded" and "button pill" is intentional — images get a bold crop treatment, buttons get full-circle softness. ## 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`** — Cann cyan fill (`{colors.primary}`), white text, pill shape, 12px 24px padding. Primary site-level CTAs and the dominant call to action on white canvas. Hover shifts to `{colors.primary-dark}`. - **`button-secondary`** — Dusty lavender fill (`{colors.secondary}`), white text, pill shape, 14px 32px padding. Used for alternative responses and secondary quiz options ("NOT YET, BUT I'M CURIOUS"). Hover shifts to `{colors.secondary-light}`. - **`button-ghost`** — White background, cyan text and border, pill shape. Tertiary moments where the surface already carries color and a filled button would compete. - **`button-ghost-hover`** — Light cyan tint fill appears on hover, maintaining the cyan vocabulary without the full-weight shift. ### Cards **Product / SKU Card** - Background: `{colors.background}` (white) — product photography on clean canvas - Radius: `{rounded.xl}` (48px) for the image container, `{rounded.lg}` (18px) for the card frame - Shadow: whisper level (`0 0 5px rgba(25,27,30,0.03)`) - Internal: Gotham Condensed Bold heading for SKU name, Gotham Medium for sub-labels and pricing **Teal Feature Tile** - Background: `{colors.surface-teal}` (cyan) - Radius: `{rounded.xl}` for the tile - Text: `{colors.on-primary}` (white) - Use: Feature callout cards, "why Cann" benefit tiles ### Inputs & Forms - Background: `{colors.background}` (white) - Border: `1px solid {colors.focus-tint}` — a very faint cyan outline as the default - Radius: `{rounded.md}` (8px) — not pill, not sharp; a soft rectangle - Font: `{typography.body}` (Gotham Medium 16px, color `{colors.primary}` — text inherits cyan by default) - Padding: 16px 20px - Focus: `{components.input-focus}` — border switches to full `{colors.focus-ring}` (cyan), cursor cyan ### Badges / Tags **Teal Badge** — Light cyan container (`{colors.primary-container}`), cyan text, pill shape. Flavor tags, product category labels. **Lavender Badge** — Dusty lavender background (`{colors.secondary}`), white text, pill shape. Quiz status, age-gate labels. ### Navigation - Top promo bar: thin cyan band (`{colors.primary}`) with white Gotham text — promotional announcements - Main nav: white background, Cann logomark centered, account and cart icons right - Nav links: Gotham Medium 16px weight 700, color `{colors.ink}` — no uppercase in navigation body - Hover: transitions to `{colors.text-hover}` (cyan hover) - Mobile: hamburger collapse; the sticky nav stays white on scroll ## Do's and Don'ts ### Do - Use `{colors.primary}` as the full-bleed hero background — the color needs room to breathe, not just button patches - Apply `{rounded.pill}` to every CTA button — the circular pill is non-negotiable for brand voice - Use `{rounded.xl}` (48px) for all image containers holding can photography — the soft crop echoes the illustrated can label art - Use Gotham Condensed Bold in uppercase for every heading — compressed, uppercase, all-caps is the voice - Keep Gotham Medium/Book for body copy and navigation — never let Condensed Bold descend into running text - Use `{colors.secondary}` (dusty lavender) for alternative CTAs when `{colors.primary}` is already the dominant surface color - Let can photography carry warmth and variety — the UI stays neutral so the product art pops - Apply the marquee animation (`translateFull` at 15.5s linear) for press tiles and testimonials — continuous scroll adds social energy - Maintain `{colors.background}` (white) as the default canvas below hero folds ### Don't - Don't reduce the hero to a partial-width cyan strip — the cyan must bleed wall to wall or not at all - Don't use Gotham Condensed Bold at sentence case or mixed case — the condensed cut requires uppercase to be legible at display sizes - Don't introduce a third typeface — Gotham handles the full range; a new face would dilute the brand - Don't add hard stamp shadows or flat offset effects — Cann's system is clean and light, not graphic-print - Don't use the dusty lavender (`{colors.secondary}`) as a background surface — it's a secondary CTA color only, not a page color - Don't apply mid-range border-radius (12px, 20px, 30px) to buttons — the system is `{rounded.pill}` for interactive elements and `{rounded.xl}` for image containers, nothing in between - Don't substitute Bebas Neue as a display font without noting it lacks a body sibling — the Gotham family relationship (condensed display + regular body) is what makes the system work - Don't apply tight negative letter-spacing to Gotham Condensed display — the natural 0px tracking is already compact and correct - Don't break the can photography from its 48px rounded container — cropped square or rectangle images without the round treatment look wrong in this system --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Single-column, hero display drops to ~60px, stacked pill CTAs | | Mobile | 400–768px | Single-column, 80px hero, can photography below headline | | Tablet | 768–1024px | 2-column hero, 96px display, 2-up product grid | | Desktop | 1024–1280px | Full hero with side photography, 3–4 up product grid, marquee strip | | Large Desktop | ≥1280px | 1280px container, 140px hero possible, max 4-up grid | ### Touch Targets - Pill buttons: min 44px height via generous 12–14px top/bottom padding plus button-ui type - Product cards: full card is a tap target — nested CTA buttons have full 44px+ zones - Nav icons: minimum 44×44px tap area on cart and account icons - Quantity steppers: 40px minimum button size for increment/decrement ### Collapsing Strategy - **Nav**: White nav bar stays sticky; hamburger at ≤768px, full-screen white overlay on open - **Hero**: Cyan full-bleed maintained at every breakpoint — the color never becomes partial-width - **Display type**: 140px → 96px → 60px cascade as viewport narrows; uppercase always maintained - **Product grid**: 4-column → 3-column → 2-column → 1-column stacked on mobile - **Marquee strip**: Continuous scroll maintained at all breakpoints; speed unchanged - **Image containers**: 48px radius maintained; images scale within their rounded containers ### Image Behavior - Can photography scales within 48px rounded containers; aspect ratio always preserved - Product images on white canvas get generous surrounding whitespace — tight crops undermine the airy feel - Hero photography floats right-aligned against the cyan field on desktop; stacks below headline on mobile - No art direction changes — same cans, different layout adaptation --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (white) - Brand Anchor / Hero: `{colors.primary}` (Cann cyan `#00a7c7`) - Primary CTA: `{colors.primary}` - Primary Text: `{colors.ink}` (`#1a1a2e` navy-black) - Secondary CTA: `{colors.secondary}` (dusty lavender `#666bb2`) - Light Cyan Tint: `{colors.primary-container}` (badge / border wash) - Focus Ring: `0 0 0 1px {colors.focus-ring}` - Border Default: `1px solid {colors.focus-tint}` ### Example Component Prompts - "Build a hero section on full-bleed Cann cyan (`{colors.primary}`). Left column: Gotham Condensed Bold headline at 96px, uppercase, white (`{colors.on-primary}`), line-height 1.02. Below it a sub-label in Gotham Medium 18px white. Two pill buttons: primary in white fill with cyan text, secondary in dusty lavender (`{colors.secondary}`) with white text. Right column: product photography in a 48px border-radius container (`{rounded.xl}`). Hero is full viewport width — no content max-width clipping the cyan." - "Design a product card on white canvas — 18px border-radius (`{rounded.lg}`) outer frame, subtle whisper shadow (`box-shadow: 0 0 5px rgba(25,27,30,0.03)`). Can photography inside a 48px rounded container (`{rounded.xl}`). SKU name in Gotham Condensed Bold 36px uppercase, color `{colors.ink}`. Price in Gotham Medium 16px. 'Add to cart' pill button in Cann cyan (`{colors.primary}`) with white Gotham Condensed Bold 17px uppercase label." - "Create a pill CTA button — background `{colors.primary}`, text `{colors.on-primary}`, Gotham Condensed Bold 17px uppercase, `9999px` border-radius, padding 12px 24px. Hover state: background transitions to `{colors.primary-dark}` in 0.2s ease." - "Build an email input field — white background, `1px solid {colors.focus-tint}` border, `8px` border-radius, padding 16px 20px, Gotham Medium 16px, text color `{colors.primary}` (cyan default). Focus: border upgrades to `1px solid {colors.focus-ring}`, box-shadow `0 0 0 1px {colors.focus-ring}`." - "Create a marquee press strip — continuous horizontal scroll at 15.5s linear animation (`translateFull`). Tiles are white cards with `{rounded.lg}` radius and whisper shadow, containing press logos and short pull-quotes in Gotham Medium 16px `{colors.ink}`. Strip sits on white canvas with 32px vertical padding." - "Design a feature benefit tile — background `{colors.surface-teal}` (Cann cyan), padding 24px, `{rounded.xl}` (48px) radius. Headline in Gotham Condensed Bold 36px uppercase white. Body in Gotham Medium 16px white, line-height 1.6." ### Iteration Guide 1. Start with white canvas — cyan is for hero moments and primary CTAs, not the default page background 2. Hero sections must be full-bleed cyan (`{colors.primary}`) — partial-width cyan is never correct 3. All display type: Gotham Condensed Bold, uppercase, no exceptions. Gotham Medium/Book for body. 4. Every CTA is a pill (`{rounded.pill}` = 9999px) — no exceptions for buttons 5. Can photography lives in 48px rounded containers (`{rounded.xl}`) — the round crop is the brand's image treatment 6. Use `{colors.secondary}` (dusty lavender) only for secondary/alternative CTAs, never as a surface color 7. Shadows are whisper-light — only the `0 0 5px rgba(25,27,30,0.03)` on cards; modals get the deeper shadow 8. The marquee animation (`translateFull`, 15.5s linear) is the brand's motion signature — apply to press/social strips --- ## 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 Cann. Brand names and trademarks belong to their respective owners.