21n___style_reference:
  info: "> Open atlas under pale daylight — a spacious, light-mode canvas where knowledge tools feel weightless against a single charcoal anchor."

  theme: "light"

  info: "Memotron is a whisper-quiet, light-mode knowledge workspace built on a near-monochrome neutral stack — pure white canvas, cool off-white surfaces, and a single hairline border gray carry the entire visual system. The only filled button variant is charcoal-dark, which makes the single primary action feel weighty and deliberate against an otherwise weightless interface. Two accent hues (vivid green and vivid blue) appear only as functional punctuation — icons, link states, decorative strokes — never as backgrounds or large fills. Typography is humanist (Sen) with a dramatic scale jump to 56px display, giving headlines atlas-scale presence. The system is flat and border-driven: 12.5px surfaces and #e5e7eb hairlines create structure, with zero shadows or gradients."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Snow | `#ffffff` | `--color-snow` | Primary canvas — page backgrounds, card surfaces, button text on dark fills |"
    info: "| Fog | `#f9f9fb` | `--color-fog` | First surface layer above canvas — subtle alternating sections, soft elevated cards |"
    info: "| Mist | `#eff0f6` | `--color-mist` | Cool card surface — slightly bluer than fog, used for inset panels and secondary cards |"
    info: "| Silver | `#e5e7eb` | `--color-silver` | Hairline borders, dividers, and 1px structural lines — the system's primary separator color |"
    info: "| Charcoal | `#333333` | `--color-charcoal` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#545454` | `--color-graphite` | Secondary text, subdued button borders, and metadata — sits between primary text and muted gray |"
    info: "| Smoke | `#767676` | `--color-smoke` | Supporting neutral for secondary UI, dividers, and muted labels. Do not promote it to the primary CTA color |"
    info: "| Ash | `#808080` | `--color-ash` | Disabled and inactive states — lowest-priority neutral for de-emphasized text and icons |"
    info: "| Emerald Pulse | `#24b26d` | `--color-emerald-pulse` | Green supporting accent for decorative details and low-frequency emphasis |"
    info: "| Cobalt Signal | `#2c70dd` | `--color-cobalt-signal` | Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"

  tokens___typography:

    sen___display_and_body___humanist_sans_serif_with_warm_proportions_and_open_apertures__the_sole_typeface_in_the_system__weight_400_carries_body_text__500_600_for_ui_controls_and_subheadings__700_reserved_for_the_56px_display_headline_where_it_provides_atlas_scale_presence_without_resorting_to_a_separate_display_face_____font_sen:
      - "**Substitute:** Inter, DM Sans, or Source Sans 3"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 13px, 15px, 16px, 17px, 19px, 22px, 36px, 44px, 56px"
      - "**Line height:** 1.07 (display) → 2.21 (loose body)"
      - "**Role:** Display and body — humanist sans-serif with warm proportions and open apertures, the sole typeface in the system. Weight 400 carries body text, 500–600 for UI controls and subheadings, 700 reserved for the 56px display headline where it provides atlas-scale presence without resorting to a separate display face."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 20 | — | `--text-caption` |"
      info: "| body-sm | 15px | 23 | — | `--text-body-sm` |"
      info: "| body-lg | 17px | 26 | — | `--text-body-lg` |"
      info: "| subheading | 19px | 33 | — | `--text-subheading` |"
      info: "| heading-sm | 22px | 33 | — | `--text-heading-sm` |"
      info: "| heading | 36px | 54 | — | `--text-heading` |"
      info: "| heading-lg | 44px | 55 | — | `--text-heading-lg` |"
      info: "| display | 56px | 60 | — | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 13 | 13px | `--spacing-13` |"
      info: "| 17 | 17px | `--spacing-17` |"
      info: "| 21 | 21px | `--spacing-21` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 29 | 29px | `--spacing-29` |"
      info: "| 33 | 33px | `--spacing-33` |"
      info: "| 38 | 38px | `--spacing-38` |"
      info: "| 50 | 50px | `--spacing-50` |"
      info: "| 67 | 67px | `--spacing-67` |"
      info: "| 84 | 84px | `--spacing-84` |"
      info: "| 90 | 90px | `--spacing-90` |"
      info: "| 95 | 95px | `--spacing-95` |"
      info: "| 134 | 134px | `--spacing-134` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 9999px |"
      info: "| cards | 12px |"
      info: "| links | 6px |"
      info: "| buttons | 12px or 9999px (pill) |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Persistent site navigation"

      info: "Horizontal bar with logo left, center nav links (Resources dropdown, Pricing, Compare, Extension, Discord), and dark pill button right. Height ~60px, white background, 1px #e5e7eb bottom border. Nav links at 15px Sen 500, #333. Dropdown indicated by chevron icon."

    charcoal_pill_button:
      role: "Primary navigation action — the system's only filled button variant"

      info: "Dark filled button, #333333 background, white text, 9999px border-radius (fully pill). 16px Sen 600, 8px 20px padding. Used for the single 'Go to web app' action in the header. No hover shadow — the button's weight comes from the dark fill against the white canvas, not from elevation."

    ghost_download_button:
      role: "Secondary action with platform hint"

      info: "Outlined pill button with small Apple icon prefix, text 'Download for Mac' at 15px Sen 500, #333. 1px #545454 border, 9999px radius, transparent background. 10px 20px padding. Sits centered in the hero below the headline."

    nav_link_item:
      role: "Text-only navigation entry"

      info: "15px Sen 500, #333, no underline by default. Hover state shifts to Cobalt Signal (#2c70dd). Resources includes a chevron-down icon to indicate dropdown. 17px horizontal spacing between links."

    hero_headline:
      role: "Page-level display heading"

      info: "56px Sen 700, #333, line-height 1.07, centered. Dramatic scale jump from 17px body to 56px display creates atlas-scale presence. Single-line or tight two-line treatment."

    hero_subtitle:
      role: "Supporting description text below headline"

      info: "19px Sen 400, #545454, centered, line-height 1.75. Sits 17px below the headline. Generous line-height creates breathing room around the dense body copy."

    product_showcase_frame:
      role: "Multi-device product visual"

      info: "Centered frame containing three overlapping device mockups (tablet, laptop, phone) on a soft warm cream background (#f9f9fb with wave illustration). No shadow on the frame — the cream canvas creates the separation. 12.5px radius on the cream background. Play button overlay centered on the laptop screen."

    vertical_side_label:
      role: "Section anchor text on page edges"

      info: "Rotated 90° text at the far left ('21n') and far right ('Products') of the page. 13px Sen 500, #767676. Acts as a section index rather than navigation — fixed-position or per-section, aligned to the viewport edge."

    hairline_section_divider:
      role: "Structural separator between content sections"

      info: "1px solid #e5e7eb line, full width or content-width. No vertical padding on the line itself — sections use 80-100px vertical gap above and below. The divider is invisible in many sections, only appearing where two surfaces of similar brightness need separation."

    wave_illustration_decoration:
      role: "Atmorphic background graphic"

      info: "Thin curved line illustrations in soft coral/red and warm gray tones, rendered as overlapping sine-wave patterns. Full-bleed behind the product showcase section, masked by the cream background container. No fill colors — stroke-only at ~1px, 40% opacity."

    feature_content_card:
      role: "Content container for feature blocks"

      info: "White or #f9f9fb surface, 12.5px border-radius, 1px #e5e7eb border, 17-25px padding. No shadow. Optional inner content uses 19-22px Sen headings and 16px body. Cards stack in 2- or 3-column grids with 33px gap."

    availability_caption:
      role: "Small platform-availability note below download CTA"

      info: "15px Sen 400, #767676, centered. 'Available as web, chrome extension, iOS and macOS apps.' No icon, no link styling — pure muted text."

  do_s_and_don_ts:

    do:
      - "Use #333333 (Charcoal) exclusively for the single filled button variant — never introduce a chromatic fill for primary actions"
      - "Set all borders to 1px solid #e5e7eb (Silver) — hairline structure is the system's primary separator"
      - "Use 9999px border-radius for pill buttons and tags, 12px for cards and surfaces, 6px for inline links"
      - "Reserve #24b26d (Emerald Pulse) and #2c70dd (Cobalt Signal) for icons, link states, and small functional accents — never as surface fills or large background blocks"
      - "Follow the type scale strictly: 13/15/16/17/19/22/36/44/56 — the 56px display jump is the system's signature scale gesture"
      - "Use #f9f9fb (Fog) and #eff0f6 (Mist) for surface layering instead of shadows to imply depth"
      - "Keep element gaps at 8px and section gaps at 80-100px to maintain the atlas-scale breathing room"

    don_t:
      - "Do not introduce drop shadows, glows, or blur effects — the system is intentionally flat"
      - "Do not use gradients on buttons, cards, or backgrounds — the palette is pure solid color"
      - "Do not call #2c70dd or #24b26d a CTA or primary action color — they are accent hues only"
      - "Do not add a chromatic background fill to any button — Charcoal #333 is the only filled button color"
      - "Do not use letter-spacing adjustments on Sen — the typeface ships with normal tracking across all sizes"
      - "Do not use #545454 (Graphite) for body text — reserve it for secondary metadata and button borders; primary text is always #333"
      - "Do not introduce a second display font — Sen carries from 13px caption to 56px display with no substitution"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Snow Canvas | `#ffffff` | Base page background — the dominant surface |"
    info: "| 1 | Fog Section | `#f9f9fb` | First elevated section band — subtle alternation |"
    info: "| 2 | Mist Card | `#eff0f6` | Card and inset panel surface — cool-tinted elevation |"
    info: "| 3 | Silver Border | `#e5e7eb` | Structural hairline — the primary separator |"
    info: "| 4 | Charcoal Anchor | `#333333` | Dark button and inverse text — the only heavy surface |"

  elevation:

    info: "The system is intentionally shadow-free. Structure comes from hairline #e5e7eb borders, 12.5px surface rounding, and surface-layer contrast (#ffffff → #f9f9fb → #eff0f6) rather than from drop shadows. Depth is implied through cool-tinted off-whites stacking against pure white, not through elevation. This keeps the interface flat, fast, and atlas-like — no visual weight that would compete with the product content."

  imagery:

    info: "Product-device mockups (tablet, laptop, phone) are the primary visual — three overlapping screens showing the actual app interface, arranged on a warm cream canvas. The product UI itself is the hero imagery. Supporting graphics are thin stroke-only wave illustrations in soft coral and warm gray, rendered as overlapping sine curves at ~40% opacity. Photography is entirely absent — no lifestyle shots, no stock imagery, no team photos. Icons are mono-weight, small-scale, and appear inline with text rather than as standalone decoration. The visual density is low: large expanses of white space punctuated by the single product showcase frame."

  layout:

    info: "Centered max-width container at 1200px, with full-bleed sections inside it. The hero is a centered text stack (headline → subtitle → download button → availability caption) over a subtle cream/wave background. Vertical side labels ('21n' left, 'Products' right) sit at the viewport edges, rotated 90°, acting as section anchors. Sections flow seamlessly with hairline #e5e7eb dividers rather than alternating background bands. The product showcase section uses a centered frame with overlapping device mockups. Navigation is a fixed top bar with logo left, center links, and dark pill button right. Content grids are 2- or 3-column with 33px gaps. Vertical rhythm is generous — 80-100px between sections — giving the interface an open-atlas feel."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #333333 (Charcoal)"
    - "background: #ffffff (Snow)"
    - "surface: #f9f9fb (Fog) / #eff0f6 (Mist)"
    - "border: #e5e7eb (Silver)"
    - "accent: #2c70dd (Cobalt Signal) and #24b26d (Emerald Pulse) — icons and link states only"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "**Charcoal Pill Button**: Create a filled pill button with #333333 background, white text at 16px Sen 600, 8px 20px padding, 9999px border-radius, no border, no shadow. Text: 'Go to web app'."

    - "**Ghost Download Button**: Create an outlined pill button with transparent background, 1px #545454 border, 9999px radius, 10px 20px padding. Left-aligned Apple icon in #333, text 'Download for Mac' at 15px Sen 500 in #333."

    - "**Hero Headline + Subtitle**: Centered text stack. Headline 'Your memory atlas' at 56px Sen 700, #333, line-height 1.07. Subtitle below at 19px Sen 400, #545454, line-height 1.75, 17px gap from headline."

    - "**Feature Content Card**: White surface, 12px border-radius, 1px #e5e7eb border, 25px padding, no shadow. Heading at 22px Sen 600 #333, body text at 16px Sen 400 #545454, 8px gap between heading and body."

    - "**Vertical Side Label**: Text rotated 90°, 13px Sen 500, #767676, positioned at the far left edge of the viewport. No background, no border — pure typographic anchor."

  accent_color_discipline:

    info: "The green (#24b26d) and blue (#2c70dd) accents follow a strict rule: they appear only at sizes ≤ 24px and only on icons, link underlines, small badges, or decorative strokes. They never fill a button, card, or section background. This discipline keeps the system monochrome at scale — when you zoom out, the page is white, gray, and charcoal; the accents are only visible up close as functional punctuation. Violating this rule (e.g., a green section background or blue CTA) breaks the system's whisper-quiet character."

  surface_layering_without_shadows:

    info: "Depth is communicated through a four-layer surface stack: #ffffff (base canvas) → #f9f9fb (section band) → #eff0f6 (card/panel) → #e5e7eb (border/separator). Each layer is a subtle step cooler or grayer than the one below. Cards never need shadows because the surface tint shift provides enough visual separation. When a design needs more emphasis, the solution is a cooler surface tint, not a darker shadow."

  similar_brands:

    - "**Notion** — Same airy, light-mode knowledge-tool aesthetic with generous whitespace, humanist sans-serif typography, and a near-monochrome palette accented by small functional color"
    - "**Capacities** — Similar light-mode productivity tool with flat surfaces, hairline borders, and a single dark button variant against an otherwise white canvas"
    - "**Reflect** — Same whisper-quiet light-mode notes app with minimal chromatic palette and border-driven structure rather than shadow-based elevation"
    - "**Tana** — Similar airy, structured knowledge tool with humanist sans-serif type and a calm, atlas-like spatial rhythm between content sections"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-snow: #ffffff;
          --color-fog: #f9f9fb;
          --color-mist: #eff0f6;
          --color-silver: #e5e7eb;
          --color-charcoal: #333333;
          --color-graphite: #545454;
          --color-smoke: #767676;
          --color-ash: #808080;
          --color-emerald-pulse: #24b26d;
          --color-cobalt-signal: #2c70dd;
        
          /* Typography — Font Families */
          --font-sen: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 20;
          --text-body-sm: 15px;
          --leading-body-sm: 23;
          --text-body-lg: 17px;
          --leading-body-lg: 26;
          --text-subheading: 19px;
          --leading-subheading: 33;
          --text-heading-sm: 22px;
          --leading-heading-sm: 33;
          --text-heading: 36px;
          --leading-heading: 54;
          --text-heading-lg: 44px;
          --leading-heading-lg: 55;
          --text-display: 56px;
          --leading-display: 60;
        
          /* 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-6: 6px;
          --spacing-8: 8px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-29: 29px;
          --spacing-33: 33px;
          --spacing-38: 38px;
          --spacing-50: 50px;
          --spacing-67: 67px;
          --spacing-84: 84px;
          --spacing-90: 90px;
          --spacing-95: 95px;
          --spacing-134: 134px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-100px;
          --card-padding: 17-25px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 6.26325px;
          --radius-xl: 12.5265px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 12px;
          --radius-links: 6px;
          --radius-buttons: 12px or 9999px (pill);
        
          /* Surfaces */
          --surface-snow-canvas: #ffffff;
          --surface-fog-section: #f9f9fb;
          --surface-mist-card: #eff0f6;
          --surface-silver-border: #e5e7eb;
          --surface-charcoal-anchor: #333333;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-snow: #ffffff;
          --color-fog: #f9f9fb;
          --color-mist: #eff0f6;
          --color-silver: #e5e7eb;
          --color-charcoal: #333333;
          --color-graphite: #545454;
          --color-smoke: #767676;
          --color-ash: #808080;
          --color-emerald-pulse: #24b26d;
          --color-cobalt-signal: #2c70dd;
        
          /* Typography */
          --font-sen: 'Sen', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 20;
          --text-body-sm: 15px;
          --leading-body-sm: 23;
          --text-body-lg: 17px;
          --leading-body-lg: 26;
          --text-subheading: 19px;
          --leading-subheading: 33;
          --text-heading-sm: 22px;
          --leading-heading-sm: 33;
          --text-heading: 36px;
          --leading-heading: 54;
          --text-heading-lg: 44px;
          --leading-heading-lg: 55;
          --text-display: 56px;
          --leading-display: 60;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-13: 13px;
          --spacing-17: 17px;
          --spacing-21: 21px;
          --spacing-25: 25px;
          --spacing-29: 29px;
          --spacing-33: 33px;
          --spacing-38: 38px;
          --spacing-50: 50px;
          --spacing-67: 67px;
          --spacing-84: 84px;
          --spacing-90: 90px;
          --spacing-95: 95px;
          --spacing-134: 134px;
        
          /* Border Radius */
          --radius-md: 6.26325px;
          --radius-xl: 12.5265px;
          --radius-full: 9999px;
        }