dub_links___style_reference:
  info: "> warm sunrise over monochrome architecture"

  theme: "light"

  info: "Dub presents a warm, confident SaaS aesthetic: a near-monochrome interface anchored by soft cream-to-white gradients, with one vivid orange accent that makes every action feel activated. The system breathes through generous whitespace on a compact 4px grid, pairing Inter's utility precision with Satoshi's rounded display character for headlines. Surfaces stay matte and light with hairline borders and whisper-soft shadows — depth comes from subtle tonal shifts and elevation, never heavy panels. The primary CTA is always a black pill with orange-ember micro-accents nearby, creating a contrast between structural neutrality and brand warmth. Components should feel quick and utilitarian: 4px and 8px radii dominate, pill buttons carry CTAs, and cards are flat white rectangles on a faintly warm canvas."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas Cream | `#f5f5f5` | `--color-canvas-cream` | Page background base — the warm off-white that gives the interface its sunlit feel |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, input fields — pure white for content containers |"
    info: "| Ink Black | `#0a0a0a` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Charcoal | `#171717` | `--color-charcoal` | Secondary text, button text on dark fills, heading weights |"
    info: "| Graphite | `#404040` | `--color-graphite` | Tertiary text, muted descriptions, secondary button text |"
    info: "| Steel | `#737373` | `--color-steel` | Placeholder text, disabled states, low-emphasis body copy |"
    info: "| Ash | `#a3a3a3` | `--color-ash` | Icon fills at rest, muted helper text, tertiary icons |"
    info: "| Fog | `#d4d4d4` | `--color-fog` | Input borders at rest, subtle dividers, inactive form controls |"
    info: "| Mist | `#e5e5e5` | `--color-mist` | Hairline borders throughout — the workhorse divider color |"
    info: "| Slate | `#6b7280` | `--color-slate` | Muted body text, secondary icon strokes, meta information |"
    info: "| Ember Orange | `#ea580c` | `--color-ember-orange` | Orange supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Ember Glow | `#fb923c` | `--color-ember-glow` | Lighter orange for hover states on ember elements, soft accent fills |"
    info: "| Ember Deep | `#7c2d12` | `--color-ember-deep` | Dark orange for icon strokes and decorative accents needing depth |"
    info: "| Signal Blue | `#3b82f6` | `--color-signal-blue` | Decorative icon accent, link highlights, informational touches — the secondary chromatic note |"
    info: "| Terminal Green | `#22863a` | `--color-terminal-green` | Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Alert Red | `#d32f2f` | `--color-alert-red` | Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Warm Sunrise | `linear-gradient(90deg, rgb(244, 149, 12), rgb(235, 92, 12))` | `--color-warm-sunrise` | Gradient endpoint for the hero's warm peach wash — the signature atmospheric gradient |"

  tokens___typography:

    satoshi___display_headlines___the_custom_satoshi_at_medium_weight_creates_a_rounded__friendly_authority_at_hero_scale__its_geometric_softness_contrasts_with_inter_s_utilitarian_precision____font_satoshi:
      - "**Substitute:** General Sans, Switzer, Inter (weight 600)"
      - "**Weights:** 500"
      - "**Sizes:** 40px, 48px"
      - "**Line height:** 1.00-1.15"
      - "**Role:** Display headlines — the custom Satoshi at medium weight creates a rounded, friendly authority at hero scale; its geometric softness contrasts with Inter's utilitarian precision"

    inter___primary_ui_font___handles_body_text__nav_items__buttons__form_labels__section_headings__weight_500_for_nav_active_states_and_subtle_emphasis__600_700_for_subheadings__tight_1_25_1_43_line_height_at_body_sizes_keeps_the_compact_density_working____font_inter:
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 8px, 12px, 14px, 16px, 18px, 20px, 24px"
      - "**Line height:** 1.25-1.56"
      - "**Role:** Primary UI font — handles body text, nav items, buttons, form labels, section headings; weight 500 for nav active states and subtle emphasis, 600-700 for subheadings; tight 1.25-1.43 line-height at body sizes keeps the compact density working"

    geist_mono___short_url_display__code_snippets__technical_metadata___monospace_where_data_precision_matters_the_shortened_link__the_click_counter____font_geist_mono:
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px"
      - "**Line height:** 1.33-1.50"
      - "**Role:** Short URL display, code snippets, technical metadata — monospace where data precision matters (the shortened link, the click counter)"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.33 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.56 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.4 | — | `--text-heading-sm` |"
      info: "| display | 48px | 1.15 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 236 | 236px | `--spacing-236` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| pills | 9999px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"
      info: "| sm | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0...` | `--shadow-sm` |"
      info: "| sm-2 | `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset` | `--shadow-sm-2` |"
      info: "| subtle-2 | `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px` | `--shadow-subtle-2` |"
      info: "| subtle-3 | `rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset` | `--shadow-subtle-3` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    primary_cta_button:
      role: "Main conversion action — 'Start for free', 'Sign up'"

      info: "Ink Black (#0a0a0a) fill, Paper White (#ffffff) text, 8px radius, Inter weight 500 at 14px, 8px 16px padding, subtle 0px 1px 2px shadow at 5% black. The near-black fill against the warm cream canvas is the strongest visual element on any page."

    secondary_ghost_button:
      role: "Secondary action — 'Get a demo', 'Log in'"

      info: "Transparent fill with Mist (#e5e5e5) 1px border, Charcoal (#171717) text, 8px radius, Inter weight 500 at 14px, 8px 16px padding. Sits beside the primary CTA as a quiet alternative."

    sign_up_pill_button:
      role: "Navigation primary action"

      info: "Ink Black (#0a0a0a) fill, white text, 9999px radius (full pill), Inter weight 500 at 14px, 6px 14px padding. Slightly tighter padding than card CTAs for the nav context."

    ember_action_button:
      role: "Brand-emphasized action — 'Shorten link', key conversion in product context"

      info: "Ember Orange (#ea580c) fill, white text, 8px radius, Inter weight 500 at 14px, 8px 16px padding. The single chromatic button in the system — use sparingly for the most important in-product action."

    text_input:
      role: "URL destination, search, text fields"

      info: "Paper White (#ffffff) fill, Fog (#d4d4d4) 1px border, Ash (#a3a3a3) placeholder text, Charcoal (#171717) input text, 8px radius, Inter at 14px, 10px 14px padding. Focus state: 4px black-at-10% outer ring."

    link_shortener_card:
      role: "Hero product demonstration — the centerpiece of the homepage"

      info: "Paper White surface, 12px radius, two-layer shadow (0px 4px 6px -1px / 0px 2px 4px -2px at 10% black). Contains: input row with Ember Action Button, and a result row with Geist Mono short URL + click count badge. This is the signature component."

    brand_tag___badge:
      role: "Category label above headlines — 'Dub Links', 'Branded Short Links'"

      info: "Light tinted background, Charcoal text, 9999px radius, Inter weight 500 at 12px, 2px 10px padding. Features a small leading icon. Tints include #fef9c3 (warm yellow), #eff6ff (cool blue), #dcfce7 (mint)."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Transparent on canvas, Ink Black logo wordmark, Inter nav items at 14px weight 500 in Charcoal. Dropdown items have 8px radius. Active nav item has light background highlight."

    trust_logo_grid:
      role: "Social proof — customer logos"

      info: "2-row grid of 5 columns, 40px row gap, each logo rendered in Ash (#a3a3a3) or muted monochrome. 'CASE STUDY' link in Geist Mono appears beneath select logos. No borders, pure whitespace separation."

    product_ui_mockup:
      role: "Feature section visual — link creation interface"

      info: "Paper White surface, 12px radius, layered shadow. Contains form fields, QR code preview, social link preview icons. Simulated browser chrome with traffic light dots at top. Rounded input fields at 8px."

    qr_code_preview_tile:
      role: "Embedded QR code in product mockup"

      info: "Paper White fill with 8px radius, 1px Mist border, small external link icon. Centered QR code pattern in black."

    section_heading:
      role: "Feature section titles"

      info: "Satoshi weight 500 at 40-48px, Ink Black color, centered, line-height 1.15. Followed by 18px body text in Slate (#6b7280) at weight 400, max-width ~600px centered."

  do_s_and_don_ts:

    do:
      - "Use 8px radius for all rectangular buttons and inputs, 9999px for pill-shaped tags and nav CTAs"
      - "Apply Inter weight 500 for navigation items, button text, and subtle emphasis; reserve 600-700 for subheadings"
      - "Use Satoshi weight 500 at 40-48px for section display headlines — never drop below 40px"
      - "Pair the Ink Black (#0a0a0a) primary CTA with an Ember Orange (#ea580c) in-product action for a clear primary/secondary distinction"
      - "Use Geist Mono for shortened URLs, click counts, and any technical data display"
      - "Keep section gaps at 80px+ to maintain the airy, spacious rhythm"
      - "Use hairline 1px Mist (#e5e5e5) borders for all dividers and input resting states"

    don_t:
      - "Don't use Ember Orange (#ea580c) for more than one action per view — it loses impact when overused"
      - "Don't apply heavy drop shadows — the system uses whisper-soft 1-6px lifts only"
      - "Don't use Satoshi for body text or UI labels — it's display-only at 40px+"
      - "Don't use filled colored backgrounds for cards — surfaces stay white or light-tinted only"
      - "Don't use 4px radius for primary CTAs or feature cards — 8px and 12px are the system minimums for significant elements"
      - "Don't introduce new chromatic colors — the palette is monochrome + orange + blue accent"
      - "Don't use decorative gradients on product surfaces — the warm gradient is hero-only atmospheric"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f5f5f5` | Page background with warm cream tint — the base layer everything sits on |"
    info: "| 1 | Paper | `#ffffff` | Card surfaces and product UI mockups — pure white containers |"
    info: "| 2 | Elevated | `#ffffff` | Modals, popovers, floating panels with subtle shadow elevation |"

  elevation:

    - "**Primary button:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`"
    - "**Product card / link shortener:** `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`"
    - "**Input focus ring:** `rgba(0, 0, 0, 0.1) 0px 0px 0px 4px`"

  imagery:

    visuals_are_product_first: "the site uses UI mockups and product screenshots rather than lifestyle photography. The hero link-shortener card and the branded-links product mockup are the primary visual elements. Customer logos appear as small monochrome marks in a trust grid. The only decorative gradient is the warm peach-to-white wash behind the hero section — everything else sits on a clean neutral canvas. No stock photography, no illustrations, no 3D renders. Icons are minimal: small leading icons in section badges and inline link/chain icons in the shortener UI."

  layout:

    info: "The page uses a max-width ~1200px centered container with generous outer padding. The hero is centered text over a warm gradient wash that fades to white — full-bleed gradient with a constrained content stack. Below, sections alternate between centered headline + product visual patterns. The trust logo grid is a 2×5 layout with even spacing. The feature sections use a single-column centered heading followed by a wide product mockup card. Navigation is a simple top bar with horizontal links and right-aligned auth buttons. Content density is low — large vertical breathing room between sections (80px+)."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #0a0a0a"
    - "background: #f5f5f5 (canvas) / #ffffff (surfaces)"
    - "border: #e5e5e5"
    - "accent: #ea580c (Ember Orange)"
    - "primary action: no distinct CTA color"
    - "secondary text: #6b7280"

    3_example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "Create a link shortener product card: white surface, 12px radius, shadow 0px 4px 6px -1px rgba(0,0,0,0.1). Contains a row with an input field (white fill, 1px #d4d4d4 border, 8px radius, 10px 14px padding, Inter 14px) and an Ember Orange (#ea580c) action button at 8px radius with white text. Below it, a result row showing a shortened URL in Geist Mono 14px and a click count in a light pill badge."

    - "Create a section with a brand badge: a pill-shaped tag (9999px radius) with #fef9c3 background and #171717 text, Inter weight 500 at 12px, 2px 10px padding, with a small leading icon. Below it, a Satoshi 40px headline in #0a0a0a, centered, followed by a 16px Inter body in #6b7280."

  similar_brands:

    - "**Vercel** — Same monochrome-first aesthetic with hairline borders, near-black primary CTAs, and minimal color usage; shared commitment to a compact 4px grid and utility-focused Inter typography"
    - "**Linear** — Similar product-mockup-as-hero approach, pill-shaped CTAs, and the same 8px/12px radius hierarchy for buttons and cards"
    - "**Cal.com** — Comparable warm gradient hero washes, orange brand accent against neutral canvas, and the same Satoshi-style rounded display headlines for hero copy"
    - "**Raycast** — Shared product screenshot emphasis over lifestyle imagery, clean monochrome UI with single chromatic accent, and Geist Mono for technical data"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-cream: #f5f5f5;
          --color-paper-white: #ffffff;
          --color-ink-black: #0a0a0a;
          --color-charcoal: #171717;
          --color-graphite: #404040;
          --color-steel: #737373;
          --color-ash: #a3a3a3;
          --color-fog: #d4d4d4;
          --color-mist: #e5e5e5;
          --color-slate: #6b7280;
          --color-ember-orange: #ea580c;
          --color-ember-glow: #fb923c;
          --color-ember-deep: #7c2d12;
          --color-signal-blue: #3b82f6;
          --color-terminal-green: #22863a;
          --color-alert-red: #d32f2f;
          --color-warm-sunrise: #f97316;
          --gradient-warm-sunrise: linear-gradient(90deg, rgb(244, 149, 12), rgb(235, 92, 12));
        
          /* Typography — Font Families */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-display: 48px;
          --leading-display: 1.15;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-236: 236px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-pills: 9999px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset;
        
          /* Surfaces */
          --surface-canvas: #f5f5f5;
          --surface-paper: #ffffff;
          --surface-elevated: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-cream: #f5f5f5;
          --color-paper-white: #ffffff;
          --color-ink-black: #0a0a0a;
          --color-charcoal: #171717;
          --color-graphite: #404040;
          --color-steel: #737373;
          --color-ash: #a3a3a3;
          --color-fog: #d4d4d4;
          --color-mist: #e5e5e5;
          --color-slate: #6b7280;
          --color-ember-orange: #ea580c;
          --color-ember-glow: #fb923c;
          --color-ember-deep: #7c2d12;
          --color-signal-blue: #3b82f6;
          --color-terminal-green: #22863a;
          --color-alert-red: #d32f2f;
          --color-warm-sunrise: #f97316;
        
          /* Typography */
          --font-satoshi: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.33;
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.4;
          --text-display: 48px;
          --leading-display: 1.15;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-236: 236px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
          --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
          --shadow-sm-2: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px inset;
          --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 0px 0px 4px;
          --shadow-subtle-3: rgba(0, 0, 0, 0.098) 0px 0px 0px 1px inset;
        }