pixso___style_reference:
  info: "> pristine designer's canvas flooded with morning light"

  theme: "light"

  info: "Pixso's marketing surface is a near-monochrome gallery: a warm-white canvas, hairline borders, and black headline type let the colorful product work and design kit thumbnails do the visual talking. Figtree carries the entire voice in a wide weight range — whispers at 400, confident at 600, and a wall of presence at 700 for the hero statement. The only chromatic punctuation is a single pale-blue wash and a purple-to-blue logo gradient; everything else earns its color by showing real product, not decoration. Components sit flat with very soft shadows and modest radii, so the page feels like a designer's tool laid out on a marble desk — the tools are quiet, the work is loud."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Obsidian | `#000000` | `--color-obsidian` | Primary text, heading type, dark icons, and the strongest foreground layer |"
    info: "| Carbon | `#121212` | `--color-carbon` | Filled primary buttons, active nav state, dark surface fill |"
    info: "| Graphite | `#333333` | `--color-graphite` | Secondary headings, button labels on light surfaces, heavy icon strokes |"
    info: "| Slate | `#666666` | `--color-slate` | Body secondary text, helper copy, muted metadata |"
    info: "| Ash | `#808080` | `--color-ash` | Tertiary text, disabled states, placeholder copy, subtle borders |"
    info: "| Fog | `#999999` | `--color-fog` | Inactive icons, low-emphasis dividers, shadow tinting |"
    info: "| Pebble | `#8b8c8f` | `--color-pebble` | Icon strokes on neutral surfaces, muted glyph color |"
    info: "| Smoke | `#4d4d4d` | `--color-smoke` | Heavy body text where Obsidian feels too sharp, small caption emphasis |"
    info: "| Charcoal Veil | `#3d3d3d` | `--color-charcoal-veil` | Navigation bar text and borders — the dark nav strip registers as a separate layer |"
    info: "| Dusk | `#292929` | `--color-dusk` | Deep surface fill for elevated dark blocks and image overlays |"
    info: "| Paper | `#faf8fd` | `--color-paper` | Page canvas — barely-there warm/lavender tint that separates the site from pure white |"
    info: "| Bone | `#f9f9fa` | `--color-bone` | Card surfaces, secondary panels, subtle raised containers |"
    info: "| Mist | `#eaebee` | `--color-mist` | Hairline borders, divider rules, button outlines, input borders |"
    info: "| Ice Wash | `#cfe7ed` | `--color-ice-wash` | Pale cool-blue background tint for highlighted cards and feature panels |"
    info: "| Iris Sweep | `linear-gradient(88deg, #ee7cff 1.37%, #4e6fff 45.72%, #559cff 106.06%)` | `--color-iris-sweep` | Brand logo gradient midpoint — the wordmark's signature purple-to-blue sweep |"
    info: "| Orchid Edge | `#ee7cff` | `--color-orchid-edge` | Brand logo gradient start — warm violet anchor of the wordmark sweep |"
    info: "| Sky Drift | `#559cff` | `--color-sky-drift` | Brand logo gradient end — cool blue terminus of the wordmark sweep |"

  tokens___typography:

    figtree___single_family_system__700_carries_the_hero_and_section_headlines_at_48_60px_with_tight_tracking__600_handles_subheadings_and_prominent_labels_at_24_34px__500_covers_button_labels_and_emphasized_body_at_16_18px__400_runs_body_and_caption_copy_at_13_16px__the_geometric__low_contrast_character_of_figtree_keeps_the_all_black_type_from_feeling_oppressive_____font_figtree:
      - "**Substitute:** Inter, DM Sans, Manrope"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 12px, 13px, 14px, 16px, 18px, 24px, 28px, 30px, 34px, 48px, 50px, 60px"
      - "**Line height:** 1.10–1.61 (display tight at 1.10–1.17, body generous at 1.50–1.61)"
      - "**Role:** Single-family system: 700 carries the hero and section headlines at 48–60px with tight tracking, 600 handles subheadings and prominent labels at 24–34px, 500 covers button labels and emphasized body at 16–18px, 400 runs body and caption copy at 13–16px. The geometric, low-contrast character of Figtree keeps the all-black type from feeling oppressive."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | — | `--text-caption` |"
      info: "| body | 14px | 1.6 | — | `--text-body` |"
      info: "| body-lg | 16px | 1.55 | — | `--text-body-lg` |"
      info: "| subheading | 18px | 1.5 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.21 | — | `--text-heading` |"
      info: "| heading-lg | 34px | 1.21 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.17 | — | `--text-display` |"
      info: "| display-lg | 60px | 1.1 | — | `--text-display-lg` |"

  tokens___spacing___shapes:

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 5 | 5px | `--spacing-5` |"
      info: "| 6 | 6px | `--spacing-6` |"
      info: "| 7 | 7px | `--spacing-7` |"
      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: "| 17 | 17px | `--spacing-17` |"
      info: "| 18 | 18px | `--spacing-18` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 30 | 30px | `--spacing-30` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 50 | 50px | `--spacing-50` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| nav | 8px |"
      info: "| cards | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 12px |"
      info: "| buttons-prominent | 18px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| sm | `rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0...` | `--shadow-sm` |"
      info: "| subtle | `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0p...` | `--shadow-subtle` |"

    layout:

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

  components:

    filled_primary_button:
      role: "Main conversion action — the loudest UI element on the page"

121212_background__ffffff_text__figtree_500_at_14_16px__12px_horizontal___8px_vertical_padding__12px_radius__whisper_soft_shadow_stack__white_hover_invert_or_subtle_darken__used_for__get_started__and_similar_conversion_moments:

    outlined_secondary_button:
      role: "Companion action — same row, lower weight"

      info: "Transparent background, 1px #eaebee border (darker on hover, ~#999999), #000000 text, Figtree 500, 12px radius, same padding as primary. The pairing of filled + outlined on the same row is the signature CTA pattern."

    ghost_nav_link:
      role: "Top navigation items and in-content links"

      info: "Transparent background, #3d3d3d text at 14px Figtree 500, no underline, 8px hover background wash. Dropdowns indicated by chevron, no decoration."

    design_kit_card:
      role: "Gallery tile in the design kit grid (4-column layout)"

ffffff_surface__8px_radius__full_bleed_colorful_product_mockup_image_filling_the_card_body__16_20px_padding_below_image_for_title_block__title_in_figtree_600_at_16px_obsidian__category_label_in_13px_slate__no_visible_border__relies_on_the_1px_shadow_for_separation_from_the_paper_canvas:

    product_showcase_frame:
      role: "Large framed mockup in the product section"

ffffff_card_containing_device_frame_mockups_at_full_width__18px_radius_on_outer_container__landscape_gradient_backdrop_7cb86a_green_grass_visible_behind_the_cards__internal_ui_cards_use_12_18px_radius:

    floating_feature_card:
      role: "Callout card floating over hero or product imagery"

ffffff_surface__12_18px_radius__soft_drop_shadow__small_device_thumbnail_on_the_left_40_60px__title_at_figtree_600_16px_obsidian__description_at_figtree_400_13_14px_slate__sits_offset_from_its_parent__creating_the_layered_look:

    top_navigation_bar:
      role: "Persistent site header"

      info: "White/transparent background flush with the page canvas, no bottom border, 64–72px tall. Logo (colorful Iris Sweep gradient mark + Obsidian wordmark) on the left, horizontal nav items centered, \"Log in\" ghost link + filled \"Get started\" button on the right. 8px radius on the CTA button."

    section_divider:
      role: "Vertical separation between content sections"

      info: "No visible rule — sections are separated by ~80px of whitespace on the Paper canvas. Occasionally a 1px #eaebee hairline marks a transition."

    decorative_icon_scatter:
      role: "Atmospheric floating icons in the hero margins"

      info: "Small (24–40px) flat colorful icons positioned absolutely around the hero. Each rendered in a single brand-adjacent color (pinks, purples, blues, greens, oranges). No animation implied, but placement feels intentionally asymmetric — they exist to soften the otherwise empty white space."

  do_s_and_don_ts:

    do:
      - "Use Figtree for everything — no secondary font family, no system fallbacks in production output"
      - "Let the page background be #faf8fd, never pure #ffffff, so cards visibly lift"
      - "Pair a Filled Primary Button (Carbon #121212) with an Outlined Secondary Button (Mist border) in the same action row"
      - "Reserve 8px radius for cards and nav, 12px for buttons, 18px only for prominent product frames"
      - "Keep shadows to the signature two-layer stack: 1px hairline dark + 2–4px soft blur"
      - "Use the Iris Sweep gradient only on the wordmark and brand-identity surfaces — never on buttons or functional UI"
      - "Let product mockups and design kit thumbnails carry all the color; keep chrome grayscale"

    don_t:
      - "Don't introduce a chromatic CTA color — the primary action is always Carbon #121212"
      - "Don't use heavy drop shadows or colored shadows; elevation must stay hairline"
      - "Don't set body type below 13px or use Figtree below weight 400"
      - "Don't add gradient backgrounds to UI surfaces; gradients belong to the logo and decorative imagery"
      - "Don't center-align body paragraphs — the system uses left-aligned running text below the hero"
      - "Don't use #0000ee or browser-default link blue for any interactive element"
      - "Don't round buttons to pill (9999px); the system uses 8/12/18px radii only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#faf8fd` | Page background — warm-white with a whisper of lavender so cards float above rather than blending in |"
    info: "| 1 | Card | `#ffffff` | Elevated card surface for product mockup frames, design kit thumbnails, feature tiles |"
    info: "| 2 | Panel | `#f9f9fa` | Subtle raised panels and secondary containers |"
    info: "| 3 | Cool Wash | `#cfe7ed` | Soft cool-tinted highlight surface for featured callouts |"

  elevation:

    - "**Primary button:** `rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px`"
    - "**Secondary outlined button:** `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0px 0px 1px 0px`"

  imagery:

    info: "Imagery is the only source of color in this system. The product showcase uses full-width landscape photography (green grass field with wildflowers) as a backdrop for floating device-frame mockups. The design kit gallery is a 4-column grid of vibrant product screenshots — Apple CarPlay, Material 3, HarmonyOS, iPadOS, 3D avatar sets, fitness apps, finance apps — each thumbnail a different vivid color story. The hero is decorated with small flat icons (24–40px) in pink, purple, blue, green, and orange scattered asymmetrically around the white space. No photography of people, no lifestyle imagery, no abstract 3D renders — it's all real product work presented as visual evidence. Icon style is flat, single-color, geometric, with a slight chunky quality that matches Figtree's character."

  layout:

    info: "Full-bleed page structure with a 1200px max-width content rail. The hero is centered: oversized headline (48–60px, Figtree 700, tight 1.10 line-height) over a 16–18px subtitle, then a horizontally paired button row, then a floating product card. Product showcase sections use a 4-up row of device-frame mockups over a landscape photo background, framed by a 1200px container. The design kit gallery is a strict 4-column grid with 20px gaps, equal-height cards. Navigation is a flat 64–72px top bar, transparent over the canvas, with the logo left, links center, and CTA right. Section rhythm is generous — 80px vertical gaps between major sections on the Paper canvas, with no alternating dark/light bands. Everything is left-aligned or center-aligned; there are no asymmetric or magazine-style compositions."

  agent_prompt_guide:

  quick_color_reference:
    - "Page background: #faf8fd (Paper)"
    - "Card surface: #ffffff"
    - "Border / divider: #eaebee (Mist)"
    - "Primary text: #000000 (Obsidian)"
    - "Muted text: #666666 (Slate)"
    - "Brand accent: #ee7cff → #4e6fff → #559cff (Iris Sweep gradient — logo only)"
    - "primary action: no distinct CTA color"

  example_component_prompts:
    - "**Hero Headline + Action Row**: Center a 56px Figtree 700 headline in #000000 with 1.15 line-height. Below, place a Carbon #121212 filled button (Figtree 500 14px, #ffffff text, 12px radius, 12px 24px padding) next to an outlined button (1px #eaebee border, #000000 text, same padding and radius). Page background #faf8fd."

    - "**Design Kit Gallery Card**: 4-column grid with 20px gap. Each card: #ffffff surface, 8px radius, full-bleed colorful product screenshot filling the body, 16px padding below for a Figtree 600 16px #000000 title and Figtree 400 13px #666666 category label. No border, rely on the whisper shadow."

    - "**Floating Feature Callout**: #ffffff card with 12px radius and the standard two-layer shadow, ~60px device thumbnail on the left, Figtree 600 16px #000000 title and Figtree 400 14px #666666 description to its right. Sits offset 24px from its parent container."

    - "**Section Divider (no rule)**: No visible line. Just 80px of #faf8fd background between content blocks, with a 1px #eaebee hairline only if marking a list or table boundary."

    - "**Top Navigation**: 64px tall, transparent over #faf8fd. Left: Iris Sweep gradient mark + Obsidian wordmark. Center: Figtree 500 14px #3d3d3d nav links with 8px hover wash. Right: ghost \"Log in\" text link + Carbon #121212 filled \"Get started\" button (Figtree 500 14px, #ffffff, 8px radius, 8px 16px padding)."

  similar_brands:

    - "**Figma** — Same near-monochrome marketing canvas with a single-color brand gradient, and design kit gallery rows of colorful product thumbnails doing the visual work"
    - "**Framer** — Same quiet off-white page with oversized centered headlines, paired filled + outlined CTA buttons, and product mockups as the primary color source"
    - "**Notion** — Same restrained neutral palette and hairline-border card aesthetic, letting user content and screenshots supply all the color"
    - "**Linear** — Same single-family geometric sans (Figtree/Inter) carrying the entire voice and same near-black filled button as the only foreground accent"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-obsidian: #000000;
          --color-carbon: #121212;
          --color-graphite: #333333;
          --color-slate: #666666;
          --color-ash: #808080;
          --color-fog: #999999;
          --color-pebble: #8b8c8f;
          --color-smoke: #4d4d4d;
          --color-charcoal-veil: #3d3d3d;
          --color-dusk: #292929;
          --color-paper: #faf8fd;
          --color-bone: #f9f9fa;
          --color-mist: #eaebee;
          --color-ice-wash: #cfe7ed;
          --color-iris-sweep: #4e6fff;
          --gradient-iris-sweep: linear-gradient(88deg, #ee7cff 1.37%, #4e6fff 45.72%, #559cff 106.06%);
          --color-orchid-edge: #ee7cff;
          --color-sky-drift: #559cff;
        
          /* Typography — Font Families */
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.6;
          --text-body-lg: 16px;
          --leading-body-lg: 1.55;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 30px;
          --leading-heading: 1.21;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.21;
          --text-display: 48px;
          --leading-display: 1.17;
          --text-display-lg: 60px;
          --leading-display-lg: 1.1;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-50: 50px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 25px;
        
          /* Named Radii */
          --radius-nav: 8px;
          --radius-cards: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 12px;
          --radius-buttons-prominent: 18px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0px 0px 1px 0px;
        
          /* Surfaces */
          --surface-canvas: #faf8fd;
          --surface-card: #ffffff;
          --surface-panel: #f9f9fa;
          --surface-cool-wash: #cfe7ed;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-obsidian: #000000;
          --color-carbon: #121212;
          --color-graphite: #333333;
          --color-slate: #666666;
          --color-ash: #808080;
          --color-fog: #999999;
          --color-pebble: #8b8c8f;
          --color-smoke: #4d4d4d;
          --color-charcoal-veil: #3d3d3d;
          --color-dusk: #292929;
          --color-paper: #faf8fd;
          --color-bone: #f9f9fa;
          --color-mist: #eaebee;
          --color-ice-wash: #cfe7ed;
          --color-iris-sweep: #4e6fff;
          --color-orchid-edge: #ee7cff;
          --color-sky-drift: #559cff;
        
          /* Typography */
          --font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.5;
          --text-body: 14px;
          --leading-body: 1.6;
          --text-body-lg: 16px;
          --leading-body-lg: 1.55;
          --text-subheading: 18px;
          --leading-subheading: 1.5;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.3;
          --text-heading: 30px;
          --leading-heading: 1.21;
          --text-heading-lg: 34px;
          --leading-heading-lg: 1.21;
          --text-display: 48px;
          --leading-display: 1.17;
          --text-display-lg: 60px;
          --leading-display-lg: 1.1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-5: 5px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-14: 14px;
          --spacing-16: 16px;
          --spacing-17: 17px;
          --spacing-18: 18px;
          --spacing-20: 20px;
          --spacing-26: 26px;
          --spacing-30: 30px;
          --spacing-32: 32px;
          --spacing-50: 50px;
        
          /* Border Radius */
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 18px;
          --radius-3xl: 25px;
        
          /* Shadows */
          --shadow-sm: rgba(0, 0, 0, 0.04) 0px 2px 4px 0px, rgba(0, 0, 0, 0.3) 0px 0px 1px 0px;
          --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.4) 0px 0px 1px 0px;
        }