andrei_rybin___style_reference:
  info: "> monochrome atelier notebook — a designer's sketchbook where phone screens are pinned like contact sheets on a white wall"

  theme: "light"

  a_monochrome_atelier_notebook: "a near-pure black-on-white canvas where the only visual event is typography against a generous grid of project tiles. Every surface is paper-white; every element either ink-black or a single shade of graphite for secondary information — there is no accent color, no gradient, no fill that isn't neutral. Components are stripped to their function: a pill-shaped label names the work, a circular arrow button invites the next view, thin 1px borders quietly separate sections. The product is the showcase, so the system recedes — the phone mockups carry all the visual weight while the framework stays silent."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper | `#ffffff` | `--color-paper` | Page background, card surfaces, image holders — the dominant canvas; everything sits on this |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, link text, icon strokes, thin section dividers — the only mark-making color |"
    info: "| Graphite | `#858585` | `--color-graphite` | Secondary text, muted metadata, and softer border lines that recede behind primary ink |"
    info: "| Stone | `#8e8e90` | `--color-stone` | Cool-toned border and divider strokes for borders that need a hairline without competing with Ink |"

  tokens___typography:

    sans_serif___sans_serif___detected_in_extracted_data_but_not_described_by_ai____font_sans_serif:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Role:** sans-serif — detected in extracted data but not described by AI"

    inter___body_copy__project_captions__and_the_larger_intro_paragraphs__used_at_a_single_weight___regularity_is_the_signature__no_bold_headlines_shout__no_light_weight_whispers_____font_inter:
      - "**Substitute:** system-ui, -apple-system, 'Segoe UI', sans-serif"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 24px"
      - "**Line height:** 1.20, 1.23, 1.30"
      - "**Letter spacing:** -0.0170em"
      - "**Role:** Body copy, project captions, and the larger intro paragraphs. Used at a single weight — regularity IS the signature; no bold headlines shout, no light weight whispers."

    system_ui_sans_serif___small_ui_labels__tag_text__icon_adjacent_microcopy__appears_wherever_a_single_token_of_body_size_type_recurs___utility__not_statement_____font_system_ui_sans_serif:
      - "**Substitute:** inherit Inter or use system sans"
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.20"
      - "**Letter spacing:** normal"
      - "**Role:** Small UI labels, tag text, icon-adjacent microcopy. Appears wherever a single token of body-size type recurs — utility, not statement."

    sfnstext____sfnstext___detected_in_extracted_data_but_not_described_by_ai____font_sfnstext:
      - "**Weights:** 400"
      - "**Sizes:** 12px"
      - "**Line height:** 1.2"
      - "**Letter spacing:** -0.017"
      - "**Role:** .SFNSText — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.2 | — | `--text-caption` |"
      info: "| subheading | 24px | 1.23 | -0.4px | `--text-subheading` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 10 | 10px | `--spacing-10` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 40px |"
      info: "| cards | 8px |"
      info: "| icons | 16px |"
      info: "| buttons | 9999px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 120px"
      - "**Card padding:** 16px"
      - "**Element gap:** 10px"

  components:

    project_tile_card:
      role: "Container for a single showcase image (phone mockup) with label and navigation arrow"

      info: "White paper surface, 8px radius, no border, 16px internal padding. A pill label sits top-left at 40px corner radius with 1px Ink border, 10px vertical / 8px horizontal padding, Inter 12px. A 32px circular arrow button with 1px Ink border sits top-right. Caption text (Inter 12px Graphite) sits centered beneath the card with 8px gap."

    pill_label:
      role: "Project category tag overlaid on each card"

      info: "Fully rounded capsule (40px radius) on white paper. 1px Ink border, 6px padding top/bottom, 8px padding left/right. Text: Inter 12px, color Ink, letter-spacing -0.0170em."

    arrow_navigation_button:
      role: "Compact circular control to open a project"

      info: "32px circle, white fill, 1px Ink border, centered right-pointing arrow icon at 16px radius geometry. No shadow, no fill state — the border is the only affordance."

    header_bar:
      role: "Top-of-page identity, nav, and social link strip"

      info: "Full-bleed white band with 16px padding. Four text columns separated by generous white space: name+role (left), showreel link (center-left), social links (center-right), index+about (right). All Inter 12px, Ink, letter-spacing -0.0170em. No dividers between columns — whitespace carries the rhythm."

    intro_block:
      role: "Two-column intro: contact email on the left, welcome paragraph on the right"

      info: "40px row gap between the email and the welcome copy. Email is Inter 12px Ink; the welcome paragraph is Inter 24px Graphite at line-height 1.23 — this is the largest type in the system, used exactly once."

    project_grid:
      role: "Responsive grid of project tiles filling the rest of the page"

      info: "5 columns at full width, 16px gutters. Each tile occupies a fixed aspect slot (roughly 3:5 portrait). The grid recedes visually — its job is to hold images, not to assert itself."

    caption_label:
      role: "One-line description under each tile describing the project type"

      info: "Inter 12px, Graphite (#858585), centered, 8px below the card. Format is 'X → Y' or a short noun phrase."

  do_s_and_don_ts:

    do:
      - "Keep the entire interface achromatic — Ink on Paper, with Graphite and Stone for soft hierarchy."
      - "Use 8px radius for project tiles, 16px for icon containers, 40px (or 9999px) for pill labels and circular buttons."
      - "Set body and caption type at Inter 12px with -0.0170em letter-spacing; reserve 24px Inter for the single intro paragraph."
      - "Separate header columns with whitespace alone — no vertical rules or dividers between nav items."
      - "Use 10px element gap inside cards and 120px section gap between page bands."
      - "Let image weight carry the page; the system should be invisible behind the work."

    don_t:
      - "Do not introduce any chromatic color — no accent, no brand hue, no semantic state color."
      - "Do not use multiple font weights — Inter 400 is the only voice; no bold, no light, no italic."
      - "Do not apply shadows, gradients, or fills to tiles or buttons; borders are the only separator."
      - "Do not center body text — captions and metadata are left- or context-aligned, not centered except where a tile naturally centers its caption beneath."
      - "Do not use a border radius below 8px on cards or above 16px on icons — the radii carry the system's softness and must stay consistent."
      - "Do not add navigation patterns (hamburgers, sidebars, mega-menus); the header is a single text strip."
      - "Do not break the grid with asymmetric or overlapping tile placements — the grid is the page's structural truth."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper | `#ffffff` | Full-page canvas and the back of every card and image tile |"
    info: "| 2 | Ink Mask | `#000000` | The near-black surfaces that appear inside phone-screen mockups — not a page surface, but defines the photo-to-canvas contrast |"

  elevation:

    info: "The design uses no shadow, no blur, no z-axis elevation. Depth is implied only by the contrast of Ink on Paper, with 1px borders doing all the work that shadows would do in a richer system. Flatness is the philosophy."

  imagery:

    info: "Photography-style product mockups of iPhone screens are the only visual content — tightly cropped, high-contrast, most showing dark UI inside white phone frames. Each card is a portrait-ratio still. No lifestyle photography, no illustrations, no abstract graphics. The phone IS the hero; the system frames it like a contact sheet."

  layout:

    info: "Full-bleed page on a white canvas, max-width ~1440px. Header is a single row of four text blocks separated by whitespace (name, showreel, social, index). Below sits a two-column intro: contact email left, welcome paragraph right, separated by 40px gap and generous horizontal space. The main body is a 5-column responsive grid of project tiles at 16px gutters, each tile containing a pill label, a circular arrow button, an image, and a centered caption beneath. Section gap of 120px separates the intro from the grid; the grid itself flows without internal section breaks."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #000000 (Ink)"
    - "background: #ffffff (Paper)"
    - "border: #858585 (Graphite) or #8e8e90 (Stone) for soft rules, #000000 (Ink) for structural borders"
    - "muted text: #858585 (Graphite)"
    - "primary action: no distinct CTA color"

    info: "Example Component Prompts"
    - "Header strip: white background, full-bleed within 1440px max-width, 16px padding. Four text items in a single row (left/center-left/center-right/right), all Inter 12px weight 400, color #000000, letter-spacing -0.0170em. No dividers between items — whitespace only."
    - "Project tile: white background, 8px border-radius, 16px padding. A pill label at top-left: 40px border-radius, 1px solid #000000 border, 6px padding top/bottom and 8px left/right, text Inter 12px #000000. A 32px circular button at top-right: white fill, 1px solid #000000 border, centered right-arrow icon."
    - "Intro block: two columns. Left column: Inter 12px #000000 email link. Right column: Inter 24px #858585, line-height 1.23, letter-spacing -0.4px. 40px row gap between rows."
    - "Tile caption: Inter 12px #858585, centered, 8px below the tile card."
    - "Project grid: 5 equal columns, 16px column gap, each tile showing an image that fills its slot. No borders, no shadows between tiles."

  similar_brands:

    - "**Cargo Collective portfolios** — Same monochrome grid-of-tiles approach with generous whitespace and minimal chrome — content is the design."
    - "**Readymag project pages** — Editorial-grade minimal layouts where typography does all the work and the system disappears behind showcased work."
    - "**Tobias van Schneider portfolio** — Single-weight type, achromatic palette, and large project tiles arranged in a quiet grid — restraint as a visual language."
    - "**Linear app marketing pages** — Crisp type, flat surfaces, no decorative gradients, and a strong reliance on whitespace and thin borders to organize content."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper: #ffffff;
          --color-ink: #000000;
          --color-graphite: #858585;
          --color-stone: #8e8e90;
        
          /* Typography — Font Families */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui-sans-serif: 'system-ui (sans-serif)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfnstext: '.SFNSText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-subheading: 24px;
          --leading-subheading: 1.23;
          --tracking-subheading: -0.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 120px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 40px;
        
          /* Named Radii */
          --radius-tags: 40px;
          --radius-cards: 8px;
          --radius-icons: 16px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-paper: #ffffff;
          --surface-ink-mask: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper: #ffffff;
          --color-ink: #000000;
          --color-graphite: #858585;
          --color-stone: #8e8e90;
        
          /* Typography */
          --font-sans-serif: 'sans-serif', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-system-ui-sans-serif: 'system-ui (sans-serif)', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-sfnstext: '.SFNSText', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.2;
          --text-subheading: 24px;
          --leading-subheading: 1.23;
          --tracking-subheading: -0.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-16: 16px;
          --spacing-28: 28px;
          --spacing-40: 40px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-2xl: 16px;
          --radius-3xl: 40px;
        }