tana___style_reference:
  info: "> Midnight gallery, single lime beacon — a dark editorial spread where one pale-green button is the only color on the entire page."

  theme: "dark"

  tana_is_a_midnight_editorial: "pure black canvas, one pale-lime signal, nothing else. The entire interface is monochrome — warm off-white type, a quiet scale of grays for hairlines and secondary text — with a single chromatic accent (#e1f0bd) reserved exclusively for the primary action. Headlines come from a custom high-contrast serif (tanaClassic) set tight at negative tracking, which creates a magazine-spread authority against the void. Category labels are pentagon-shaped tags (pointed left edge, flat right) that orbit around imagery like marginalia, turning product features into a printed index. Layout is centered and generous, with editorial photography used sparingly as a single warm focal point in an otherwise typographic page. Everything else is restraint."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Void | `#000000` | `--color-void` | Page canvas, section backgrounds, card surfaces — pure black, not near-black, makes the off-white type and the lime accent feel luminous |"
    info: "| Charcoal | `#0e0e0e` | `--color-charcoal` | Elevated surface layer, subtle borders, secondary backgrounds — one step off the void for depth without breaking the dark mode |"
    info: "| Bone | `#f0eded` | `--color-bone` | Primary text, pentagon tag fills, announcement bar background — slightly warm off-white, softer than pure white against deep black |"
    info: "| Ash | `#b3b3b3` | `--color-ash` | Secondary body text, muted helper copy, list dividers — the dominant mid-gray for all non-primary prose |"
    info: "| Smoke | `#808080` | `--color-smoke` | Tertiary text, subtle metadata, low-priority borders |"
    info: "| Graphite | `#606060` | `--color-graphite` | Faintest visible borders, disabled text — the lower edge of the readable gray scale |"
    info: "| Lime Signal | `#e1f0bd` | `--color-lime-signal` | Primary CTA fill only — a muted pale lime used exclusively for the early-access button, never for links, icons, or decoration. The one chromatic moment on the entire page |"

  tokens___typography:

    sf_pro___body__ui__subheadings__and_button_text__weight_300_is_used_for_mid_size_headings_24_29px___an_anti_convention_choice_that_makes_subheadings_recede_rather_than_compete_with_the_serif_display__weight_400_for_body__buttons__and_dense_text_at_1_50_1_75_line_height_for_breathing_room____font_sf_pro:
      - "**Substitute:** Inter, -apple-system, system-ui"
      - "**Weights:** 300, 400"
      - "**Sizes:** 13px, 15px, 16px, 17px, 18px, 19px, 20px, 21px, 24px, 26px, 29px"
      - "**Line height:** 1.20, 1.40, 1.50, 1.75"
      - "**Letter spacing:** 0.01em across all sizes"
      - "**Role:** Body, UI, subheadings, and button text. Weight 300 is used for mid-size headings (24–29px) — an anti-convention choice that makes subheadings recede rather than compete with the serif display. Weight 400 for body, buttons, and dense text at 1.50–1.75 line-height for breathing room"

    tanaclassic___display_and_heading_serif__high_contrast__editorial__used_at_84px_for_hero_headlines_and_38_48px_for_section_headings__negative_tracking__0_045em_at_display___0_030em_at_mid_headings_tightens_the_serif_into_a_dense_magazine_block__the_weight_350_400_range_is_lighter_than_typical_headline_serifs__giving_the_type_a_whisper_of_authority_rather_than_shouting____font_tanaclassic:
      - "**Substitute:** Playfair Display, Cormorant Garamond, or DM Serif Display"
      - "**Weights:** 350, 400"
      - "**Sizes:** 17px, 19px, 38px, 42px, 48px, 84px"
      - "**Line height:** 1.10, 1.20, 1.25, 1.75"
      - "**Letter spacing:** -0.045em at 84px (≈ -3.78px), -0.030em at 38–48px (≈ -1.14 to -1.44px)"
      - "**Role:** Display and heading serif. High-contrast, editorial, used at 84px for hero headlines and 38–48px for section headings. Negative tracking (-0.045em at display, -0.030em at mid-headings) tightens the serif into a dense magazine block. The weight 350–400 range is lighter than typical headline serifs, giving the type a whisper of authority rather than shouting"

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 17px"
      - "**Line height:** 1.2"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.2 | 0.13px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | 0.16px | `--text-body-sm` |"
      info: "| body | 18px | 1.5 | 0.18px | `--text-body` |"
      info: "| body-lg | 21px | 1.75 | 0.21px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.2 | 0.24px | `--text-subheading` |"
      info: "| heading-sm | 29px | 1.4 | 0.29px | `--text-heading-sm` |"
      info: "| heading | 38px | 1.2 | -1.14px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.25 | -1.44px | `--text-heading-lg` |"
      info: "| display | 84px | 1.1 | -3.78px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      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: "| 96 | 96px | `--spacing-96` |"
      info: "| 112 | 112px | `--spacing-112` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 0px (pentagon clip-path, no radius) |"
      info: "| cards | 0px |"
      info: "| images | 10px |"
      info: "| buttons | 10px |"

    layout:

      - "**Page max-width:** 1040px"
      - "**Section gap:** 32-40px"
      - "**Card padding:** 16-24px"
      - "**Element gap:** 6-8px"

  components:

    pentagon_category_tag:
      role: "Feature/output label orbiting around hero imagery"

      info: "Pentagon-shaped tag with a pointed left edge (CSS clip-path polygon), flat right edge. Fill: #f0eded (Bone). Text: #000000, 13–15px SF Pro 400, 0.01em tracking. No border, no radius, no padding beyond ~8px vertical × 12px horizontal on the flat side. These tags float in the layout like printed marginalia pointing at the central image. Used for labels like 'Prototypes', 'Storyboards', 'Slide decks', 'PRs', 'Filed Bugs'."

    lime_cta_button:
      role: "Primary action — the only colored button in the system"

      filled_pill_button__background: "#e1f0bd (Lime Signal). Text: #000000, 15px SF Pro 400, 0.01em tracking. No border, no shadow. Border-radius: 10px. Padding: 6px vertical × 12px horizontal. Reserved exclusively for the single most important action per page. The muted lime against pure black creates urgency without aggression — it glows rather than shouts."

    ghost_text_link:
      role: "Secondary action or contextual link below a CTA"

      no_background__no_border__text: "#b3b3b3 (Ash) or #808080 (Smoke), 13–15px SF Pro 400. Hover brightens to #f0eded. No underline by default. Used for 'Ask your agents about it' and similar micro-CTA patterns."

    announcement_bar:
      role: "Site-wide notice at the very top of the page"

      info: "Full-width strip with #f0eded (Bone) background and #000000 text. Single line of body text with an inline link. No padding excess — tight 6–8px vertical. Sits above the main nav, visually distinct from the dark page below."

    navigation_header:
      role: "Minimal top nav on a dark page"

      info: "Transparent over the #000000 canvas. Left: wordmark 'tana' in #f0eded, small SF Pro. Right: minimal icon (appears to be a T-shaped or tree icon in #f0eded). No nav links, no hamburger — extreme minimalism."

    hero_headline_block:
      role: "Centered display title with subhead and CTA stack"

      info: "Vertically centered in the upper viewport. Display title: 84px tanaClassic 400, #f0eded, -3.78px tracking. Subhead: 18–21px SF Pro 400, #b3b3b3, 1.50–1.75 line-height. CTA stack below: Lime CTA Button + Ghost Text Link, 8px gap. Generous vertical space — the hero breathes."

    editorial_image_with_orbiting_tags:
      role: "Feature showcase with category labels around a photo"

      info: "Centered photographic image (~300–350px wide, 10px border-radius) with Pentagon Category Tags scattered in the surrounding dark space. The image introduces a warm, human focal point into the void. Tags point leftward toward the image, creating a sense of annotations or printed captions."

    section_heading:
      role: "Mid-page section title"

      info: "38–48px tanaClassic 400, #f0eded, -1.14 to -1.44px tracking. Left-aligned or centered. Followed by body text at 18–21px SF Pro 400, #b3b3b3. 24–32px gap between heading and body."

    ai_testimonial_block:
      role: "Quote from an AI model presented as editorial pull-quote"

      centered_block_on_000000__quote_text: "18–21px tanaClassic or SF Pro 400, #f0eded, italic, 1.50–1.75 line-height. Attribution: 13–15px SF Pro 400, #808080, right-aligned or centered below quote. Wide margin between consecutive quotes (32–40px). No quotation marks — the formatting and attribution carry the quote structure."

    body_prose_block:
      role: "Long-form explanatory text"

      info: "17–19px SF Pro 400, #b3b3b3, 1.75 line-height. Max-width ~640px for readable line length. Paragraph spacing: 16–24px. No bold, no links, no images — pure typographic content."

    utility_icon_button:
      role: "Small icon-only interactive in the nav or toolbar"

      no_background__no_border__icon: "#f0eded, 16–20px. 8px padding click target. Used for the nav-right T-shaped icon and similar minimal controls."

  do_s_and_don_ts:

    do:
      - "Use #e1f0bd (Lime Signal) only for the single most important action per screen — never for links, icons, tags, or decoration"
      - "Set hero headlines at 84px tanaClassic 400 with -3.78px letter-spacing — the negative tracking is what makes the serif feel editorial rather than default"
      - "Use weight 300 SF Pro for subheadings (24–29px) to let them recede behind the serif display — the hierarchy is serif > light-sans > regular-sans"
      - "Orbit Pentagon Category Tags around imagery with 15px margins, pointing their pointed edge leftward toward the visual they describe"
      - "Set body text line-height to 1.75 for prose and 1.50 for UI — the generous leading compensates for the dark background"
      - "Keep the entire page at 0% colorfulness outside the one lime CTA — resist adding accent colors, gradients, or colored illustrations"
      - "Use 10px border-radius for buttons and images only — tags, cards, and sections stay sharp (0px) to maintain the editorial precision"

    don_t:
      - "Never use a second accent color — the system's identity depends on lime being the only chromatic note"
      - "Never use box-shadows, glows, or blur effects — depth comes from surface tone shifts, not elevation effects"
      - "Never set serif headlines at normal or positive letter-spacing — the negative tracking is signature-defining"
      - "Never use weight 500+ for SF Pro subheadings — the light weight (300) is what makes the serif the dominant voice"
      - "Never apply the lime accent to backgrounds other than the primary CTA button — no lime cards, tags, borders, or highlights"
      - "Never use pure white #ffffff for text — use #f0eded (Bone) for warmth against the black canvas"
      - "Never use generic border-radius values like 4px or 8px — the system commits to 10px for buttons/images and 0px for everything else"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Void | `#000000` | Page canvas, all section backgrounds |"
    info: "| 2 | Charcoal | `#0e0e0` | Elevated cards, subtle surface lift |"
    info: "| 3 | Bone | `#f0eded` | Pentagon tag fills, announcement bar — the only light surface in the system |"
    info: "| 4 | Lime Signal | `#e1f0bd` | CTA button — the single colored surface |"

  elevation:

    - "**Pentagon tag:** `none — flat fill, no shadow`"
    - "**CTA button:** `none — flat lime fill, no shadow or border`"
    - "**Page cards and sections:** `none — pure black surfaces, depth comes from surface tone shifts, not shadows`"

  imagery:

    info: "Extremely sparse. The page uses a single editorial photograph — a man working at a table with warm lamp light and plants — as the only visual element. The image is contained (~350px wide), has 10px border-radius, and is surrounded by Pentagon Category Tags that orbit it like printed annotations. No illustrations, no abstract graphics, no product screenshots, no icon systems beyond a single small nav icon. The void of the black canvas is itself the dominant visual — the photograph and its tags are the single moment of warmth and complexity in an otherwise typographic page."

  layout:

    info: "Centered single-column layout, max-width ~1040px. The page is organized as a vertical sequence of centered blocks separated by generous whitespace (40–80px gaps). The hero occupies the full viewport height with the headline, subhead, and CTA stacked vertically and center-aligned. Below the hero, a section pairs a centered photograph with floating Pentagon Tags in the surrounding space — an editorial spread, not a grid. Subsequent sections are centered text blocks: section heading + body prose, followed by a series of AI testimonial quotes stacked vertically with wide margins. Navigation is minimal: a small wordmark top-left and a single icon top-right, floating on the black canvas. The entire page reads top-to-bottom as a single column — no multi-column layouts, no sidebar, no grid systems. Density is comfortable, almost sparse — whitespace is a primary design element."

  agent_prompt_guide:

    quick_color_reference:
    - "Canvas: #000000 (Void)"
    - "Elevated surface: #0e0e0e (Charcoal)"
    - "Primary text: #f0eded (Bone)"
    - "Secondary text: #b3b3b3 (Ash)"
    - "Muted text: #808080 (Smoke)"
    - "primary action: #e1f0bd (filled action)"

    example_component_prompts:

    - "**Lime CTA Button**: Create a filled pill button. Background: #e1f0bd. Text: 'Get early access' in #000000, 15px SF Pro weight 400, letter-spacing 0.01em. Border-radius: 10px. Padding: 6px vertical, 12px horizontal. No border, no shadow."

    - "**Pentagon Category Tag**: Create a left-pointing pentagon label. Shape via clip-path: polygon(0 50%, 12px 0, 100% 0, 100% 100%, 12px 100%). Fill: #f0eded. Text: 'Prototypes' in #000000, 13px SF Pro weight 400, letter-spacing 0.01em. Padding: 8px 12px 8px 16px. No border, no radius."

    - "Create a Primary Action Button: #e1f0bd background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "**Section Heading + Body**: Create a left-aligned text block. Heading: '30,000 hrs in meetings' at 48px tanaClassic weight 400, #f0eded, letter-spacing -1.44px. Body below: 19px SF Pro weight 400, #b3b3b3, line-height 1.75, max-width 640px. 32px gap between heading and body."

    - "**AI Testimonial Block**: Create a centered quote block on #000000. Quote text: 19px tanaClassic weight 400, #f0eded, italic, line-height 1.75, max-width 600px. Attribution below: 13px SF Pro weight 400, #808080, centered. 40px vertical space between consecutive quotes."

  similar_brands:

    - "**Linear** — Same dark-mode editorial sensibility with restrained color palettes and tight typographic hierarchy, though Linear uses purple accents where Tana uses lime"
    - "**Notion AI** — Both position AI as ambient intelligence with minimal interfaces, but Tana commits harder to pure black + single accent whereas Notion uses lighter surfaces"
    - "**Arc Browser** — Shared editorial typographic confidence — large display headlines, generous whitespace, and the willingness to let one image or one accent color carry the entire page"
    - "**Pitch** — Both use high-contrast serif headlines over dark canvases with single-color accent systems, treating landing pages as editorial spreads rather than SaaS templates"
    - "**Vercel** — Dark canvas, monochrome UI, and a single accent color for CTAs — though Vercel uses geometric sans display type where Tana uses a custom editorial serif"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-void: #000000;
          --color-charcoal: #0e0e0e;
          --color-bone: #f0eded;
          --color-ash: #b3b3b3;
          --color-smoke: #808080;
          --color-graphite: #606060;
          --color-lime-signal: #e1f0bd;
        
          /* Typography — Font Families */
          --font-sf-pro: 'SF Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tanaclassic: 'tanaClassic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.13px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.16px;
          --text-body: 18px;
          --leading-body: 1.5;
          --tracking-body: 0.18px;
          --text-body-lg: 21px;
          --leading-body-lg: 1.75;
          --tracking-body-lg: 0.21px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.24px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.29px;
          --text-heading: 38px;
          --leading-heading: 1.2;
          --tracking-heading: -1.14px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -1.44px;
          --text-display: 84px;
          --leading-display: 1.1;
          --tracking-display: -3.78px;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-w350: 350;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1040px;
          --section-gap: 32-40px;
          --card-padding: 16-24px;
          --element-gap: 6-8px;
        
          /* Border Radius */
          --radius-lg: 10px;
        
          /* Named Radii */
          --radius-tags: 0px (pentagon clip-path, no radius);
          --radius-cards: 0px;
          --radius-images: 10px;
          --radius-buttons: 10px;
        
          /* Surfaces */
          --surface-void: #000000;
          --surface-charcoal: #0e0e0;
          --surface-bone: #f0eded;
          --surface-lime-signal: #e1f0bd;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-void: #000000;
          --color-charcoal: #0e0e0e;
          --color-bone: #f0eded;
          --color-ash: #b3b3b3;
          --color-smoke: #808080;
          --color-graphite: #606060;
          --color-lime-signal: #e1f0bd;
        
          /* Typography */
          --font-sf-pro: 'SF Pro', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-tanaclassic: 'tanaClassic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.2;
          --tracking-caption: 0.13px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: 0.16px;
          --text-body: 18px;
          --leading-body: 1.5;
          --tracking-body: 0.18px;
          --text-body-lg: 21px;
          --leading-body-lg: 1.75;
          --tracking-body-lg: 0.21px;
          --text-subheading: 24px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.24px;
          --text-heading-sm: 29px;
          --leading-heading-sm: 1.4;
          --tracking-heading-sm: 0.29px;
          --text-heading: 38px;
          --leading-heading: 1.2;
          --tracking-heading: -1.14px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -1.44px;
          --text-display: 84px;
          --leading-display: 1.1;
          --tracking-display: -3.78px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-96: 96px;
          --spacing-112: 112px;
          --spacing-128: 128px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-lg: 10px;
        }