guglieri___style_reference:
  info: "> monochrome typographic gallery. Every pixel is either ink-black, paper-white, or a gray between — hierarchy lives in the weight of Raveo Variable, never in color."

  theme: "dark"

  info: "Guglieri is a monochrome typographic gallery: pure obsidian canvas, one voice of custom variable display type at its heaviest weight, and zero chromatic noise. The entire system is achromatic — every interface element, border, and label lives on a grayscale between true black and pure white, with the only color in the experience coming from editorial imagery and artwork. Hierarchy is built through weight, size, and negative letter-spacing rather than color, with the custom Raveo Variable font pushing to weight 1000 to create visual mass without warmth. Components are stripped to their skeletons: pill buttons with hairline borders, generous section spacing, and text-driven navigation. The mood is a designer-critic's reading room — confident, editorial, anti-decorative."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Page background, card surfaces, primary canvas — the default stage for all content |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Primary text, pill button fills, display headlines on dark, thin borders for reverse-contrast components |"
    info: "| Carbon | `#111111` | `--color-carbon` | Input fields, secondary surface elevation, subtle dark borders — one shade above Obsidian for depth without contrast |"
    info: "| Graphite | `#1c1c1c` | `--color-graphite` | Elevated surface layer above the canvas — for overlay cards, tooltips, and floating panels |"
    info: "| Smoke | `#454545` | `--color-smoke` | Headline accent borders, secondary text, low-emphasis dividers |"
    info: "| Ash | `#575757` | `--color-ash` | Body-level borders, inactive dividers, low-contrast separators between sections |"
    info: "| Near Black | `#050505` | `--color-near-black` | Subtle hairlines and body borders that are nearly invisible against Obsidian |"

  tokens___typography:

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

    raveo_variable_variable___display_and_heading_font_at_its_heaviest_weight_1000__the_variable_axis_is_not_used___the_system_commits_to_maximum_weight_to_create_typographic_mass_without_chromatic_weight__sizes_scale_from_64px_display_down_to_12px_micro_labels_e_g__nav_items__new___feed__letter_spacing_tightens_aggressively_at_large_sizes__0_04em_at_64px___0_02em_at_22px_to_lock_the_glyphs_into_a_single_visual_block__font_features__blwf___cv03___cv04___cv09___cv11__activate_specific_stylistic_alternates___a_signature_typographic_fingerprint__no_web_safe_substitute_captures_this___inter__at_weight_900_is_the_closest_match__but_weight_and_openness_will_differ_____font_raveo_variable_variable:
      - "**Substitute:** Inter (weight 900) or Manrope (weight 800)"
      - "**Weights:** 1000"
      - "**Sizes:** 12px, 14px, 22px, 32px, 64px"
      - "**Line height:** 1.00, 1.06, 1.18, 1.20, 1.60"
      - "**Letter spacing:** -0.04em at 64px, -0.02em at 22px, normal at 12px"
      - "**OpenType features:** `'blwf', 'cv03', 'cv04', 'cv09', 'cv11'`"
      - "**Role:** Display and heading font at its heaviest weight (1000). The variable axis is not used — the system commits to maximum weight to create typographic mass without chromatic weight. Sizes scale from 64px display down to 12px micro-labels (e.g., nav items 'NEW', 'Feed'). Letter-spacing tightens aggressively at large sizes (-0.04em at 64px, -0.02em at 22px) to lock the glyphs into a single visual block. Font features 'blwf', 'cv03', 'cv04', 'cv09', 'cv11' activate specific stylistic alternates — a signature typographic fingerprint. No web-safe substitute captures this; 'Inter' at weight 900 is the closest match, but weight and openness will differ."

    system_sans_serif___secondary_utility_text___nav_links__metadata__timestamps__captions__weight_400_only__no_bold_variants__the_system_font_acts_as_a_quiet_complement_to_raveo_s_display_voice_____font_system_sans_serif:
      - "**Substitute:** system-ui, -apple-system, 'Segoe UI', Roboto"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Role:** Secondary utility text — nav links, metadata, timestamps, captions. Weight 400 only; no bold variants. The system font acts as a quiet complement to Raveo's display voice."

    inter_display___one_off_paragraph_text_at_22px___lighter_weight_than_raveo_at_the_same_size_creates_a_body_heading_tension_within_the_same_line_height____font_inter_display:
      - "**Substitute:** Inter"
      - "**Weights:** 400"
      - "**Sizes:** 22px"
      - "**Line height:** 1.18"
      - "**Role:** One-off paragraph text at 22px — lighter weight than Raveo at the same size creates a body/heading tension within the same line height"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| body-sm | 14px | 1.2 | — | `--text-body-sm` |"
      info: "| body | 22px | 1.18 | -0.44px | `--text-body` |"
      info: "| heading-sm | 32px | 1.06 | — | `--text-heading-sm` |"
      info: "| display | 64px | 1 | -2.56px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      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: "| 24 | 24px | `--spacing-24` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 116 | 116px | `--spacing-116` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 4px |"
      info: "| links | 8px |"
      info: "| pills | 50px |"
      info: "| buttons | 40px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 116px"
      - "**Card padding:** 40px"
      - "**Element gap:** 10px"

  components:

    pill_cta_button:
      role: "Primary action trigger — the only filled button in the system"

      info: "40px border-radius (full pill), 40px horizontal padding, ~28px vertical padding. White background (#ffffff) with a black arrow icon. No text label — the arrow IS the affordance. Hairline 1px border optional. Used for carousel next, send, go."

    outline_pill_button:
      role: "Secondary action with ghost treatment"

      info: "40-50px border-radius, white 1px border on Obsidian background, transparent fill. Arrow or dot inside. Inverts the primary pill: same shape, no fill."

    top_navigation_bar:
      role: "Primary site navigation"

      info: "Horizontal row, 8px element gap, 12px vertical padding. Brand block (name + local time) left, nav links right. Nav items in Raveo Variable at 12px weight 1000, tracking normal. Active item ('NEW') uses Paper White; inactive items use Ash (#575757) with 1px borders forming underline-style separators."

    display_headline:
      role: "Section and page titles"

      info: "Raveo Variable at 64px, weight 1000, line-height 1.0, letter-spacing -0.04em. Always Paper White on Obsidian. Two-line max. This is the loudest element on every page — it carries the brand voice alone."

    carousel_pagination_dots:
      role: "Indicates position within a horizontal scroll gallery"

      info: "Sequence of short horizontal lines (16-20px wide, 2-3px tall), Ash (#575757) inactive, Paper White active. Right-aligned under display headline. Spacing 10px between dots."

    section_transition_label:
      role: "Bridge between content blocks ('Next — About')"

      info: "Raveo Variable at 64px, weight 1000. Word 'Next' in Ash (#575757) at reduced opacity, dash separator, section name in Paper White. Sits at the leading edge of a full-bleed image or new section."

    footer_link_block:
      role: "Social and contact links in the page footer"

      two_column_layout__left_column: "intro text + email address in Raveo at 14-22px, weight 1000, Paper White. Right column: stacked social links (Twitter, Instagram, LinkedIn) at 32px Raveo weight 1000, no underlines, no bullets — just stacked heavy type."

    brand_header:
      role: "Identity lockup in the top-left corner"

      two_lines: "'Claudio Guglieri' in Raveo Variable 14px weight 1000 Paper White, with 'Local time — HH:MM City' beneath in system sans-serif 12px weight 400 Ash. No logo mark — the name IS the mark."

    bordered_link:
      role: "Inline text links with border underlines"

      info: "8px border-radius on hover or focus. Text in Paper White, 1px Ash border as underline. 8px padding on tap target."

    image_gallery_card:
      role: "Container for editorial imagery in carousel or grid"

      info: "No card surface — images float on Obsidian with 40px between cards. Optional 4px radius on individual images. Images are the content; no shadow, no border, no background plate."

  do_s_and_don_ts:

    do:
      - "Use Raveo Variable at weight 1000 for all headings and display text — never reduce to 700 or below; the heaviness is the signature"
      - "Set letter-spacing to -0.04em on 64px display text and -0.02em on 22-32px headings; let it breathe to 0 at 12px micro-labels"
      - "Maintain 0% colorfulness: every UI color must be achromatic. Never introduce a brand hue, accent, or state color"
      - "Use the 116px section gap between major content blocks; this generosity is what makes the page feel like a gallery, not a feed"
      - "Set pill buttons to 40-50px border-radius so they read as fully rounded, not as rounded rectangles"
      - "Place carousel pagination dots right-aligned directly under the display headline, spaced 10px apart"
      - "Activate the font features 'blwf', 'cv03', 'cv04', 'cv09', 'cv11' on every Raveo Variable instance — they are part of the typographic identity"

    don_t:
      - "Never introduce color — no blues, no greens, no warm tones. The only color allowed is grayscale and the hues within editorial imagery"
      - "Never set Raveo Variable below weight 1000; lighter weights break the heavy typographic voice"
      - "Never use a standard sans-serif for display text; Raveo's compressed, heavy form factor is the entire brand"
      - "Never add drop shadows, glows, or gradients — the system is flat by intent; depth comes from grayscale layering only"
      - "Never center body text — left-align everything except display headlines; the asymmetric grid is the layout voice"
      - "Never pad buttons less than 40px horizontally; pill shapes need space to read as pills, not chips"
      - "Never use icons in the nav row; nav items are heavy type only. The icon language is reserved for buttons and cursors"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Obsidian | `#000000` | Page canvas — the base floor for all content |"
    info: "| 1 | Carbon | `#111111` | Input fields and subtle elevation — one shade above the canvas for form surfaces |"
    info: "| 2 | Graphite | `#1c1c1c` | Floating panels, overlay cards, tooltips — two shades above the canvas |"
    info: "| 3 | Paper White | `#ffffff` | Inverted surface for filled pill buttons and the rare reverse-contrast element |"

  elevation:

    info: "The system is intentionally flat. No drop shadows, no glows, no gradients. Depth is implied by grayscale layering (Obsidian canvas → Carbon form surface → Graphite overlay) and by spacing alone. This flatness is the signature: every pixel of visual weight goes into typography, not into chrome."

  imagery:

    imagery_is_editorial_and_high_contrast: "black-and-white photography of working environments (desks, monitors, rooms) anchors content sections, while colorful 3D cursor renderings and graphic illustrations punctuate the hero — these are the only chromatic elements on the page, and they function as artwork within an otherwise monochrome frame. Images float on Obsidian with no borders or shadows; they are edge-to-edge or generous-margined, never thumbnail-sized. No icons in the UI itself — interaction symbols are reserved for buttons. Icon style in any UI context: none; the system relies on type and arrows. Photography treatment is documentary and candid (B&W, no color grading, no vignettes). The visual density is low: a few large images per page, each given room to breathe."

  layout:

    info: "Full-bleed dark page with max-width 1200px content container. Hero is a single display headline right-aligned beside a left-aligned image gallery, with carousel controls beneath the headline. Sections are separated by 116px vertical gaps with no dividers or alternating bands — the rhythm comes from spacing alone. The footer is a two-column block: left column is contact text, right column is stacked social links in heavy type, both on the same Obsidian surface. Navigation is a sticky top bar with brand left and nav right. Content sections use asymmetric compositions (text-right/image-left, or full-bleed image with overlay type) rather than centered stacks. The 'Next — Section' transition pattern is a recurring device: a large display label in mixed gray and white at the leading edge of the next section."

  agent_prompt_guide:

    quick_color_reference:
    - "background: #000000"
    - "surface: #111111"
    - "elevated surface: #1c1c1c"
    - "text: #ffffff"
    - "border: #575757"
    - "accent: none"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Display headline block**: 64px Raveo Variable weight 1000, color #ffffff, line-height 1.0, letter-spacing -2.56px. Right-aligned within a 1200px max-width container. Sits on #000000 canvas with 116px space above and below."

    - "**Pill navigation button**: 12px Raveo Variable weight 1000, text #ffffff (active) or #575757 (inactive). No background, no border. 8px gap between items, 12px vertical padding. Horizontal row, left-aligned brand / right-aligned nav."

    - "**Footer social link stack**: 32px Raveo Variable weight 1000, color #ffffff, line-height 1.06, letter-spacing -0.64px. Three items stacked vertically with 0px gap between them. No bullets, no underlines, no icons. Left-aligned in a two-column footer layout."

    - "**Section transition label**: 64px Raveo Variable weight 1000. First word in #575757, em-dash, second word in #ffffff. Left-aligned, 1200px max-width, sitting at the top edge of a full-bleed B&W image section."

    - "**Carousel pagination**: Five short horizontal bars (18px wide, 2px tall), spaced 10px apart, right-aligned. Bars 1-4 in #575757, bar 5 (current) in #ffffff. Sits 24px below the display headline."

  similar_brands:

    - "**Are.na** — Same ultra-minimal dark canvas with no chrome, left-aligned typographic navigation, and editorial image blocks floating on a near-black surface"
    - "**Rauno Freiberg** — Personal portfolio with monochrome palette, custom variable display type, and large negative-tracked headlines as the primary brand element"
    - "**Vercel Design** — Pure black background, system sans-serif body, and one display weight carrying all hierarchy — minimal UI lets the type do the work"
    - "**Minimal Gallery (independent designers)** — Treats the personal site as a gallery wall — generous spacing, B&W editorial photography, and no decorative UI elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-carbon: #111111;
          --color-graphite: #1c1c1c;
          --color-smoke: #454545;
          --color-ash: #575757;
          --color-near-black: #050505;
        
          /* Typography — Font Families */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-raveo-variable-variable: 'Raveo Variable Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System Sans-Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 22px;
          --leading-body: 1.18;
          --tracking-body: -0.44px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.06;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -2.56px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-w1000: 1000;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-116: 116px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 116px;
          --card-padding: 40px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 28px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
        
          /* Named Radii */
          --radius-cards: 4px;
          --radius-links: 8px;
          --radius-pills: 50px;
          --radius-buttons: 40px;
        
          /* Surfaces */
          --surface-obsidian: #000000;
          --surface-carbon: #111111;
          --surface-graphite: #1c1c1c;
          --surface-paper-white: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-paper-white: #ffffff;
          --color-carbon: #111111;
          --color-graphite: #1c1c1c;
          --color-smoke: #454545;
          --color-ash: #575757;
          --color-near-black: #050505;
        
          /* Typography */
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-raveo-variable-variable: 'Raveo Variable Variable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-sans-serif: 'System Sans-Serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter-display: 'Inter Display', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-body-sm: 14px;
          --leading-body-sm: 1.2;
          --text-body: 22px;
          --leading-body: 1.18;
          --tracking-body: -0.44px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.06;
          --text-display: 64px;
          --leading-display: 1;
          --tracking-display: -2.56px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-40: 40px;
          --spacing-116: 116px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-3xl: 28px;
          --radius-3xl-2: 40px;
          --radius-full: 50px;
        }