upstash___style_reference:
  info: "> Emerald terminals in a sunlit workshop — bright white surfaces with one deep green accent that makes every action feel switched on."

  theme: "light"

  info: "Upstash presents a developer-first data platform with a bright, airy workshop aesthetic: white canvas, hairline borders, and a single emerald green accent that does the work of a dozen colors. The brand uses deep forest green (#022c22) for all text — not black — which gives every screen a subtle organic warmth while keeping the identity unmistakably technical. Headlines are massive (up to 180px) and use a compressed custom display cut of Inter Tight with tight tracking, creating a sense of confident engineering scale. Components are deliberately lightweight: pill-shaped controls dominate, borders are 1px and barely visible, shadows are reduced to a whisper (0 1px 2px at 5% opacity). The result is a surface that recedes so code, logos, and product chrome can do the talking."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Forest Ink | `#022c22` | `--color-forest-ink` | All text, headings, and icon strokes — deep desaturated green replaces black throughout the entire interface, giving the system its organic technical warmth |"
    info: "| Emerald Pulse | `linear-gradient(to right, #007a55, #00bc7d, #f59e0b)` | `--color-emerald-pulse` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color; Hero headline gradient flowing from forest green through emerald to amber — makes the display wordmark feel alive |"
    info: "| Pine | `#007a55` | `--color-pine` | Secondary brand green for darker button states, link text, and icon outlines when a heavier weight than Forest Ink is needed |"
    info: "| Mint Glow | `#34d399` | `--color-mint-glow` | Light accent green for secondary icons, decorative highlights, and hover state washes |"
    info: "| Jade Wash | `#10b981` | `--color-jade-wash` | Mid-green for outlined button borders, checkbox accents, and form focus rings |"
    info: "| Spearmint | `#6ee7b7` | `--color-spearmint` | Lightest green for link hover states and subtle decorative washes |"
    info: "| Signal Red | `#dc2626` | `--color-signal-red` | Red supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color |"
    info: "| Lilac Whisper | `#e9d5ff` | `--color-lilac-whisper` | Soft violet accent for the QStash product icon and category tags that need chromatic separation from the green family |"
    info: "| Snow | `#ffffff` | `--color-snow` | Page canvas, card surfaces, and inverse text on dark code blocks |"
    info: "| Paper | `#f5f5f5` | `--color-paper` | Subtle alternating section backgrounds and disabled control fills |"
    info: "| Pale Sage | `#c9dbd6` | `--color-pale-sage` | Soft green-tinted surface for hero background washes and the gradient tail stop on decorative backgrounds |"
    info: "| Mint Mist | `#d2f2e7` | `--color-mint-mist` | Lightest green-tinted background for announcement bars, tag pills, and the hero's left-edge gradient wash |"
    info: "| Hairline | `#e5e7eb` | `--color-hairline` | Universal 1px border color for cards, inputs, dividers, and table rules — the most used color in the system |"
    info: "| Graphite | `#71717a` | `--color-graphite` | Muted secondary text, nav items, placeholder text, and subdued icon strokes |"
    info: "| Carbon | `#3d3d3f` | `--color-carbon` | Darkest neutral for code block backgrounds and high-contrast borders where #000 feels too harsh |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Code block background only — the single hard-black surface in the system |"

  tokens___typography:

    inter___body_text__nav_links__buttons__labels__and_small_ui_chrome___the_workhorse_sans_for_everything_below_the_heading_level____font_inter:
      - "**Substitute:** system-ui, -apple-system, sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 12px, 13px, 14px, 16px, 20px, 24px, 48px"
      - "**Line height:** 1.40"
      - "**Role:** Body text, nav links, buttons, labels, and small UI chrome — the workhorse sans for everything below the heading level"

    inter_tight___display_and_heading_face___the_compressed_cuts_with_negative_tracking_give_headlines_an_engineered__dense_quality__the_128px_and_180px_sizes_create_the_signature__loud_whisper__hero_moments_where_weight_600_700_meets_extreme_size_with_restraint____font_inter_tight:
      - "**Substitute:** Inter, system-ui, sans-serif"
      - "**Weights:** 500, 600, 700"
      - "**Sizes:** 22px, 24px, 30px, 48px, 128px, 180px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** -0.025em"
      - "**Role:** Display and heading face — the compressed cuts with negative tracking give headlines an engineered, dense quality; the 128px and 180px sizes create the signature 'loud whisper' hero moments where weight 600-700 meets extreme size with restraint"

    ui_monospace___code_blocks_and_inline_code___the_slightly_negative_tracking_tightens_monospace_characters_for_a_cleaner__less_typewriter_like_read____font_ui_monospace:
      - "**Substitute:** JetBrains Mono, Fira Code, monospace"
      - "**Weights:** 400"
      - "**Sizes:** 14px"
      - "**Line height:** 1.50"
      - "**Letter spacing:** -0.073em"
      - "**Role:** Code blocks and inline code — the slightly negative tracking tightens monospace characters for a cleaner, less typewriter-like read"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.4 | — | `--text-caption` |"
      info: "| body | 14px | 1.5 | — | `--text-body` |"
      info: "| heading-sm | 20px | 1.4 | -0.5px | `--text-heading-sm` |"
      info: "| heading | 30px | 1.25 | -0.75px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.2 | -1.2px | `--text-heading-lg` |"
      info: "| display | 128px | 1 | -3.2px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 216 | 216px | `--spacing-216` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tabs | 12px |"
      info: "| cards | 16px |"
      info: "| pills | 9999px |"
      info: "| buttons | 9999px |"
      info: "| codeBlocks | 12px |"
      info: "| smallChips | 6px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-subtle` |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 32px"
      - "**Element gap:** 8px"

  components:

    primary_pill_button:
      role: "Main call-to-action"

      info: "Fully rounded (9999px radius) button, Emerald Pulse (#00bc7d) background, white text, Inter 14px weight 500, 10px 20px padding, optional trailing arrow icon. The single filled action in the system."

    ghost_outline_button:
      role: "Secondary navigation action"

      info: "Fully rounded (9999px), transparent background, 1px Jade Wash (#10b981) or Emerald Pulse border, Emerald Pulse text, 14px Inter weight 500. Used for 'Login' in the nav."

    navigation_bar:
      role: "Top-level site navigation"

      info: "White (#ffffff) background, 1px Hairline (#e5e7eb) bottom border, 64px height, 1200px max-width container. Logo on left (pill-shaped emerald mark + wordmark), nav links centered in Graphite (#71717a), Login button right-aligned. No shadow, no sticky offset on landing."

    product_tab_card:
      role: "Category selector for product suite"

      info: "White background, 1px Hairline border, 16px radius, 20px 24px padding. Contains a colored icon tile (16px) and product name in Forest Ink. Active state shows darker background and Pine text."

    code_example_block:
      role: "Syntax-highlighted code display"

      info: "Obsidian (#000000) background, Carbon (#3d3d3f) left sidebar, 12px radius, ui-monospace 14px text with -0.073em letter-spacing. Sidebar shows example categories (Caching, Session Management) as left-aligned tabs with active item highlighted. Tab bar at top shows language toggles (TypeScript/Python)."

    feature_check_list:
      role: "Bullet-point feature enumeration"

      vertical_stack__8px_row_gap__each_item: "16px Jade Wash (#10b981) check icon, Forest Ink 14px text. No card background — sits directly on canvas or Paper surface."

    customer_logo_pill:
      role: "Social proof logo display"

      info: "White background, 1px Hairline border, 9999px radius, 12px 20px padding. Contains brand logo (max-height 20px) centered. Arranged in 2-3 rows with 12px gap."

    testimonial_card:
      role: "Customer quote showcase"

      info: "White background, 1px Hairline border, 16px radius, 48px padding. Centered layout: company logo (32px) at top, quote text in Forest Ink 16px below, attribution and pagination dots at bottom. Dots are 6px circles, active dot is Emerald Pulse."

    announcement_bar:
      role: "Top-of-page policy update notice"

      info: "Black background, white 13px text, centered, 40px height. Close button (×) on the right in white."

    logo_wordmark:
      role: "Brand identity mark"

      info: "Emerald Pulse circular pin/spiral icon (24px) + 'upstash' wordmark in Forest Ink Inter 600. Icon is a stylized spiral/arrow suggesting motion and data flow."

    documentation_link_button:
      role: "Secondary action with icon"

      info: "Ghost style, white background, 1px Hairline border, 12px radius (not pill), 10px 16px padding. Forest Ink 14px text, small document icon left, external link icon right."

    hero_display_heading:
      role: "Primary page headline"

      info: "Inter Tight weight 600, 128px or 180px, line-height 1.00, letter-spacing -0.025em. Fill is the Sunset Gradient (#007a55 → #00bc7d → #f59e0b). Text is centered, wraps to 2 lines. This is the visual signature of the brand."

  do_s_and_don_ts:

    do:
      - "Use #022c22 Forest Ink for ALL body and heading text — never default to black or #333"
      - "Apply the 9999px pill radius to every button, nav link, and logo chip — pills are the system's defining shape"
      - "Set display headings at 128px+ with Inter Tight weight 600 and the Sunset Gradient fill"
      - "Separate surfaces with 1px #e5e7eb hairline borders, not shadows or background tints"
      - "Use #00bc7d Emerald Pulse as the single filled button color — no other green should ever be a button background"
      - "Space sections 64-96px apart vertically to let the large display type breathe"
      - "Use ui-monospace 14px with -0.073em letter-spacing for all code blocks"

    don_t:
      - "Don't use #000000 for text — always use Forest Ink #022c22 to maintain the organic green-warmth"
      - "Don't add drop shadows to cards, modals, or navigation — the system is intentionally flat"
      - "Don't use square or moderately rounded corners (8px) for buttons — pills are mandatory for actions"
      - "Don't apply the Sunset Gradient to anything smaller than 48px — the gradient only works at display scale"
      - "Don't introduce additional accent colors — the system is monochrome green with one red reservation for Redis"
      - "Don't use Inter for display headings — Inter Tight is required for the compressed, tracked-tight quality"
      - "Don't use background color tints to separate sections — alternate between white and #f5f5f5 only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Primary page background |"
    info: "| 1 | Paper | `#f5f5f5` | Alternating section bands and subtle background variation |"
    info: "| 2 | Card | `#ffffff` | Elevated card surfaces sitting on canvas, separated by hairline borders |"
    info: "| 3 | Code Surface | `#000000` | Dark code example blocks — the only black surface |"

  elevation:

    - "**Buttons, links, small interactive elements:** `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`"

  imagery:

    info: "Photography-free, icon-driven visual language. The only imagery is product chrome: colored SVG icons for products (red Redis hash, orange Vector, purple QStash, violet Workflow, green Box) and customer company logos. Abstract graphics include a subtle wireframe globe/mesh in the 'Fast Anywhere' section. No stock photography, no human faces, no decorative illustrations. The visual weight comes entirely from typography, gradients, and product UI screenshots."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #022c22 (Forest Ink)"
    - "background: #ffffff (Snow canvas)"
    - "border: #e5e7eb (Hairline)"
    - "accent: #00bc7d (Emerald Pulse)"
    - "muted text: #71717a (Graphite)"
    - "primary action: no distinct CTA color"

    3_5_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 product tab strip:* Horizontal row of 5 tabs, each white background with 1px #e5e7eb border, 16px radius, 12px 20px padding. Tab content: 16px colored icon + product name in #022c22 Inter 14px weight 500. First tab has #f5f5f5 background and #007a55 text for active state. 8px gap between tabs."

    - "*Create a code example block:* 12px radius, #000000 background, Carbon #3d3d3f left sidebar (80px wide). Sidebar shows category items as 12px 16px padded rows, Inter 13px #e5e7eb text, active item with #1f1f1f background. Main area: ui-monospace 14px with -1px letter-spacing, syntax-highlighted code in #00bc7d (keywords), #e9d5ff (strings), #ffffff (default)."

    - "*Create a customer logo grid:* 3 columns, 2 rows, 12px gap. Each cell: white background, 1px #e5e7eb border, 9999px radius, 16px 32px padding, centered logo (grayscale or original colors, max-height 20px)."

    - "*Create a testimonial card:* White background, 1px #e5e7eb border, 16px radius, 48px padding, centered. Company logo at top (32px height, #022c22). Quote text: #022c22 Inter 16px weight 400, max-width 640px, centered. Pagination dots below: 6px circles, 8px gap, active dot #00bc7d, inactive dots #e5e7eb."

  similar_brands:

    - "**Vercel** — Same clean white-canvas aesthetic with pill-shaped buttons and monochrome palette punctuated by a single brand accent"
    - "**Linear** — Identical approach to display headings — massive compressed sans-serif with tight tracking, minimal shadows, hairline borders as the only separator"
    - "**Supabase** — Same developer-tools visual language with a single green brand color, dark code blocks, and product-icon-driven navigation"
    - "**Railway** — Same workshop-bright aesthetic with pill controls, generous spacing, and the convention of one chromatic accent against a white canvas"
    - "**PlanetScale** — Both use deep desaturated brand colors for text instead of black, creating the same organic-technical warmth with a single vibrant accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-forest-ink: #022c22;
          --color-emerald-pulse: #00bc7d;
          --gradient-emerald-pulse: linear-gradient(to right, #007a55, #00bc7d, #f59e0b);
          --color-pine: #007a55;
          --color-mint-glow: #34d399;
          --color-jade-wash: #10b981;
          --color-spearmint: #6ee7b7;
          --color-signal-red: #dc2626;
          --color-lilac-whisper: #e9d5ff;
          --color-snow: #ffffff;
          --color-paper: #f5f5f5;
          --color-pale-sage: #c9dbd6;
          --color-mint-mist: #d2f2e7;
          --color-hairline: #e5e7eb;
          --color-graphite: #71717a;
          --color-carbon: #3d3d3f;
          --color-obsidian: #000000;
        
          /* Typography — Font Families */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.5px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.75px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.2px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -3.2px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-216: 216px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 32px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 35.2px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tabs: 12px;
          --radius-cards: 16px;
          --radius-pills: 9999px;
          --radius-buttons: 9999px;
          --radius-codeblocks: 12px;
          --radius-smallchips: 6px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-paper: #f5f5f5;
          --surface-card: #ffffff;
          --surface-code-surface: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-forest-ink: #022c22;
          --color-emerald-pulse: #00bc7d;
          --color-pine: #007a55;
          --color-mint-glow: #34d399;
          --color-jade-wash: #10b981;
          --color-spearmint: #6ee7b7;
          --color-signal-red: #dc2626;
          --color-lilac-whisper: #e9d5ff;
          --color-snow: #ffffff;
          --color-paper: #f5f5f5;
          --color-pale-sage: #c9dbd6;
          --color-mint-mist: #d2f2e7;
          --color-hairline: #e5e7eb;
          --color-graphite: #71717a;
          --color-carbon: #3d3d3f;
          --color-obsidian: #000000;
        
          /* Typography */
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-tight: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-ui-monospace: 'ui-monospace', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.4;
          --text-body: 14px;
          --leading-body: 1.5;
          --text-heading-sm: 20px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: -0.5px;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --tracking-heading: -0.75px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.2;
          --tracking-heading-lg: -1.2px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -3.2px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-216: 216px;
        
          /* Border Radius */
          --radius-md: 6px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 35.2px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
        }