clase_bcn___style_reference:
  info: "> editorial gallery on white wall"

  theme: "light"

  info: "Clase bcn is an editorial gallery on a white wall: a branding agency whose portfolio reads like a museum catalogue. The interface is almost invisible — text, hairline dividers, and full-bleed project imagery do all the work. A single sans-serif (Suisse Int'l) at one weight (400) carries every element, from navigation labels to oversized project titles. Whitespace is generous and structural: project cards span the full viewport with titles and subtitles overlaid directly on photography. The only interactions are text links with arrow indicators; there are no buttons, no fills, no shadows, no decorative UI chrome. Color appears as content — individual project case studies bring their own palettes as background fills — while the chrome stays achromatic and quiet."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surface base, text on dark cards |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Primary text, hairline borders, nav labels — the structural anchor of every element |"
    info: "| Carbon | `#0a0a0a` | `--color-carbon` | Secondary text and deep surfaces where pure black reads too harsh |"
    info: "| Concrete | `#939393` | `--color-concrete` | Muted navigation labels, secondary link text, inactive nav state |"
    info: "| Ash | `#aaaaaa` | `--color-ash` | Tertiary link borders and subdued annotation text |"
    info: "| Plaster | `#e8e8e8` | `--color-plaster` | Subtle surface division, alternating card backgrounds |"
    info: "| Sumi | `#0a0000` | `--color-sumi` | Near-black project card background — reads as deepest neutral |"
    info: "| Slate Night | `#262a36` | `--color-slate-night` | Project card background — slightly cool dark, content-driven not UI |"
    info: "| Terracotta Blush | `#efccbe` | `--color-terracotta-blush` | Project card background — warm content fill, not a UI accent |"
    info: "| Verdant | `#43d491` | `--color-verdant` | Project card background — vivid content fill, not a UI accent |"

  tokens___typography:

    suisseintl_regular___suisseintl_regular___detected_in_extracted_data_but_not_described_by_ai____font_suisseintl_regular:
      - "**Weights:** 400"
      - "**Sizes:** 24px, 28px, 45px"
      - "**Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44"
      - "**Role:** SuisseIntl-Regular — detected in extracted data but not described by AI"

    suisse_int_l___single_typeface_at_a_single_weight_carries_the_entire_interface___navigation__body__and_display__the_refusal_to_use_a_bold_or_italic_weight_forces_hierarchy_through_size__line_height__and_whitespace_alone__the_variable_line_heights_1_11_for_tight_display_stacks__1_79_2_44_for_body_show_that_this_one_weight_is_stretched_across_very_different_densities_____font_suisse_intl:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk, Helvetica Now"
      - "**Weights:** 400"
      - "**Sizes:**"
      - "**Line height:** 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44"
      - "**Role:** Single typeface at a single weight carries the entire interface — navigation, body, and display. The refusal to use a bold or italic weight forces hierarchy through size, line-height, and whitespace alone. The variable line-heights (1.11 for tight display stacks, 1.79–2.44 for body) show that this one weight is stretched across very different densities."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 24px | 1.17 | — | `--text-caption` |"
      info: "| subheading | 28px | 1.21 | — | `--text-subheading` |"
      info: "| heading | 45px | 1.11 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 25 | 25px | `--spacing-25` |"
      info: "| 100 | 100px | `--spacing-100` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| images | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Section gap:** 100px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    top_navigation_bar:
      role: "Minimal text-only site header"

      info: "Transparent background sitting directly on the page canvas. No logo mark, no fill, no border-bottom. Left side: five text labels (Cl, Projects, Studio, Contact, Tips) separated by ~20px gaps, 24px Suisse Int'l, #000000 active and #939393 inactive. Right side: language selector ('English') in the same treatment. No sticky behavior, no shadow, no padding beyond vertical breathing room."

    statement_headline:
      role: "Opening page declaration"

      info: "A single block of body-length text set at the largest type size (45px), line-height 1.11, color #000000, left-aligned. No separate label, no eyebrow, no CTA below — the statement IS the hero. Occupies the top quarter of the page with generous margin below before the first project card."

    full_bleed_project_card:
      role: "Portfolio case study entry"

      info: "Each project spans the full viewport width with zero border-radius. A background fill (project-specific: #43d491, #0a0000, #efccbe, #262a36, or a photograph) covers the card. Overlay text sits in the top-left corner with 20px padding from all edges: project name at 28px line-height 1.21 #000000, subtitle at 24px line-height 1.17 #000000, then a 'See the case →' text link. No hover state, no shadow, no border — the card edge is defined purely by where the next card begins."

    photographic_project_card:
      role: "Image-led portfolio entry"

      info: "Same structural treatment as the colored Project Card but the background is a full-bleed photograph. Text overlay uses the same 20px padding, 28px title, 24px subtitle, and text link. Typography remains #000000 on light imagery; white or near-black text on dark imagery. No gradient overlays or scrims — readability is expected from image choice."

    text_link_with_arrow:
      role: "The only interactive element in the system"

      info: "Plain text label followed by a right arrow glyph (→). 24px Suisse Int'l weight 400, color #000000. No underline, no button fill, no border, no padding. Spacing between label and arrow is tight. This is the universal interaction pattern — it replaces every conventional button across the site."

    footer:
      role: "Minimal page closer"

      info: "Same 20px horizontal padding as project cards. Contains text links and copyright in 24px #000000. No social icons, no newsletter form, no decorative elements. The footer's job is to be quiet and invisible until you scroll there."

  do_s_and_don_ts:

    do:
      - "Use Suisse Int'l (or a neo-grotesque substitute like Inter) at weight 400 for every element — no bold, no italic, no second family"
      - "Let project imagery and project color fills carry all visual variety; keep all UI chrome in #000000 and #ffffff"
      - "Use 20px padding consistently for all text-block insets (navigation, card text, footer)"
      - "Separate projects with 100px vertical breathing room — let each card exist in its own visual silence"
      - "Mark every interaction as a plain text link with a → arrow, never as a filled or outlined button"
      - "Scale hierarchy through font size and line-height only — 24px for body, 28px for subtitles, 45px for display"
      - "Keep border-radius at 0 across all elements — corners are sharp, the page is a grid"

    don_t:
      - "Don't introduce buttons, pills, chips, or any filled interactive component — this system has no buttons"
      - "Don't add shadows, gradients, or border effects to cards or images — surface depth comes from color contrast alone"
      - "Don't use bold or semibold weights — weight 400 is the only voice; hierarchy is size-only"
      - "Don't use #43d491, #efccbe, or #262a36 as UI accents — they belong only inside project card backgrounds"
      - "Don't add a logo mark, wordmark treatment, or branded icon — the word 'Cl' in the nav is the entire identity mark"
      - "Don't constrain the layout to a max-width container — project cards must be full-bleed"
      - "Don't add hover animations, transitions, or micro-interactions — the site reads as static, like a printed catalogue"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Default page background and card base for light projects |"
    info: "| 1 | Plaster | `#e8e8e8` | Subtle off-white for content sections that need tonal contrast |"
    info: "| 2 | Carbon | `#0a0a0a` | Deepest project card fill — white text sits on top |"

  elevation:

    info: "The system has no shadows. Depth is communicated entirely through color contrast between adjacent surface fills (white canvas → photographic card → colored card → dark card) and through generous vertical whitespace between sections. A 1px black border is the strongest structural device in use, and even that is rare."

  imagery:

    info: "Photography is full-bleed and architectural — gallery interiors, product shots on neutral backgrounds, campaign artwork. Images are raw-edged with no rounded corners, no shadows, and no masks. The treatment is documentary, not stylized: subjects (museum spaces, furniture, concert halls) are presented at their natural aspect ratio, cropped only by the viewport. There are no people, no lifestyle scenes, no stock-style compositions. Illustration is absent; the only graphic element is the Kave Home chair sketch, which is hand-drawn line work on white — consistent with the editorial-print language. Icons are absent; navigation is text-only."

  layout:

    info: "Full-bleed layout with no max-width constraint. The page is a vertical stack of full-viewport-width project cards separated by whitespace, preceded by a minimal text-only navigation and a single oversized statement headline. The top nav is a single horizontal row: five left-aligned links, one right-aligned language label. The statement headline sits at the top of the content area, left-aligned, occupying roughly 15% of the page height. Below it, project cards stack vertically — each card fills the viewport width, contains its title/subtitle/link in the top-left corner with 20px inset, and flows directly into the next card with no gap or divider. There are no sidebar, no multi-column grids, no card-of-cards arrangements. The rhythm is: statement → project → project → project → footer, with each project given equal visual weight."

  agent_prompt_guide:

  quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "muted text: #939393"
    - "project card surface: project-specific (no fixed UI accent)"
    - "primary action: no distinct CTA color"

  example_component_prompts:

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Full-Bleed Project Card (Photographic)** — 100vw width, viewport-tall, no border-radius. Background is a full-bleed photograph. Top-left inset of 20px contains: project name at 28px line-height 1.21 #000000, subtitle at 24px line-height 1.17 #000000, then a 'See the case →' text link at 24px #000000. No overlay, no scrim, no border."

    - "**Full-Bleed Project Card (Color Fill)** — 100vw width, ~60vh tall, no border-radius. Background fill is a single solid color (e.g. #43d491, #efccbe, #262a36, or #0a0000). Same 20px top-left text inset as photographic cards. Text color adjusts: #000000 on light fills, #ffffff on dark fills."

    - "**Text Link with Arrow** — 24px Suisse Int'l weight 400, #000000, followed by a → arrow glyph at the same size. No underline, no button background, no border, no padding. The arrow has ~4px space between it and the label text. This is the system's only interaction component."

    - "**Top Navigation** — Transparent row on #ffffff, no border-bottom, no background fill. Left group: 'Cl · Projects · Studio · Contact · Tips' at 24px #000000 separated by ~20px gaps, with 'Cl' as the active/brand label. Right group: 'English' at 24px #939393. No logo, no icons, no sticky behavior."

  similar_brands:

    - "**Pentagram** — Same editorial-portfolio language — full-bleed project imagery, minimal text-only navigation, no buttons or decorative UI chrome"
    - "**Manual (manualcreative.com)** — Single-weight sans-serif at large display sizes, project cards as full-viewport images with overlaid text, zero interaction chrome"
    - "**Hasselblad Foundation** — Museum-catalogue restraint — generous whitespace, single typeface, photography as the primary content, text links with arrows as the only affordance"
    - "**Studio Dumbar** — Dutch-design agency portfolio discipline: monochrome UI, project case studies as full-bleed images, minimal nav, no decorative elements"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #0a0a0a;
          --color-concrete: #939393;
          --color-ash: #aaaaaa;
          --color-plaster: #e8e8e8;
          --color-sumi: #0a0000;
          --color-slate-night: #262a36;
          --color-terracotta-blush: #efccbe;
          --color-verdant: #43d491;
        
          /* Typography — Font Families */
          --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 24px;
          --leading-caption: 1.17;
          --text-subheading: 28px;
          --leading-subheading: 1.21;
          --text-heading: 45px;
          --leading-heading: 1.11;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-100: 100px;
        
          /* Layout */
          --section-gap: 100px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-plaster: #e8e8e8;
          --surface-carbon: #0a0a0a;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-carbon: #0a0a0a;
          --color-concrete: #939393;
          --color-ash: #aaaaaa;
          --color-plaster: #e8e8e8;
          --color-sumi: #0a0000;
          --color-slate-night: #262a36;
          --color-terracotta-blush: #efccbe;
          --color-verdant: #43d491;
        
          /* Typography */
          --font-suisseintl-regular: 'SuisseIntl-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-suisse-intl: 'Suisse Int'l', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 24px;
          --leading-caption: 1.17;
          --text-subheading: 28px;
          --leading-subheading: 1.21;
          --text-heading: 45px;
          --leading-heading: 1.11;
        
          /* Spacing */
          --spacing-20: 20px;
          --spacing-25: 25px;
          --spacing-100: 100px;
        }