mobbin___style_reference:
  info: "> Grayscale specimen board — a printer's proof sheet where typographic weight IS color."

  theme: "light"

  info: "Mobbin runs on pure achromatic restraint — zero chroma across the entire palette, forcing hierarchy through weight, size, and tone alone. The page is white space interrupted by near-black ink (#141414) at display sizes and warm-gray (#707070, #adadad) for secondary text. The custom 'saans' typeface is the single differentiator: fractional weights (440, 456, 652) that don't exist in any system font, creating headline mass that sits between regular and semibold — typography doing the work of color. 9999px pill shapes appear on every interactive element while card content sits on 16-24px rounded rectangles, making buttons feel like badges in a sea of contained thumbnails. The content itself — mobile app screenshots in grayscale cards — IS the visual texture of the page."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Midnight Ink | `#141414` | `--color-midnight-ink` | Primary text, headings, filled CTA buttons, nav items, icon strokes — the single chromatic workhorse of an achromatic system |"
    info: "| Pure Canvas | `#ffffff` | `--color-pure-canvas` | Page background, card surfaces, button text on dark fills |"
    info: "| Graphite | `#707070` | `--color-graphite` | Body copy, secondary links, descriptive text |"
    info: "| Ash | `#adadad` | `--color-ash` | Tertiary text, disabled/muted button borders, placeholder icons |"
    info: "| Fog | `#ededed` | `--color-fog` | Dividers, subtle borders, card outlines |"
    info: "| Mist | `#f2f2f2` | `--color-mist` | Nav background tint, input fields, inner surface elevation |"
    info: "| Silver | `#c2c2c2` | `--color-silver` | Skeleton loaders, inactive UI fills |"
    info: "| Slate Shadow | `#e0e0e0` | `--color-slate-shadow` | Inset button shadow ring (rgba(64,64,64,0.16) 0px 0px 0px 1px) |"

  tokens___typography:

    saans___every_text_element_on_the_site__fractional_weights_440__456__652_are_the_signature___they_occupy_visual_mass_between_regular_and_semibold_that_no_variable_axis_font_exposes_as_named_stops__display_headlines_at_80px_56px_run_weight_600_652_at_lineheight_1_00_1_13_with_negative_letter_spacing__0_011em_at_large_sizes__body_runs_14_16px_at_weight_400_with_tracking__0_013_0_017em_for_small_size_legibility_____font_saans:
      - "**Substitute:** Inter Variable or Geist (closest variable-axis fallbacks with comparable optical geometry)"
      - "**Weights:** 400, 440, 456, 600, 652"
      - "**Sizes:** 12px, 14px, 16px, 20px, 32px, 56px, 80px"
      - "**Line height:** 1.00–1.50 (tight 1.00–1.15 at display, looser 1.38–1.50 at body)"
      - "**Letter spacing:** -0.88px at 80px (-0.011em), -0.39px at 56px (-0.007em), +0.21px at 16px (+0.013em), +0.28px at 20px (+0.014em), +0.20px at 12px (+0.017em)"
      - "**OpenType features:** `\"calt\" 0, \"dlig\", \"ss07\"`"
      - "**Role:** Every text element on the site. Fractional weights (440, 456, 652) are the signature — they occupy visual mass between Regular and Semibold that no variable-axis font exposes as named stops. Display headlines at 80px/56px run weight 600–652 at lineHeight 1.00–1.13 with negative letter-spacing (-0.011em at large sizes). Body runs 14–16px at weight 400 with tracking +0.013–0.017em for small-size legibility."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 16 | 0.2px | `--text-caption` |"
      info: "| body-sm | 14px | 20 | — | `--text-body-sm` |"
      info: "| body | 16px | 22 | 0.21px | `--text-body` |"
      info: "| subheading | 20px | 28 | 0.28px | `--text-subheading` |"
      info: "| heading | 32px | 42 | — | `--text-heading` |"
      info: "| heading-lg | 56px | 63 | -0.39px | `--text-heading-lg` |"
      info: "| display | 80px | 80 | -0.88px | `--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: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 104 | 104px | `--spacing-104` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 16-24px |"
      info: "| inputs | 9999px |"
      info: "| modals | 24px |"
      info: "| buttons | 9999px |"
      info: "| thumbnails | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset` | `--shadow-subtle` |"
      info: "| xl | `rgba(0, 0, 0, 0.04) 0px 8px 40px 0px` | `--shadow-xl` |"

    layout:

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

  components:

    primary_filled_button:
      role: "Main CTA — 'Join for free'"

      info: "Background #141414, text #ffffff, radius 9999px, padding 0px 16px (height set by line-height), font saans weight 600 at 14–16px. Inset shadow ring rgba(64,64,64,0.16) 0px 0px 0px 1px on hover state."

    outlined_pill_button:
      role: "Secondary action — 'See our plans'"

      info: "Background transparent, text #141414, border 1px solid #141414, radius 9999px, padding 0px 16px. Sits beside primary CTA as a lighter-weight alternative."

    muted_pill_button:
      role: "Tertiary / inactive filter tabs"

      info: "Background transparent, text #adadad, border 1px solid #adadad, radius 9999px, padding 0px 12px. Used for unselected tab filters like 'Most popular', 'Top rated'."

    inline_underline_link:
      role: "Inline text action with no pill shape"

      info: "Background transparent, text #141414, border-radius 0px, padding 2px on all sides. No background, no border — purely typographic. Used for secondary in-text navigation."

    app_screenshot_card:
      role: "Primary content unit in the gallery grid"

      info: "White background, border 1px solid #ededed, radius 16px, padding 16px. Contains a mobile phone screenshot image (radius 12–16px on the image itself), a 'New' or 'Updated' badge (9999px pill, #141414 fill, white text, 12px font), and app name in saans 14px weight 440 #141414."

    category_navigation_menu:
      role: "Mega-dropdown showing filter categories"

      info: "White background, box-shadow rgba(0,0,0,0.04) 0px 8px 40px 0px, radius 24px, padding 24-32px. Four-column grid layout with category labels in saans 12px weight 400 #adadad uppercase, and category items in saans 16px weight 440 #141414."

    top_navigation_bar:
      role: "Sticky global navigation"

      info: "Background #ffffff or #f2f2f2 tint, padding 0 24px, height 60px. Logo left-aligned, nav links (saans 14px weight 440 #141414) center, 'Join for free' filled pill button right. All nav links are plain text — no underline, no border."

    filter_pill___tab_row:
      role: "Horizontal scrollable filter bar above the gallery"

      row_of_pill_buttons__active: "background #141414 text #ffffff radius 9999px padding 4px 12px. Inactive: background transparent text #141414 border 1px solid #141414 radius 9999px padding 4px 12px. Font saans 14px weight 440. Gap 8px between pills."

    search_input:
      role: "App/screen search bar"

      info: "Background #f2f2f2, border none, radius 9999px, padding 8px 16px, placeholder text saans 14px #adadad, input text saans 14px #141414. Search icon left-inset, 'Text in Screenshot' toggle pill right-inset."

    section_stat_display:
      role: "Hero library size counter"

      info: "Display number at 56–80px saans weight 652, letter-spacing -0.88px, line-height 1.00, color #141414. Label text below at 16–20px weight 440 #707070. Numbers are the visual centerpiece — no decorative elements."

  do_s_and_don_ts:

    do:
      - "Use #141414 as the only 'color' — every UI accent, icon, filled button, and active state is this near-black, never a chromatic hue."
      - "Apply 9999px radius to every interactive pill element: buttons, tags, search inputs, filter chips. Non-interactive content containers use 16–24px radius."
      - "Set display headlines (56–80px) at saans weight 600–652 with letter-spacing -0.007em to -0.011em and lineHeight 1.00–1.13."
      - "Use font-feature-settings: '\"calt\" 0, \"dlig\", \"ss07\"' on all saans text to activate the custom ligature and stylistic set that distinguish it from fallback sans-serifs."
      - "Differentiate card elevation with 1px solid #ededed borders only — never box-shadow on cards. Reserve box-shadow exclusively for floating dropdowns."
      - "Use fractional saans weights: 440 for UI labels/nav, 456 for mid-emphasis body, 652 for hero numerics — never round to 400/500/600 at sizes where the fractional weight is available."
      - "Maintain 80px vertical section rhythm between major content blocks, with 24px internal card padding as the baseline."

    don_t:
      - "Never introduce a chromatic accent color — not blue for links, not green for success states, not any hue. The entire brand palette is achromatic."
      - "Never use box-shadow on cards or gallery thumbnails — borders do that work; shadows on content cards would compete with the screenshot imagery inside them."
      - "Never use font-weight 700 or 800 — the heaviest weight is 652. Heavier weights would break the typographic restraint that defines the system."
      - "Never use radius values other than 9999px (interactive), 24px (large containers), 16px (cards/images), or 8px (inline badges) — arbitrary intermediate values destroy the shape vocabulary."
      - "Never place colored backgrounds behind sections — alternating band layouts should use #ffffff vs #f2f2f2 at most, never tinted or chromatic fills."
      - "Never left-align hero headlines — the centered display type at 80px/56px is the layout anchor; shifting it breaks the symmetry that makes the screenshot grid feel organized."
      - "Never remove letter-spacing from display type — at 80px, the -0.88px tracking is what makes saans feel like a custom typeface rather than a generic web font."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page | `#ffffff` | Root page background |"
    info: "| 1 | Card | `#ffffff` | Gallery cards, testimonial cards — differentiated from page by 1px #ededed border, not background change |"
    info: "| 2 | Input / Chip | `#f2f2f2` | Search bars, nav tint, inner UI fills |"
    info: "| 3 | Overlay Dropdown | `#ffffff` | Category mega-menu, floating panels — elevated via rgba(0,0,0,0.04) 0px 8px 40px shadow |"

  elevation:

    info: "Shadows are nearly absent — the one exception is a very soft ambient lift (rgba(0,0,0,0.04) 0px 8px 40px) on dropdown menus. Card elevation is expressed entirely through 1px #ededed borders against a white page, not shadow. This flat-border approach keeps the visual field clean enough that app screenshot content reads as the highest-contrast element on every surface."

  imagery:

    content_is_the_imagery: "grayscale mobile app screenshots displayed as contained cards in a 3-column grid. Screenshots are cropped to phone frames, placed on white card backgrounds with 16px radius, and rendered in desaturated tones that match the achromatic brand palette — colorful apps appear muted because the surrounding UI demands it. No lifestyle photography, no illustrations, no abstract graphics. Partner/customer logos (Uber, Meta, Airbnb, etc.) appear as flat monochrome SVGs in a trust bar. The Revolut-style app icon in the hero (rounded square, 24px radius, green fill with white symbol) is the only chromatic element on the page — a deliberate specimen of the content being showcased, not a brand choice. Icon style throughout the UI is outlined, thin stroke (~1.5px), monochrome #141414."

  layout:

    info: "Max-width centered (~1280px), white background throughout. Hero is vertically centered text stack — large display headline (80px) over a subtitle paragraph over two pill CTAs side by side, with a featured app icon above the headline as a specimen. Below the hero: full-width trust logo bar with muted gray brand logos. The gallery section introduces a sticky secondary nav (app type tabs, search bar, filter row) above a 3-column card grid with comfortable 16-20px gutters. Testimonials section uses a 4-column masonry-style text card grid on white. Navigation is a floating top bar with logo left, text links center, CTA pill right — switches from transparent to white/f2f2f2 on scroll. Section vertical rhythm is consistently 80px between major blocks. No alternating dark/light bands — the entire page is white with card grids providing visual texture."

  agent_prompt_guide:

    quick_color_reference:
    - "Text (primary): #141414"
    - "Text (secondary): #707070"
    - "Text (tertiary / disabled): #adadad"
    - "Background: #ffffff"
    - "Surface / input fill: #f2f2f2"
    - "Border / divider: #ededed"
    - "CTA button fill: #141414 → white text"
    - "Active tab: #141414 fill → white text; Inactive tab: transparent → #141414 border + text"

    example_component_prompts:

    - "**Hero Section**: White background. App icon specimen (64px rounded square, 24px radius) centered above headline. Headline 'Discover real-world design inspiration.' at 80px saans weight 652, #141414, letter-spacing -0.88px, line-height 1.00, center-aligned. Subtitle at 20px weight 440, #707070, line-height 1.50, center-aligned, max-width 560px. Two pill CTAs side by side: filled (#141414 bg, white text, 9999px radius, 0px 16px padding) and outlined (transparent bg, #141414 border+text, same radius/padding). Vertical gap between elements: 24px."

    - "**Screenshot Gallery Card**: White background, border 1px solid #ededed, radius 16px, padding 16px. Phone screenshot image fills upper portion (radius 12px). Bottom row: app icon (24px circle) + app name saans 14px weight 440 #141414, left-aligned. 'New' badge top-left: #141414 fill, white text, saans 12px weight 600, radius 9999px, padding 2px 8px."

    - "**Global Nav Bar**: Background #ffffff, height 60px, padding 0 32px. Left: Mobbin logotype saans weight 600 14px #141414. Center: 'Pricing', 'Awards', 'Log in' in saans 14px weight 440 #141414, gap 32px. Right: 'Join for free' pill button — #141414 bg, white text, saans 14px weight 600, radius 9999px, padding 0 16px."

    - "**Testimonial Card**: White bg, border 1px solid #ededed, radius 16px, padding 24px. Top row: avatar circle 36px + name saans 14px weight 600 #141414 + company saans 12px weight 400 #707070. Body text saans 14px weight 400 #141414, line-height 1.50. No shadow."

    - "**Filter Pill Row**: Horizontal flex row, gap 8px. Active pill: #141414 bg, #ffffff text, saans 14px weight 440, radius 9999px, padding 4px 12px. Inactive pill: transparent bg, #141414 border 1px + text, same sizing. Muted/disabled variant: #adadad border + text."

  fractional_weight_system:

    info: "Saans exposes five weight stops that map to semantic roles:"
    - "400: long-form body copy, footnotes"
    - "440: UI labels, nav links, card metadata, button text on secondary actions"
    - "456: mid-emphasis body, subheadings, feature descriptions"
    - "600: headlines, section titles, CTA button text"
    - "652: hero display numerics, maximum-emphasis headlines at 56–80px"

    info: "The gap between 440 and 456 is subtle but intentional — 456 is used where 440 reads too light on white at 16–20px, but 600 would feel heavy. Never substitute weight 500 or 700 — no stops exist between 456 and 600 in the intended rendering."

  similar_brands:

    - "**Screenlane** — Same achromatic gallery-of-screenshots model with white backgrounds and card-border-only elevation"
    - "**Dribbble** — Pill-button navigation and 3-column content grid for design inspiration browsing"
    - "**Lookup.design** — Identical concept — no-chroma UI wrapping colorful screenshot content — with similar nav and filter-pill patterns"
    - "**Linear** — Fractional-weight custom typography as the primary brand differentiator in an otherwise near-monochrome system"
    - "**Refero.design** — App screenshot library with the same white/gray achromatic chrome and pill-shaped filter chips above a grid"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-midnight-ink: #141414;
          --color-pure-canvas: #ffffff;
          --color-graphite: #707070;
          --color-ash: #adadad;
          --color-fog: #ededed;
          --color-mist: #f2f2f2;
          --color-silver: #c2c2c2;
          --color-slate-shadow: #e0e0e0;
        
          /* Typography — Font Families */
          --font-saans: 'saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --text-body: 16px;
          --leading-body: 22;
          --tracking-body: 0.21px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: 0.28px;
          --text-heading: 32px;
          --leading-heading: 42;
          --text-heading-lg: 56px;
          --leading-heading-lg: 63;
          --tracking-heading-lg: -0.39px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -0.88px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w440: 440;
          --font-weight-w456: 456;
          --font-weight-semibold: 600;
          --font-weight-w652: 652;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1280px;
          --section-gap: 80px;
          --card-padding: 16-24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 16-24px;
          --radius-inputs: 9999px;
          --radius-modals: 24px;
          --radius-buttons: 9999px;
          --radius-thumbnails: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.04) 0px 8px 40px 0px;
        
          /* Surfaces */
          --surface-page: #ffffff;
          --surface-card: #ffffff;
          --surface-input-chip: #f2f2f2;
          --surface-overlay-dropdown: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-midnight-ink: #141414;
          --color-pure-canvas: #ffffff;
          --color-graphite: #707070;
          --color-ash: #adadad;
          --color-fog: #ededed;
          --color-mist: #f2f2f2;
          --color-silver: #c2c2c2;
          --color-slate-shadow: #e0e0e0;
        
          /* Typography */
          --font-saans: 'saans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 16;
          --tracking-caption: 0.2px;
          --text-body-sm: 14px;
          --leading-body-sm: 20;
          --text-body: 16px;
          --leading-body: 22;
          --tracking-body: 0.21px;
          --text-subheading: 20px;
          --leading-subheading: 28;
          --tracking-subheading: 0.28px;
          --text-heading: 32px;
          --leading-heading: 42;
          --text-heading-lg: 56px;
          --leading-heading-lg: 63;
          --tracking-heading-lg: -0.39px;
          --text-display: 80px;
          --leading-display: 80;
          --tracking-display: -0.88px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-104: 104px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-2xl-2: 20px;
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Shadows */
          --shadow-subtle: rgba(64, 64, 64, 0.16) 0px 0px 0px 1px inset;
          --shadow-xl: rgba(0, 0, 0, 0.04) 0px 8px 40px 0px;
        }