pencilbooth___style_reference:
  info: "> Monochrome broadsheet manifesto. PencilBooth looks like a typographic broadsheet laid flat on a gallery wall — enormous display type anchoring two-column reading rows, hairline rules separating sections, and a single deep-navy accent breaking the gray silence only when a state is active."

  theme: "light"

  info: "PencilBooth is a monochrome editorial broadsheet: pure white and soft gray surfaces carry the load, with a single deep navy accent reserved exclusively for the active/selected state. The visual system is dominated by typographic architecture — 96px display headlines at weight 700 act as section anchors, while body copy stays compact and dense in a two-column reading grid. The interface reads like a curated print manifesto, not a SaaS dashboard: components are flat, borders are hairlines, and chromatic color appears only as functional punctuation (a highlighted tab, a colored emoji-style icon avatar). Every surface decision prioritizes legibility and quiet hierarchy over visual flourish."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, display headlines, icon strokes — the only true black in the system, used at full strength for headlines and body to maximize contrast against the light canvas |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, elevated panels, and inset backgrounds — the bright surface that floats above the canvas gray |"
    info: "| Canvas Gray | `#f2f2f2` | `--color-canvas-gray` | Page background and recessed surface — the dominant canvas that makes white cards feel lifted without using shadows |"
    info: "| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | Borders, dividers, card outlines, and structural rules — by far the most-used color (4960 occurrences), it defines every interface edge with 1px restraint |"
    info: "| Body Gray | `#5a5e62` | `--color-body-gray` | Secondary body text — softened black for long-form copy in the right column, reduces visual weight without sacrificing legibility |"
    info: "| Muted Gray | `#b2b2b2` | `--color-muted-gray` | Tertiary text and metadata — captions, labels, and supporting copy that should recede behind primary content |"
    info: "| Deep Navy | `#0f1ea1` | `--color-deep-navy` | Active/selected tab background and the system's sole chromatic accent — appears once per section to signal the current state against the monochrome field |"
    info: "| Sky Blue | `#8fbaff` | `--color-sky-blue` | Subtle surface wash and decorative highlight — soft chromatic field used sparingly behind small elements, never as a CTA |"
    info: "| Pale Lavender | `#cfd2ec` | `--color-pale-lavender` | Soft surface tint — the gentlest chromatic wash for background sections that need to break the achromatic field without competing with content |"

  tokens___typography:

    soehne___sole_typeface___used_for_display__headings__body__links__icons__and_everything_between__weight_700_carries_all_display_and_heading_roles__weight_400_handles_body__captions__and_links__soehne_s_humanist_grotesque_proportions_and_tight_terminals_give_the_editorial_broadsheet_its_distinctive_voice___a_system_font_would_feel_too_neutral__too_saas_generic_____font_soehne:
      - "**Substitute:** Inter or Untitled Sans — both are humanist grotesques with similar x-height and terminal treatment; General Sans is also a close match for the open apertures"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 14px, 16px, 18px, 32px, 96px"
      - "**Line height:** 1.00–1.20"
      - "**Letter spacing:** 0.0100em applied uniformly (0.96px at 96px, 0.18px at 18px, 0.12px at 12px)"
      - "**Role:** Sole typeface — used for display, headings, body, links, icons, and everything between. Weight 700 carries all display and heading roles; weight 400 handles body, captions, and links. Soehne's humanist grotesque proportions and tight terminals give the editorial broadsheet its distinctive voice — a system font would feel too neutral, too SaaS-generic."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | 0.12px | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | 0.14px | `--text-body-sm` |"
      info: "| body | 16px | 1.2 | 0.16px | `--text-body` |"
      info: "| subheading | 18px | 1.2 | 0.18px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1 | 0.32px | `--text-heading-sm` |"
      info: "| display | 96px | 1 | 0.96px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 14 | 14px | `--spacing-14` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 47 | 47px | `--spacing-47` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 200 | 200px | `--spacing-200` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 2px |"
      info: "| cards | 10px |"
      info: "| icons | 9999px |"
      info: "| buttons | 2px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48-80px"
      - "**Card padding:** 24px"
      - "**Element gap:** 10px"

  components:

    display_headline_block:
      role: "Section anchor — the 96px bold headline that opens every editorial section"

      info: "Soehne weight 700 at 96px, line-height 1.0, letter-spacing 0.96px, color #000000. Paired directly beneath with a weight 400 subtitle at 32px in a medium gray (#5a5e62 or #b2b2b2). The extreme size ratio (96px headline → 32px subtitle) creates the broadsheet's signature vertical rhythm."

    two_column_editorial_row:
      role: "Primary content layout — pairs a left display column with a right body text column"

      left_column: "96px display heading + 32px subtitle, left-aligned. Right column: 16px body copy at weight 400 in #5a5e62, narrow measure (~400-500px). Columns separated by generous whitespace, not vertical rules. This is the page's structural DNA — every major section follows this template."

    feature_tab_item:
      role: "Selectable list item in the left column feature stack"

      info: "Full-width row with 10px horizontal padding, 10-12px vertical padding, 10px border-radius. Left side: circular icon avatar (40px, 9999px radius, white background with emoji-style icon). Right side: 16px weight 400 label in #000000. Hairline bottom border (#e5e7eb) between items. Background: #ffffff."

    active_feature_tab:
      role: "Selected state for a feature tab item — the system's sole chromatic surface"

      info: "Same dimensions as Feature Tab Item, but background switches to #0f1ea1 (Deep Navy), text to #ffffff, and icon avatar to a gold/yellow emoji. This inversion is the only place Deep Navy appears in the interface — it functions as wayfinding, not decoration."

    content_card:
      role: "Generic elevated surface for grouped content blocks"

      info: "White (#ffffff) background, 10px border-radius, 1px hairline border in #e5e7eb, internal padding 24px. No shadow — elevation is achieved through surface contrast against the #f2f2f2 canvas. Cards never use chromatic fills or gradients."

    icon_avatar:
      role: "Circular badge containing an emoji-style icon — the system's only multi-color element"

      info: "40px circle with 9999px border-radius, white (#ffffff) background, containing a full-color emoji glyph (👁, 💜, 📔, 🎨, 🌐, 📩, 🌊, 🆓, 📊, 💸, ✅, 💰). The emoji's native color is the source of all chromatic variety on the page — it is never replaced by monochrome line icons."

    image_grid_tile:
      role: "Portfolio thumbnail in the 'Meet the Crowd' section"

      info: "Square or near-square tile, no border, no radius constraint (edges are sharp by default). Each tile contains a full-bleed image at its native aspect ratio. Caption sits below: 14px weight 400 in #000000, with a small ↗ arrow link in #000000."

    inline_link:
      role: "Text link with minimal visual treatment"

      color: "#000000 (black) with 1px underline in #e5e7eb (hairline gray), or no underline at all. Weight 400, inherits surrounding body size. 2px border-radius only appears on small tag-like links or pill badges. Links never use blue — color is never the signal for clickability."

    metadata_caption:
      role: "Small text for labels, tags, and supporting information"

      info: "12-14px, weight 400, color #b2b2b2 (Muted Gray). Used above section heads, below image tiles, and as inline metadata. Never bold, never colored — it should recede behind primary content."

  do_s_and_don_ts:

    do:
      - "Use 96px Soehne weight 700 for all section-opening display headlines; pair with a 32px weight 400 subtitle in #5a5e62"
      - "Apply #0f1ea1 (Deep Navy) exclusively to active/selected states — never to decorative elements, never to primary actions outside the tab context"
      - "Use 1px #e5e7eb hairline borders for all component edges; never use box-shadows for elevation"
      - "Maintain the two-column editorial row template: display heading left, body copy right, separated by whitespace not vertical rules"
      - "Use #f2f2f2 for the page canvas and #ffffff for cards — the contrast between these two near-whites IS the elevation system"
      - "Let emoji glyphs carry the system's color variety in icon avatars; do not replace them with monochrome line icons or SVG illustrations"
      - "Keep letter-spacing at 0.0100em across all sizes — this uniform tracking is part of the Soehne voice"

    don_t:
      - "Do not use color (blue, green, red) to signal links or clickable elements — links are #000000 with optional hairline underline"
      - "Do not apply box-shadows to cards, modals, or popovers — the system is intentionally flat"
      - "Do not use gradient fills on any surface, button, or background"
      - "Do not introduce additional accent colors beyond Deep Navy (#0f1ea1), Sky Blue (#8fbaff), and Pale Lavender (#cfd2ec)"
      - "Do not use display sizes smaller than 96px for section headlines — the extreme scale jump is the system's signature"
      - "Do not use icons with custom SVG line illustrations; emoji-style colorful avatars are the icon system"
      - "Do not use border-radius larger than 10px for any rectangular element — only icon avatars (9999px) and tags (2px) deviate from the 10px standard"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f2f2f2` | Page background — the base field that the entire editorial layout sits on |"
    info: "| 1 | Card | `#ffffff` | Feature list panels, content cards, and elevated surfaces — defined by hairline borders rather than shadow |"
    info: "| 2 | Tinted | `#cfd2ec` | Chromatic wash for sections requiring gentle color separation from the achromatic field |"
    info: "| 3 | Active | `#0f1ea1` | Selected tab or active state surface — the only fully saturated surface in the system |"

  elevation:

    - "**Content Card:** `none — elevation is achieved through surface contrast (#ffffff on #f2f2f2 canvas) and 1px hairline borders in #e5e7eb`"
    - "**Feature Tab Item:** `none — flat surface with hairline bottom border`"
    - "**Active Feature Tab:** `none — the #0f1ea1 fill itself signals elevation through chromatic contrast`"

  imagery:

    info: "Imagery is sparse and editorial. The only consistent visual pattern is the image grid of portfolio thumbnails (square crops of artists' work, full-bleed, no rounded corners, no borders, no overlays). Individual images carry their own color and style — they are the product, not decorative atmosphere. Outside the portfolio grid, the page is pure typography. There are no hero images, no background photographs, no decorative illustrations. Emoji glyphs (👁, 💜, 🎨, etc.) serve as the only colorful visual elements in the interface itself, acting as functional iconography rather than illustration."

  layout:

    info: "The page follows a max-width contained model (1200px centered) with a strict two-column editorial grid. Every major section opens with a massive left-aligned display headline (96px) in the left column, paired with dense body copy in the right column — this two-column reading row is the structural DNA and repeats throughout. Between major sections, a feature-stack component appears in the left column: a vertical list of icon+text items with the active item highlighted in deep navy, while the right column shows a corresponding description with its own display heading. The final section breaks to a 4-column image grid for portfolio thumbnails. Vertical rhythm is generous (48-80px between sections) but content density within each column is compact. No sidebar, no sticky header, no mega-menu — navigation is minimal. The overall feel is a scrollable broadsheet, not a dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #f2f2f2"
    - "card/surface: #ffffff"
    - "border: #e5e7eb"
    - "secondary text: #5a5e62"
    - "accent: #cfd2ec"
    - "active/selected: #0f1ea1"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "*Display Headline Block*: Full-width section opener. Left column: 96px Soehne weight 700, #000000, line-height 1.0, letter-spacing 0.96px. Directly below: 32px Soehne weight 400, #5a5e62, line-height 1.0. Right column: 16px Soehne weight 400, #5a5e62, max-width 480px, three short paragraphs of body copy."

    - "*Feature Tab Item*: Full-width row, 10px border-radius, #ffffff background, 1px #e5e7eb bottom border. Left: 40px circular icon avatar (9999px radius, white fill, emoji glyph centered). Right: 16px Soehne weight 400 label in #000000. Vertical padding 12px, horizontal padding 10px."

    - "*Active Feature Tab*: Same dimensions as Feature Tab Item, but background #0f1ea1, text #ffffff, and icon avatar switches to a gold-toned emoji. This is the ONLY place #0f1ea1 appears."

    - "*Content Card*: 10px border-radius, #ffffff background, 1px #e5e7eb border, 24px internal padding. No shadow. Contains 16-18px Soehne weight 400 body copy in #000000."

    - "*Image Grid Tile*: Square aspect ratio, no border, no radius. Below: 14px Soehne weight 400 caption in #000000, followed by a small ↗ link glyph also in #000000."

  type_system:

    info: "The type system is the most distinctive part of PencilBooth's visual identity. Soehne is the sole typeface at weights 400 and 700. The scale is extreme: body text sits at 16-18px while display headlines jump to 96px — a 5x size ratio that no conventional SaaS interface attempts. Line-height is tight (1.0-1.2 across the board), which means the 96px display headline is visually compact, not airy. Letter-spacing is uniformly 0.0100em — a barely perceptible expansion that softens Soehne's terminals without distorting them. Weight 700 carries all display and heading roles; weight 400 handles everything else. There is no medium, semibold, or light weight — this binary weight system reinforces the editorial binary of headline vs. body."

  color_restraint_principle:

    info: "With 1% colorfulness, PencilBooth operates under extreme chromatic discipline. The 99% achromatic field is not a limitation — it is the design. Every chromatic element (Deep Navy active state, Sky Blue wash, Pale Lavender tint, emoji avatars) earns its presence by performing a specific function: state indication, section separation, or iconographic representation. When building new pages, add color only when it can be justified by a functional role. Decorative color does not exist in this system. If a new page feels too gray, the answer is stronger typography and better spacing — not more color."

  similar_brands:

    - "**Are.na** — Same editorial-broadsheet layout philosophy — text-first two-column grids, massive display type, and color that appears only as functional punctuation rather than decoration"
    - "**Cargo Collective** — Creator-portfolio platform with a similar monochrome canvas and typographic hierarchy, where the artist's work itself provides all the color"
    - "**The Creative Independent** — Editorial long-form layout with oversized display headlines, tight body measure, and a restrained palette that lets the typography carry the visual weight"
    - "**Readymag** — Same typographic architecture approach — display type at extreme sizes, flat surfaces, hairline borders, and a single chromatic accent for state indication"
    - "**Field Notes (print)** — Shares the compact dense information design and monochrome editorial voice that makes PencilBooth feel more like a printed broadsheet than a web product"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-canvas-gray: #f2f2f2;
          --color-hairline-gray: #e5e7eb;
          --color-body-gray: #5a5e62;
          --color-muted-gray: #b2b2b2;
          --color-deep-navy: #0f1ea1;
          --color-sky-blue: #8fbaff;
          --color-pale-lavender: #cfd2ec;
        
          /* Typography — Font Families */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.14px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 0.32px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: 0.96px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-47: 47px;
          --spacing-48: 48px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48-80px;
          --card-padding: 24px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 10px;
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 2px;
          --radius-cards: 10px;
          --radius-icons: 9999px;
          --radius-buttons: 2px;
        
          /* Surfaces */
          --surface-canvas: #f2f2f2;
          --surface-card: #ffffff;
          --surface-tinted: #cfd2ec;
          --surface-active: #0f1ea1;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #000000;
          --color-paper-white: #ffffff;
          --color-canvas-gray: #f2f2f2;
          --color-hairline-gray: #e5e7eb;
          --color-body-gray: #5a5e62;
          --color-muted-gray: #b2b2b2;
          --color-deep-navy: #0f1ea1;
          --color-sky-blue: #8fbaff;
          --color-pale-lavender: #cfd2ec;
        
          /* Typography */
          --font-soehne: 'Soehne', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --tracking-caption: 0.12px;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --tracking-body-sm: 0.14px;
          --text-body: 16px;
          --leading-body: 1.2;
          --tracking-body: 0.16px;
          --text-subheading: 18px;
          --leading-subheading: 1.2;
          --tracking-subheading: 0.18px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1;
          --tracking-heading-sm: 0.32px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: 0.96px;
        
          /* Spacing */
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-47: 47px;
          --spacing-48: 48px;
          --spacing-100: 100px;
          --spacing-200: 200px;
        
          /* Border Radius */
          --radius-sm: 2px;
          --radius-lg: 10px;
          --radius-full: 9999px;
        }