sana_agents___style_reference:
  info: "> Lime spark on editorial white"

  theme: "light"

  info: "Sana's design system is an editorial-grade monochrome canvas with a single electric accent — a Swiss-poster discipline applied to a knowledge work product. The page is overwhelmingly white and typographic, with a massive weight-400 serif headline that gives the brand a literary, almost magazine-cover authority rare in AI tooling. Dark surfaces (#0a1217) and one vivid lime (#cdfe00) appear as deliberate punctuation — full-bleed product cards, sign-up panels, and the occasional action button — never as background washes. Rounded geometry is generous: 24px for cards and inputs, full pills for buttons, which together give the system a soft, tactile quality against the otherwise austere type. Components stay flat and unshaded; depth comes from surface color contrast rather than shadows, creating a visual rhythm of white → frost → ink → lime rather than z-axis elevation."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#0a1217` | `--color-ink-black` | Primary text, dark card surfaces, sign-up panel, filled primary buttons on light backgrounds |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Light supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color |"
    info: "| Frost Wash | `#e4eff7` | `--color-frost-wash` | Soft tinted surface for light product cards and secondary panels — the only chromatic step between paper white and ink black |"
    info: "| Stone Gray | `#85898b` | `--color-stone-gray` | Muted helper text, footer labels, and desaturated secondary copy |"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Hairline borders, nav text, and input outlines where the sharpest contrast edge is required |"
    info: "| Electric Lime | `#cdfe00` | `--color-electric-lime` | Green supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    sana_serif___hero_display_headline_only__a_weight_400_serif_at_72px_is_the_system_s_signature_move__most_ai_brands_shout_with_bold_sans__sana_whispers_with_editorial_type_and_lets_the_scale_carry_authority__the_serif_counterforms_and_bracket_serifs_give_the_wordmark_a_literary__humanist_quality_absent_from_typical_product_ui_____font_sana_serif:
      - "**Substitute:** GT Super, Tiempos Headline, or Source Serif 4 at weight 400"
      - "**Weights:** 400"
      - "**Sizes:** 72px"
      - "**Line height:** 1.10"
      - "**Role:** Hero display headline only. A weight-400 serif at 72px is the system's signature move: most AI brands shout with bold sans, Sana whispers with editorial type and lets the scale carry authority. The serif counterforms and bracket serifs give the wordmark a literary, humanist quality absent from typical product UI."

    sana_sans___all_ui__body__navigation__buttons__and_subheadings__the_450_weight_is_a_distinctive_mid_step_between_regular_and_medium___used_for_button_labels_and_nav_links_instead_of_jumping_to_500__producing_quieter_emphasis__tabular_numerals_tnum_and_lining_figures_lnum_are_always_on__giving_all_numeric_data_a_consistent_grid_____font_sana_sans:
      - "**Substitute:** Söhne, Inter, or Untitled Sans"
      - "**Weights:** 400, 450, 500"
      - "**Sizes:** 13px, 14px, 16px, 20px"
      - "**Line height:** 1.20, 1.40, 1.43, 1.50"
      - "**OpenType features:** `\"lnum\" on, \"tnum\" on`"
      - "**Role:** All UI, body, navigation, buttons, and subheadings. The 450 weight is a distinctive mid-step between regular and medium — used for button labels and nav links instead of jumping to 500, producing quieter emphasis. Tabular numerals (tnum) and lining figures (lnum) are always on, giving all numeric data a consistent grid."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.43 | — | `--text-body` |"
      info: "| heading | 20px | 1.2 | — | `--text-heading` |"
      info: "| display | 72px | 1.1 | — | `--text-display` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 62 | 62px | `--spacing-62` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 24px |"
      info: "| inputs | 24px |"
      info: "| buttons | 9999px |"

    layout:

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

  components:

    hero_headline_sana_serif_display:
      role: "The 72px serif display that opens the page"

      info: "Weight 400 Sana Serif at 72px, line-height 1.10, color #0a1217 on #ffffff canvas. Centered alignment, used exactly once per page in the hero. The massive scale of a weight-400 serif — not bold, not light — is the system's defining typographic statement."

    product_card___dark_sana_agents:
      role: "Full-bleed dark product showcase card"

      info: "Background #0a1217, border-radius 24px, padding 24-32px. Title in Sana Sans 20px weight 500 at #ffffff, subtitle at 16px weight 400 in #85898b. Contains a product screenshot. Houses two pill buttons: a dark-on-dark 'Explore' (but actually the Explore button is a dark pill which is hard to see — likely has a white outline or is actually a different style) and a green 'Book an intro' accent button in #cdfe00."

    product_card___light_sana_learn:
      role: "Full-bleed light product showcase card"

      info: "Background #e4eff7 (Frost Wash), border-radius 24px, padding 24-32px. Title in Sana Sans 20px weight 500 at #0a1217, subtitle at 16px weight 400. Contains a product screenshot on the frost surface. Buttons: 'Explore' in #0a1217 filled pill, 'Book an intro' as ghost/white pill with #0a1217 border."

    pill_button___filled_dark:
      role: "Primary action on light backgrounds"

      info: "Background #0a1217, text #ffffff, Sana Sans 16px weight 450, border-radius 9999px (full pill), padding 10px 18px. Used for 'Explore', 'Sign in', and 'Enter your work email' CTAs on white or frost surfaces."

    pill_button___accent_lime:
      role: "Highlighted action on dark surfaces"

      info: "Background #cdfe00 (Electric Lime), text #0a1217, Sana Sans 16px weight 450, border-radius 9999px, padding 10px 18px. Only ever used on #0a1217 dark surfaces — the contrast against ink black is the point."

    pill_button___ghost_white:
      role: "Secondary action on dark surfaces, or outlined action on light surfaces"

      info: "Background #ffffff with 1px border #ffffff on dark cards; or background transparent with border #0a1217 on light cards. Text matches surface logic: #0a1217 on white, #0a1217 on frost. Border-radius 9999px, padding 10px 18px."

    oauth_button_google:
      role: "Third-party authentication action"

      info: "Full-width pill, background #ffffff, border-radius 9999px, padding 10px 18px. Google 'G' logo on the left, label 'Continue con Google' in Sana Sans 16px weight 450 at #0a1217, centered. Used inside the dark sign-up card."

    sign_up_cta_card:
      role: "Conversion panel for account creation"

      info: "Background #0a1217, border-radius 24px, padding 32-62px. Centered heading 'Try for free with your work email' in Sana Sans weight 500 at #ffffff. Contains OAuth button, 'or' divider in #85898b, email input + submit button stack, and terms text in #85898b at 13px. The 62px padding token appears here for generous internal breathing room."

    email_input:
      role: "Text input for email capture"

      info: "Background #ffffff, border 1px #000000 or #0a1217, border-radius 24px, padding 10px 18px. Placeholder text 'name@work-email.com' in #85898b. Full-width within its container. No focus ring color change observed — the solid border is the visual anchor."

    navigation_bar:
      role: "Top-level site navigation"

      info: "Background #ffffff, horizontal layout with 'Sana' wordmark left, centered nav links (Sana Agents, Sana Learn, Mission, Careers) in Sana Sans 16px weight 400 at #0a1217, and 'Sign in' pill button (#0a1217 filled, #ffffff text) on the far right. No background, no border, no shadow — the nav sits directly on the white canvas."

    product_section_label:
      role: "Small section-introducing label"

      info: "Sana Sans 13px weight 400 at #85898b, left-aligned, sits above the product cards. Extremely quiet — the section label is barely louder than the background."

    footer:
      role: "Site-wide footer with link columns"

      info: "Background #ffffff, padding 32-62px. 'Sana' wordmark on the left, three columns of text links (Sana Agents, Sana Learn, Company) in Sana Sans 14px weight 400 at #0a1217. Column headers at 16px weight 450. Copyright line at 13px in #85898b. No dividers, no background tint — the footer is pure typographic structure."

  do_s_and_don_ts:

    do:
      - "Use Sana Serif exclusively for the 72px hero headline at weight 400 — it is the system's only serif, and diluting it to smaller sizes destroys its editorial authority"
      - "Apply 24px border-radius to all cards, inputs, and panel containers; use 9999px exclusively for pill-shaped buttons and tags"
      - "Restrict #cdfe00 (Electric Lime) to filled action buttons sitting on #0a1217 (Ink Black) surfaces — the lime-on-ink contrast is the entire purpose of the accent"
      - "Use Sana Sans weight 450 for button labels and nav links rather than 500 — the 450 step is what makes the body type feel quiet and considered"
      - "Set font-feature-settings to \"lnum\" on, \"tnum\" on for all Sana Sans usage — tabular numerals ensure numeric data aligns cleanly in tables, prices, and timestamps"
      - "Create depth through surface color shifts (white → frost → ink) rather than box-shadows — the system is flat by design"
      - "Keep the hero headline centered and the rest of the layout left-aligned — centering is reserved for the single editorial moment"

    don_t:
      - "Do not use Sana Serif below 56px — weight 400 at small sizes loses its authority and reads as thin/generic"
      - "Do not place #cdfe00 on #ffffff or #e4eff7 surfaces — the contrast is insufficient and the lime loses its electric quality"
      - "Do not introduce a second accent color — the system is monochromatic with exactly one chromatic note, adding more dilutes the poster-like discipline"
      - "Do not apply drop shadows to cards or panels — depth comes from the white → frost → ink surface stack, not elevation"
      - "Do not use sharp corners (0px radius) on any container — the 24px radius defines the system's soft, tactile personality"
      - "Do not center-align body text, card content, or navigation links — only the hero display headline gets centered treatment"
      - "Do not add gradients, patterns, or background imagery to surfaces — the design language is pure flat color blocks"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Page canvas, default background for all sections and footer |"
    info: "| 1 | Frost Wash | `#e4eff7` | Light product cards and secondary panels — subtle cool tint to separate from the white canvas |"
    info: "| 2 | Ink Black | `#0a1217` | Dark product cards, sign-up CTA panels, and filled button fills — the strongest contrast surface in the system |"
    info: "| 3 | Electric Lime | `#cdfe00` | Accent action surface, used only as filled button on ink-black backgrounds |"

  elevation:

    info: "The system deliberately avoids drop shadows. Depth and hierarchy are created entirely through surface color contrast — white → frost → ink black — rather than z-axis elevation. Components sit flat against their containers, and the 24px border radius is the only softening agent. This produces a poster-like, Swiss-graphic-design quality where every surface edge is a deliberate color boundary, not a diffuse shadow."

  imagery:

    info: "Product photography is the only imagery present: tight device crops showing the Sana Agents mobile app on a hand-held phone (dark card) and the Sana Learn platform on a laptop screen (light card). No lifestyle photography, no abstract illustrations, no decorative graphics. The product screenshot IS the hero within each card — devices are photographed at a slight angle with shallow depth of field, bleeding off the card edges. The imagery treatment is documentary and utilitarian: show the actual product, not a stylized version of it."

  layout:

    info: "The page is a centered, max-width contained layout (approximately 1200px) on a pure white canvas. The hero is a single centered serif headline with no accompanying image — pure typographic. Below the hero, the layout shifts to a two-column product card grid with both cards at equal width and identical height, each containing a device photograph that bleeds past the card's right edge. The sign-up CTA panel is a single contained dark card centered within the page width. The footer is a four-column text grid (wordmark + three link columns) aligned to the same max-width. Navigation is a minimal top bar: wordmark left, centered links, single pill button right. No sidebar, no mega-menu, no sticky elements visible."

  agent_prompt_guide:

    primary_action: "no distinct CTA color"
  quick_color_reference:

    - "text: #0a1217"
    - "background: #ffffff"
    - "dark surface: #0a1217"
    - "light surface / frost: #e4eff7"
    - "border: #000000"
    - "accent / primary action on dark surfaces: #cdfe00 (Electric Lime)"
    - "primary action on light surfaces: #0a1217 (Ink Black filled pill)"

  example_component_prompts:

    1__hero_section: "White #ffffff background. Centered headline 'Superintelligence for work' at 72px Sana Serif weight 400, color #0a1217, line-height 1.10. No accompanying image. Below at 13px Sana Sans weight 400, color #85898b, the label 'Our products', left-aligned."

    2__dark_product_card: "Background #0a1217, border-radius 24px, padding 32px. Title 'Sana Agents' in Sana Sans 20px weight 500 at #ffffff. Subtitle 'AI agents for every team' in Sana Sans 16px weight 400 at #85898b. Two pill buttons: 'Explore' as filled #0a1217 with white border (or surface-elevation style), 'Book an intro' as filled #cdfe00 with #0a1217 text. Both at 9999px radius, 10px 18px padding, Sana Sans 16px weight 450."

    3__light_product_card: "Background #e4eff7, border-radius 24px, padding 32px. Title 'Sana Learn' in Sana Sans 20px weight 500 at #0a1217. Subtitle 'AI-native learning platform' in Sana Sans 16px weight 400. Buttons: 'Explore' as filled #0a1217 pill with #ffffff text, 'Book an intro' as ghost pill with #ffffff background and #0a1217 text."

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

    5__footer: "White #ffffff background, no dividers. 'Sana' wordmark left in Sana Serif or Sans. Three columns of links in Sana Sans 14px weight 400 at #0a1217, column headers at 16px weight 450. Copyright 'Sana Labs © 2026' at 13px in #85898b."

  similar_brands:

    - "**Linear** — Same monochrome-first discipline with a single restrained accent, generous border-radius, pill-shaped buttons, and flat surfaces with no shadows — both systems treat white space as a primary design element"
    - "**Vercel** — Identical typographic confidence: custom geometric sans at compressed sizes, monochrome canvas, generous letter-spacing, and zero decorative chrome — both let type and spacing do the heavy lifting"
    - "**Anthropic** — Same editorial instinct: serif used for brand-defining moments, sans for utility, white canvas with deliberate dark-surface panels, and a warm-accent restraint that reads as considered rather than corporate"
    - "**Stripe** — Same poster-design heritage: massive editorial type, two-color surface contrast (white + near-black), and the absence of shadows or gradients in favor of flat geometric panels with generous radius"
    - "**Notion** — Same soft-tactile feel through generous border-radius on cards and inputs, but Sana pushes further into monochrome and editorial type where Notion stays neutral and utilitarian"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #0a1217;
          --color-paper-white: #ffffff;
          --color-frost-wash: #e4eff7;
          --color-stone-gray: #85898b;
          --color-obsidian: #000000;
          --color-electric-lime: #cdfe00;
        
          /* Typography — Font Families */
          --font-sana-serif: 'Sana Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-sana-sans: 'Sana Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.43;
          --text-heading: 20px;
          --leading-heading: 1.2;
          --text-display: 72px;
          --leading-display: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w450: 450;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-32: 32px;
          --spacing-62: 62px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24-32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-3xl: 24px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-cards: 24px;
          --radius-inputs: 24px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-frost-wash: #e4eff7;
          --surface-ink-black: #0a1217;
          --surface-electric-lime: #cdfe00;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #0a1217;
          --color-paper-white: #ffffff;
          --color-frost-wash: #e4eff7;
          --color-stone-gray: #85898b;
          --color-obsidian: #000000;
          --color-electric-lime: #cdfe00;
        
          /* Typography */
          --font-sana-serif: 'Sana Serif', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          --font-sana-sans: 'Sana Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.43;
          --text-heading: 20px;
          --leading-heading: 1.2;
          --text-display: 72px;
          --leading-display: 1.1;
        
          /* Spacing */
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-25: 25px;
          --spacing-32: 32px;
          --spacing-62: 62px;
        
          /* Border Radius */
          --radius-3xl: 24px;
          --radius-full: 9999px;
        }