sublime___style_reference:
  info: "> white-walled curator's atelier — a quiet gallery where one bold black headline holds the room and a single green object is always the only thing worth picking up"

  theme: "light"

  sublime_operates_as_a_digital_atelier: "vast white walls, a single monumental headline anchoring each view, and collected objects (text snippets, vintage images, 3D renders) that feel curated rather than organized. The palette is 98% achromatic — black on white carries the entire interface, with two whisper-soft washes (pale blue, pale green) and one vivid moss green that punctuates moments of intent. Typography does the structural work: a custom geometric sans at extreme sizes and tight tracking creates headline gravity, while Times New Roman supplies a literary counterpoint for body copy and quotes — the serif/sans collision is deliberate editorial tension, not a system oversight. Layout breathes aggressively — centered compositions, floating collaged elements that overlap and ignore grid lines, generous vertical rhythm. Radii split into two modes: crisp 5px for functional controls, 999px pill for tags and special actions."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Moss Green | `#38744d` | `--color-moss-green` | Green outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |"
    info: "| Signal Cyan | `#00aaff` | `--color-signal-cyan` | Blue outline accent for tags, dividers, and focused UI edges. |"
    info: "| Ice Wash | `#e0f5ff` | `--color-ice-wash` | Cool surface tint — content card backgrounds, highlight washes; a barely-there blue that hints at a Polaroid shadow without actually adding one |"
    info: "| Mint Whisper | `#cbffa6` | `--color-mint-whisper` | Warm surface tint — secondary highlight washes, soft card fills; a pale chartreuse that pairs with Moss Green as a lighter sibling |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Primary text, structural borders, icon strokes — the dominant workhorse (870 uses); never softened to gray, always full ink |"
    info: "| Graphite | `#181816` | `--color-graphite` | Heading text and icon fills — a near-black with the faintest warm shift, used where Pure Black would feel too clinical (display headings, filled icons) |"
    info: "| Paper | `#ffffff` | `--color-paper` | Page canvas, card surfaces, text on dark fills — the gallery wall itself |"
    info: "| Bone | `#efefef` | `--color-bone` | Elevated surface, button backgrounds, subtle dividers — the off-white that lets buttons and cards sit forward without using shadow |"
    info: "| Stone | `#908f8e` | `--color-stone` | Button borders, secondary borders — medium gray for outlined controls that need definition without weight |"
    info: "| Fog | `#a29e9c` | `--color-fog` | Body borders, nav borders, muted body text — the most-used border gray (275 instances); creates the hairline-grid that organizes the page without drawing attention |"
    info: "| Slate | `#6a6967` | `--color-slate` | Heading borders, link text, secondary headings — darker than Fog for moments that need more presence than a border but less than a heading |"

  tokens___typography:

    control_upright___primary_interface_sans___headlines__nav__buttons__body__icons__a_single_weight_geometric_sans_that_does_all_structural_work__signature_choice__it_carries_the_142px_display_headline_at_weight_400_only__so_the_extreme_size_creates_weight_rather_than_the_font_face__the_custom_stylistic_sets_ss12_and_ss09_are_active___these_likely_adjust_letterforms_apertures__terminals_to_keep_the_geometric_structure_readable_at_small_sizes_and_dramatic_at_large_____font_control_upright:
      - "**Substitute:** Inter, DM Sans, or Satoshi"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 14px, 16px, 18px, 24px, 28px, 64px, 142px"
      - "**Line height:** 0.90–1.39 (tight 0.90–1.00 at display sizes, opens to 1.39 at body sizes)"
      - "**Letter spacing:** -0.02em at 64px and above, -0.015em at 18–28px, +0.008em at 12–16px"
      - "**OpenType features:** `\"ss12\" on, \"ss09\" on`"
      - "**Role:** Primary interface sans — headlines, nav, buttons, body, icons. A single-weight geometric sans that does all structural work. Signature choice: it carries the 142px display headline at weight 400 only, so the extreme size creates weight rather than the font face. The custom stylistic sets ss12 and ss09 are active — these likely adjust letterforms (apertures, terminals) to keep the geometric structure readable at small sizes and dramatic at large."

    times_new_roman___literary_counterpoint___body_paragraphs__quotes__editorial_text__the_intentional_clash__a_contemporary_geometric_sans_for_headlines__a_1930s_book_serif_for_body__the_serif_makes_long_reads_feel_like_a_printed_catalog_page_rather_than_a_saas_dashboard__ss12_is_active__likely_for_old_style_figures_and_ligatures_____font_times_new_roman:
      - "**Substitute:** Source Serif Pro, EB Garamond, or PT Serif"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 18px"
      - "**Line height:** 1.20–1.39"
      - "**Letter spacing:** -0.03em at 14px, -0.02em at 16–18px"
      - "**OpenType features:** `\"ss12\" on`"
      - "**Role:** Literary counterpoint — body paragraphs, quotes, editorial text. The intentional clash: a contemporary geometric sans for headlines, a 1930s book serif for body. The serif makes long reads feel like a printed catalog page rather than a SaaS dashboard. ss12 is active, likely for old-style figures and ligatures."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.39 | 0.096px | `--text-caption` |"
      info: "| body-sm | 14px | 1.39 | -0.21px | `--text-body-sm` |"
      info: "| body | 16px | 1.39 | -0.32px | `--text-body` |"
      info: "| body-lg | 18px | 1.39 | -0.36px | `--text-body-lg` |"
      info: "| subheading | 24px | 1.16 | -0.48px | `--text-subheading` |"
      info: "| heading-sm | 28px | 1.13 | -0.56px | `--text-heading-sm` |"
      info: "| heading | 64px | 1 | -1.28px | `--text-heading` |"
      info: "| display | 142px | 0.9 | -2.84px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 60 | 60px | `--spacing-60` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 999px |"
      info: "| cards | 5px |"
      info: "| pills | 999px |"
      info: "| footer | 40px |"
      info: "| buttons | 5px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 80-120px"
      - "**Card padding:** 18-25px"
      - "**Element gap:** 15-30px"

  components:

    green_filled_action_button:
      role: "Primary conversion — the 'try now' entry point in the nav"

      info: "Moss Green (#38744d) fill, white (#ffffff) text, Control Upright 14px weight 400, letter-spacing -0.21px, 5px radius, 8px vertical / 18px horizontal padding. The green is the only saturated color in the entire interface, so this button is always the loudest object on the page. No hover state needed — the green is already committed."

    outlined_nav_button:
      role: "Secondary nav action — 'login' in the header"

      info: "Transparent fill, Stone (#908f8e) 1px border, #000000 text, 5px radius, 8px vertical / 18px horizontal padding. Sits to the left of the green action; its quiet neutrality makes the green feel intentional rather than decorative."

    pill_tag:
      role: "Label marker for referenced content — 'related', 'reference'"

      info: "Signal Cyan (#00aaff) background, white text, 999px radius, Control Upright 12px, 4px vertical / 12px horizontal padding. Functions like a Post-it stuck to a clipped image. The cyan against monochrome gives the tag the same weight as a hand-drawn annotation."

    text_note_card:
      role: "Quoted or saved text content, displayed as a clipped excerpt"

      info: "Ice Wash (#e0f5ff) or Mint Whisper (#cbffa6) background, #000000 text, Control Upright 14–16px, 18–25px padding, 5px radius. No border, no shadow — the colored fill alone separates it from the canvas. Sometimes contains a Pill Tag at the bottom."

    image_collage_card:
      role: "Saved visual content — photography, screenshots, prints"

      info: "White or Paper (#ffffff) surface, Fog (#a29e9c) 1px border, 5px radius, 18px padding around an image fill. Cards are placed at slight offsets and rotations in the collage, not aligned to a grid — the overlap is the signature."

    navigation_bar:
      role: "Site-wide header — logo left, actions right"

      info: "Transparent background, 50px padding top, 15px gap between logo and actions. Logo is a small organic bird/leaf mark + 'sublime' wordmark in Control Upright 16px. Actions sit flush right: outlined login button, then green action button, separated by 10px."

    display_headline:
      role: "Hero and section anchor text"

      info: "Control Upright 142px (hero) or 64px (section), weight 400, line-height 0.90–1.00, letter-spacing -2.84px at 142px / -1.28px at 64px. Color is Pure Black (#000000). The line-height under 1.0 is critical — it allows the text to feel like a physical object sitting on the page, not floating text in space."

    quote_block:
      role: "Standalone editorial quote — the 'wtf is a knowledge worker' section"

      info: "Centered, Stone (#908f8e) text, Control Upright 28px weight 400, line-height 1.13, 200px+ vertical padding above and below. The generous padding makes the quote feel like a wall plaque, not body copy."

    green_inline_text_block:
      role: "Highlighted body excerpt — the Björk quote card"

      info: "Moss Green (#38744d) text on Paper (#ffffff) background, Control Upright 14px, left-aligned within a 5px-radius container with no fill. Functions as a pulled quote — the color is the emphasis, no box needed."

    footer_surface:
      role: "Site footer container"

      info: "Bone (#efefef) or Paper (#ffffff) background, 40px top-radius on the top edge (container has a curved upper boundary like a stage lip), 25px padding, Control Utright 14px in Fog (#a29e9c)."

    media_card_with_play_overlay:
      role: "Video or interactive content preview"

      info: "Image fill inside a Fog (#a29e9c) 1px border, 5px radius container. Play button is a small circular icon in Pure Black (#000000) centered on the image. No background tint — the media IS the card."

  do_s_and_don_ts:

    do:
      - "Use Control Upright at weight 400 for all UI text — the single-weight system means size and color do the hierarchy work, not font weight"
      - "Set display headlines (64px+) to line-height 0.90–1.00 so text feels like a physical object, not a text block"
      - "Use Moss Green (#38744d) for exactly one element per view — the moment a second green appears, the accent stops reading as accent"
      - "Keep page background at Paper (#ffffff) and let Ice Wash (#e0f5ff) or Mint Whisper (#cbffa6) carry the only color in content areas"
      - "Use 999px radius for all tags and pill markers, 5px for all functional buttons — the radius split is a system, not a choice per element"
      - "Let image cards overlap and rotate slightly in collages — strict grid alignment destroys the editorial feel"
      - "Reserve 142px for hero display only; section headings max at 64px to maintain the size gap that makes the hero feel monumental"

    don_t:
      - "Don't introduce additional font weights for Control Upright — the system runs on weight 400 plus extreme size contrast"
      - "Don't use Times New Roman for UI controls, nav, or buttons — it is for body and quotes only, the clash with Control Upright is the point"
      - "Don't add drop shadows to cards — the surface palette (Paper → Bone → Ice Wash) provides elevation through color, not shadow"
      - "Don't pair Moss Green with Signal Cyan on the same element — the green and cyan are the only two saturated colors and must never compete"
      - "Don't use border-radius values between 5px and 999px on standard components — the system jumps from crisp (5px) to fully round (999px) with nothing in between"
      - "Don't right-align or left-align display headlines — they are always centered to hold the page's vertical axis"
      - "Don't fill large areas with Signal Cyan — it lives only in pill tags and inline highlights; a cyan background block would break the monochrome discipline"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper | `#ffffff` | Page canvas — the gallery wall |"
    info: "| 1 | Bone | `#efefef` | Elevated card surfaces, button fills, subtle separation |"
    info: "| 2 | Ice Wash | `#e0f5ff` | Cool content card wash — quotes, text notes, reference cards |"
    info: "| 3 | Mint Whisper | `#cbffa6` | Warm highlight wash — accent card surfaces, emphasis zones |"

  elevation:

    info: "No drop shadows. Elevation is communicated entirely through surface color steps (Paper → Bone → Ice Wash → Mint Whisper) and hairline borders in Fog (#a29e9c). The only visual depth cue is the stacking of off-white surfaces and the occasional colored wash. This keeps the interface feeling like a flat gallery wall — objects sit ON the wall, not above it."

  imagery:

    info: "Imagery is collected, not illustrated. The signature element is a hyperreal 3D render — moss-covered stone formations physically sculpting the word 'sublime', placed as a full-bleed hero object rather than a background. Supporting visuals lean editorial-archive: vintage magazine clippings, art prints, Polaroid-style portraits, and nature photography (butterflies, botanical studies, hands at work). Cards hold these images at slight rotation and overlap, creating a scrapbook or mood-board density rather than grid alignment. A monarch butterfly with a file label ('headintheclouds.txt') recurs as a signature motif — organic, slightly surreal, digitally composited. The overall treatment: objects feel physically placed on the white page, not displayed in frames. No lifestyle photography, no staged people shots — the content IS the object, isolated and centered. The logo mark is a small organic bird/leaf silhouette, hand-drawn line weight, monochrome."

  layout:

    info: "Centered, max-width 1200px page model. Hero is a centered monumental headline (142px Control Upright) stacked above a 3D-rendered sculptural object that spans the full content width — text and image share the viewport, not a split column. Section rhythm alternates between generous vertical breathing (200px+ between sections) and dense collage moments where multiple cards overlap at slight rotations. Content arrangement is asymmetric z-pattern: centered quote blocks, then scattered card clusters, then a feature section with text-left/visual-right but with the visual offset above and below the text boundary. Grids are loose — card clusters use 2-4 columns but cards break alignment intentionally. Density is predominantly spacious (60% white space by area) with two concentrated collage zones. Navigation is a single thin top bar: logo left, two action buttons right, no mega-menu, no sidebar."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000 (Pure Black) or #181816 (Graphite for headings)"
    - "background: #ffffff (Paper)"
    - "border: #a29e9c (Fog) or #908f8e (Stone for buttons)"
    - "accent: #38744d (Moss Green) for the single action element per view"
    - "tag: #00aaff (Signal Cyan) for pill labels only"
    - "surface wash: #e0f5ff (Ice Wash) or #cbffa6 (Mint Whisper) for content card backgrounds"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a hero section: white (#ffffff) background. Headline 'the knowledge tool that sparks creativity' at 142px Control Upright weight 400, color #000000, letter-spacing -2.84px, line-height 0.90, centered. Below: a full-width 3D-rendered image of mossy stone formations. Top-right nav with an outlined 'login' button (transparent fill, #908f8e 1px border, 5px radius, 8px/18px padding) and a green 'try now' button (#38744d fill, white text, 5px radius, 8px/18px padding, Control Upright 14px)."

    - "Create a quote section: white (#ffffff) background, 120px vertical padding. Centered text in Control Upright 28px weight 400, color #908f8e, line-height 1.13. No border, no card — the whitespace is the container."

    - "Create a text note card: Ice Wash (#e0f5ff) background fill, 5px radius, 25px padding. Content in Control Upright 14px color #000000. Below the text, a Signal Cyan (#00aaff) pill tag reading 'related' — 999px radius, 4px/12px padding, white text 12px."

    - "Create an image collage card cluster: 3–4 cards on a white background, each with a Fog (#a29e9c) 1px border, 5px radius, containing a photographic image. Cards overlap at 10–15px and rotate between -2° and +3°. One card has a cyan 'related' pill in the bottom-right corner."

    - "Create the navigation bar: transparent background, 50px top padding, 15px gap between logo and actions. Left: small bird/leaf icon + 'sublime' wordmark in Control Upright 16px color #000000. Right: outlined 'login' button + green 'try now' button separated by 10px gap. No sticky behavior — nav scrolls with the page."

  similar_brands:

    - "**Are.na** — Same minimal white-canvas knowledge curation aesthetic with collage-style content blocks and the same refusal to impose grid rigidity"
    - "**Readymag** — Same editorial display-sans-meets-serif-body tension and willingness to let a single headline dominate the viewport at extreme size"
    - "**Cargo Collective** — Same creator-first white-wall portfolio language with overlapping content blocks and monochrome discipline"
    - "**Pinterest** — Same visual bookmarking model with card-based content display, but Sublime's editorial typography and white space replace Pinterest's dense visual grid"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-moss-green: #38744d;
          --color-signal-cyan: #00aaff;
          --color-ice-wash: #e0f5ff;
          --color-mint-whisper: #cbffa6;
          --color-pure-black: #000000;
          --color-graphite: #181816;
          --color-paper: #ffffff;
          --color-bone: #efefef;
          --color-stone: #908f8e;
          --color-fog: #a29e9c;
          --color-slate: #6a6967;
        
          /* Typography — Font Families */
          --font-control-upright: 'Control Upright', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times-new-roman: 'Times New Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.39;
          --tracking-caption: 0.096px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.39;
          --tracking-body-sm: -0.21px;
          --text-body: 16px;
          --leading-body: 1.39;
          --tracking-body: -0.32px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.39;
          --tracking-body-lg: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1.16;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.13;
          --tracking-heading-sm: -0.56px;
          --text-heading: 64px;
          --leading-heading: 1;
          --tracking-heading: -1.28px;
          --text-display: 142px;
          --leading-display: 0.9;
          --tracking-display: -2.84px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80-120px;
          --card-padding: 18-25px;
          --element-gap: 15-30px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 40px;
          --radius-full: 999px;
        
          /* Named Radii */
          --radius-tags: 999px;
          --radius-cards: 5px;
          --radius-pills: 999px;
          --radius-footer: 40px;
          --radius-buttons: 5px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-bone: #efefef;
          --surface-ice-wash: #e0f5ff;
          --surface-mint-whisper: #cbffa6;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-moss-green: #38744d;
          --color-signal-cyan: #00aaff;
          --color-ice-wash: #e0f5ff;
          --color-mint-whisper: #cbffa6;
          --color-pure-black: #000000;
          --color-graphite: #181816;
          --color-paper: #ffffff;
          --color-bone: #efefef;
          --color-stone: #908f8e;
          --color-fog: #a29e9c;
          --color-slate: #6a6967;
        
          /* Typography */
          --font-control-upright: 'Control Upright', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-times-new-roman: 'Times New Roman', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.39;
          --tracking-caption: 0.096px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.39;
          --tracking-body-sm: -0.21px;
          --text-body: 16px;
          --leading-body: 1.39;
          --tracking-body: -0.32px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.39;
          --tracking-body-lg: -0.36px;
          --text-subheading: 24px;
          --leading-subheading: 1.16;
          --tracking-subheading: -0.48px;
          --text-heading-sm: 28px;
          --leading-heading-sm: 1.13;
          --tracking-heading-sm: -0.56px;
          --text-heading: 64px;
          --leading-heading: 1;
          --tracking-heading: -1.28px;
          --text-display: 142px;
          --leading-display: 0.9;
          --tracking-display: -2.84px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-20: 20px;
          --spacing-60: 60px;
          --spacing-100: 100px;
          --spacing-160: 160px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-md: 5px;
          --radius-xl: 15px;
          --radius-2xl: 20px;
          --radius-3xl: 40px;
          --radius-full: 999px;
        }