gustavo_faria_____style_reference:
  info: "> Editorial monograph on white paper"

  theme: "light"

  info: "Gustavo Faria's portfolio operates as a printed monograph on white paper: an editorial spread where one massive serif date range dominates the right column while a compact bio and portrait anchor the left. The system is almost aggressively monochrome — four grays/black on white, no decorative color, no shadows, no rounded corners. Typography does all the heavy lifting: a custom display serif at 125-142px creates scale contrast against 16px system body text, and negative letter-spacing tightens the display letters into a single confident statement. Content is organized as a work selection table — project name, category, year — separated by hairline rules. The atmosphere is that of an art director's contact sheet: restrained, intentional, every element earning its space."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, card surfaces — the foundational surface on which all content sits |"
    info: "| Charcoal | `#282828` | `--color-charcoal` | Primary text, hairline borders, structural rules — softer than pure black, reduces glare for long reading |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Display text fill, link borders, maximum contrast elements |"
    info: "| Ash Gray | `#dcdcdc` | `--color-ash-gray` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |"
    info: "| Flesh Peach | `#efc4b2` | `--color-flesh-peach` | Warm surface wash behind portrait and select portfolio imagery — the only chromatic surface, used sparingly as atmospheric punctuation |"

  tokens___typography:

    apple_system___body_text__navigation__bio_description__and_work_list_content___system_font_chosen_for_zero_loading_neutrality__letting_the_custom_display_serif_own_the_page_s_identity__the_system_choice_is_deliberate__it_disappears_so_the_display_type_can_speak_____font_apple_system:
      - "**Substitute:** SF Pro Text or system-ui"
      - "**Weights:** 400"
      - "**Sizes:** 16px"
      - "**Line height:** 1.00"
      - "**OpenType features:** `\"dlig\" 0, \"hlig\" 0, \"liga\" 0, \"rlig\" 0, \"smcp\" 0`"
      - "**Role:** Body text, navigation, bio description, and work list content — system font chosen for zero-loading neutrality, letting the custom display serif own the page's identity. The system choice is deliberate: it disappears so the display type can speak."

    custom_21879___custom_49610___display_serif_used_for_the_signature__2019___2025__hero_statement_at_125_142px_with_weight_400_and_tight_negative_tracking__the_12px_instance_serves_as_small_caps_section_labels__the_extreme_size_jump_from_12px_to_125px_creates_the_page_s_defining_scale_contrast__substitute__gt_sectra__editorial_new__or_tobias_for_similar_editorial_character_____font_custom21879_custom49610:
      - "**Substitute:** GT Sectra or Editorial New"
      - "**Weights:** 400, 700"
      - "**Sizes:** 12px, 125px, 142px"
      - "**Line height:** 0.81, 1.00, 1.02, 1.17, 1.67"
      - "**Letter spacing:** -0.047em (-6.7px at 142px)"
      - "**OpenType features:** `\"dlig\" 0, \"hlig\" 0, \"liga\" 0, \"rlig\" 0, \"smcp\" 0`"
      - "**Role:** Display serif used for the signature '2019 — 2025' hero statement at 125-142px with weight 400 and tight negative tracking; the 12px instance serves as small-caps section labels. The extreme size jump from 12px to 125px creates the page's defining scale contrast. Substitute: GT Sectra, Editorial New, or Tobias for similar editorial character."

    custom_49610___custom_49610___detected_in_extracted_data_but_not_described_by_ai____font_custom49610:
      - "**Weights:** 400"
      - "**Sizes:** 125px"
      - "**Line height:** 1.02"
      - "**OpenType features:** `\"dlig\" 0, \"hlig\" 0, \"liga\" 0, \"rlig\" 0, \"smcp\" 0`"
      - "**Role:** custom_49610 — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.67 | -0.56px | `--text-caption` |"
      info: "| body | 16px | 1.17 | — | `--text-body` |"
      info: "| display-lg | 125px | 1.02 | — | `--text-display-lg` |"
      info: "| display | 142px | 0.81 | -6.67px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"

    border_radius:

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

    layout:

      - "**Section gap:** 48-64px"
      - "**Card padding:** 0px"
      - "**Element gap:** 8px"

  components:

    display_headline:
      role: "Hero-level typographic statement"

      info: "Massive custom serif at 125-142px, weight 400, letter-spacing -0.047em, color #000000. Line-height 0.81-1.02 creates tight vertical rhythm. No background, no border — pure typographic presence. Used for date ranges and title statements that anchor a page."

    work_list_row:
      role: "Project entry in work selection"

      three_column_row: "project name (left, bold weight 700, #282828), category (center, weight 400, #282828 or #dcdcdc), year (right, weight 400, #dcdcdc). Separated by 1px solid bottom border in #dcdcdc. Padding 12-16px vertical. No hover state, no background change."

    bio_block:
      role: "Personal introduction"

      info: "Small body text block in -apple-system 16px, color #282828. Includes name as bold/link, age, location, and current work. Left-aligned in sidebar column. No background or border — sits directly on canvas."

    hairline_divider:
      role: "Structural separator between sections"

      info: "1px solid line, #dcdcdc or #282828. Full-width or column-width. The only structural element separating work list rows and page sections."

    portrait_card:
      role: "Personal image with hover label"

      info: "Square image container, 0px radius, on #efc4b2 background. Small '(+)' or '(Hover Here)' label overlaid at center in -apple-system 12px, #282828. No shadow, no border."

    navigation_link:
      role: "Top-level navigation item"

      info: "Plain text link in -apple-system 16px, weight 400, color #282828. 1px solid #282828 bottom border on active/hover. No padding, no background. Sits inline with other nav items with horizontal gap."

    section_label:
      role: "Small heading for content groups"

      info: "Uppercase or sentence-case label in -apple-system 12px, weight 400, color #dcdcdc. Marks sections like 'Work Selection' — intentionally muted to recede against project names."

    brand_mark:
      role: "Identity lockup in header"

      info: "'GUSTAVO Faria ©' in -apple-system 16px, weight 700, color #282828. Mixed case with capital first letter and lowercase. Sits at top-left as the page's identity anchor."

    portfolio_thumbnail:
      role: "Preview image of work piece"

      info: "Full-width or half-width image, 0px radius, no border, no shadow. May have a colored background (peach, green gradient) visible as part of the artwork itself. No caption or overlay chrome."

  do_s_and_don_ts:

    do:
      - "Use the custom display serif at 125-142px for hero statements with letter-spacing -0.047em"
      - "Separate work list rows with 1px solid #dcdcdc bottom borders"
      - "Set all text in #282828 on #ffffff — avoid pure #000000 for body text to reduce eye strain"
      - "Maintain 0px border-radius on all elements — this is a flat, print-inspired system"
      - "Use -apple-system for all UI and body text; the system font should disappear so the display serif owns the page"
      - "Use #efc4b2 as the only chromatic surface, and only behind imagery — never as a UI background"
      - "Anchor pages with a single massive display headline; let everything else stay small and quiet"

    don_t:
      - "Don't add shadows, gradients, or elevation effects — the design is intentionally flat"
      - "Don't introduce accent colors, hover states with background fills, or decorative gradients"
      - "Don't use border-radius greater than 0px — sharp corners are core to the editorial identity"
      - "Don't mix the display serif into body text or UI labels — it belongs only at hero scale"
      - "Don't use bold or heavy weights for body text — the 400 weight system font should stay calm"
      - "Don't crowd the layout with multiple visual elements per section — let whitespace and scale do the work"
      - "Don't use #000000 for borders or secondary text — reserve it for display text and high-contrast moments only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | Paper Canvas | `#ffffff` | Primary page background |"
    info: "| 2 | Flesh Surface | `#efc4b2` | Warm atmospheric wash behind portrait imagery |"

  elevation:

    info: "No shadows, no depth. The design is completely flat — separation between elements is achieved through whitespace, hairline borders, and scale contrast rather than elevation. This is a print-design sensibility applied to the web: elements sit on the same plane, divided by rules."

  imagery:

    photography_dominates: "a single square portrait with a warm peach background anchors the left sidebar, and portfolio thumbnails appear as rectangular or square crops with their own contextual backgrounds (peach tones, green gradients). Images are sharp-edged with 0px radius, no overlays, no masks. The portrait is the only photographic element with a visible label ('(+) Hover Here'). Portfolio thumbnails may include typography or graphic elements as part of the artwork itself. No illustrations, no icons, no 3D renders — imagery is documentary and personal, treated as printed plates."

  layout:

    two_column_asymmetric_layout: "a narrow left sidebar (roughly 25% width) holds the bio, portrait, and identity mark; the right column (roughly 75%) holds the massive display headline and the work selection list. The hero '2019 — 2025' headline spans the full width of the right column at ~140px. Below it, the work selection is a full-width three-column table (project | category | year) with hairline dividers. The page flows vertically as a single long scroll with no section breaks beyond the work list rows. Navigation sits inline at the top-left. The overall rhythm is: compact sidebar → massive typographic statement → dense list of work entries. Max-width is effectively full-bleed, with padding from viewport edges only."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #282828"
    - "background: #ffffff"
    - "border: #dcdcdc"
    - "accent surface: #efc4b2"
    - "ink black: #000000"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a hero section: white #ffffff background. Display headline '2019 — 2025' at 142px in custom display serif, weight 400, #000000, letter-spacing -0.047em, line-height 0.81. No other elements — let the type fill the space."

    - "Create a work list row: three-column layout (60% / 25% / 15%). Project name in -apple-system 16px weight 700 #282828, category in 16px weight 400 #dcdcdc, year in 16px weight 400 #dcdcdc right-aligned. 1px solid #dcdcdc bottom border, 0px radius, 12px vertical padding."

    - "Create a portrait card: square image container with #efc4b2 background, 0px radius, no border, no shadow. Centered overlay label '(+)' in -apple-system 12px #282828."

    - "Create a bio block: left-aligned text in -apple-system 16px weight 400 #282828. Name 'Gustavo Faria' in weight 700. Short paragraph below. No background, no border, sits directly on white canvas."

    - "Create a navigation bar: inline horizontal links 'Info' and 'Instagram' in -apple-system 16px weight 400 #282828, 8px horizontal gap between items. 1px solid #282828 bottom border on hover. No background, no padding above or below."

  similar_brands:

    - "**Pentagram partner portfolios** — Same editorial-monograph approach: massive display type anchoring sparse layouts, monochrome palette, work presented as a structured list with hairline dividers"
    - "**Mark Owens (markowens.id)** — Identical 'designer contact sheet' aesthetic — custom display serif, white canvas, no decorative elements, content organized as typographic list with project/category/year columns"
    - "**Bureau Cool** — Shared restraint: custom display serif hero, monochrome interface, work entries as text rows with minimal chrome, 0px radius throughout"
    - "**Studio Dumbar** — Editorial portfolio structure with oversized display type, flat surfaces, and work presented as a typographic index rather than a visual gallery"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-charcoal: #282828;
          --color-ink-black: #000000;
          --color-ash-gray: #dcdcdc;
          --color-flesh-peach: #efc4b2;
        
          /* Typography — Font Families */
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom21879-custom49610: 'custom_21879 / custom_49610', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom49610: 'custom_49610', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.67;
          --tracking-caption: -0.56px;
          --text-body: 16px;
          --leading-body: 1.17;
          --text-display-lg: 125px;
          --leading-display-lg: 1.02;
          --text-display: 142px;
          --leading-display: 0.81;
          --tracking-display: -6.67px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
        
          /* Layout */
          --section-gap: 48-64px;
          --card-padding: 0px;
          --element-gap: 8px;
        
          /* Named Radii */
          --radius-tags: 0px;
          --radius-cards: 0px;
          --radius-images: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper-canvas: #ffffff;
          --surface-flesh-surface: #efc4b2;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-paper-white: #ffffff;
          --color-charcoal: #282828;
          --color-ink-black: #000000;
          --color-ash-gray: #dcdcdc;
          --color-flesh-peach: #efc4b2;
        
          /* Typography */
          --font-apple-system: '-apple-system', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom21879-custom49610: 'custom_21879 / custom_49610', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-custom49610: 'custom_49610', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.67;
          --tracking-caption: -0.56px;
          --text-body: 16px;
          --leading-body: 1.17;
          --text-display-lg: 125px;
          --leading-display-lg: 1.02;
          --text-display: 142px;
          --leading-display: 0.81;
          --tracking-display: -6.67px;
        
          /* Spacing */
        }