preply___style_reference:
  info: "> Pink billboard with human stickers"

  theme: "light"

  info: "Preply projects a warm, confident energy built on saturated pink hero canvases, near-black typography, and white product surfaces. The visual system is deliberately loud in the top fold to express brand personality, then quiets down into a calm black-and-white catalog of tutors and content once the user moves into functional areas. Platform (a chunky, high-contrast display face) carries all headings at weight 700 with very tight tracking and line-heights, making 48–96px headlines read as solid blocks of voice rather than delicate type. Figtree handles all UI and body text at moderate weights with slightly looser tracking. Components are flat and rectangular — 4px and 8px corners are the only soft edge in the system, and shadows are nearly absent. Photography is integral: real tutor/learner portraits are cropped, slightly rotated, and layered with black text stickers, giving the brand a handmade, scrapbook-like quality that contrasts the structured grid below."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Preply Pink | `#ff7aac` | `--color-preply-pink` | Red supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color |"
    info: "| Midnight Ink | `#121117` | `--color-midnight-ink` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Soft White | `#ffffff` | `--color-soft-white` | Page canvas above the pink hero, card surfaces, tutor catalog backgrounds, button text on dark fills |"
    info: "| Mist Gray | `#f4f4f8` | `--color-mist-gray` | Subtle page background for content sections that need separation from pure white |"
    info: "| Smoke | `#dcdce5` | `--color-smoke` | Card borders, input outlines, dividers — structural hairlines that define the catalog grid |"
    info: "| Pewter | `#6a697c` | `--color-pewter` | Card border accent and tertiary text, slightly cooler than Midnight Ink for layered hierarchy |"
    info: "| Graphite | `#4d4c5c` | `--color-graphite` | Body copy, icon strokes, secondary text — the readable neutral that lives between Midnight Ink headings and lighter helper text |"
    info: "| Pure Black | `#000000` | `--color-pure-black` | Icon fills, decorative sticker text, and any place where the absolute black is needed for photographic overlay |"
    info: "| Signal Yellow | `#ffdf3d` | `--color-signal-yellow` | Accent highlights, announcement bar background, decorative stickers — used sparingly as a callout color over pink |"
    info: "| Sky Pop | `#99c5ff` | `--color-sky-pop` | Secondary accent, tag chips, and decorative illustration — the cool counterpoint to pink in multicolor compositions |"

  tokens___typography:

    platform___all_headlines__section_titles__hero_copy__and_the_largest_display_text__weight_700_dominates_from_32px_upward__creating_dense__confident_type_blocks__the_1_00_1_08_line_heights_at_48_96px_make_headlines_read_as_solid_slabs__tracking_tightens_with_size___0_005em_at_body___0_017em_at_display_____font_platform:
      - "**Substitute:** Mulish, Inter, or Manrope at matching weights"
      - "**Weights:** 400, 600, 700"
      - "**Sizes:** 14, 16, 20, 24, 32, 48, 64, 96"
      - "**Line height:** 1.00–1.50"
      - "**Letter spacing:** -0.07px at 14px, -0.08px at 16px, -0.20px at 20px, -0.24px at 24px, -0.16px at 32px, -0.24px at 48px, -0.32px at 64px, -0.48px at 96px (progression from -0.005em at small to -0.005em tightening; dominant -0.005em across stack)"
      - "**Role:** All headlines, section titles, hero copy, and the largest display text. Weight 700 dominates from 32px upward, creating dense, confident type blocks. The 1.00–1.08 line-heights at 48–96px make headlines read as solid slabs. Tracking tightens with size: -0.005em at body, -0.017em at display."

    figtree___body_copy__ui_labels__button_text__card_content__nav__links__footer_text__and_form_fields__weight_400_for_paragraphs__weight_600_for_emphasis_and_button_labels__line_height_1_43_1_71_at_14_18px_gives_body_copy_comfortable_air__letter_spacing_stays_near_zero_to_slightly_positive__0_01_to__0_012em_for_legible_small_sizes_____font_figtree:
      - "**Substitute:** DM Sans, Plus Jakarta Sans, or Nunito Sans"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12, 13, 14, 16, 18, 20"
      - "**Line height:** 1.00–1.71"
      - "**Letter spacing:** -0.06px at 12px, +0.065px at 13px, +0.14px at 14px, +0.16px at 16px, +0.18px at 18px, +0.20px at 20px"
      - "**Role:** Body copy, UI labels, button text, card content, nav, links, footer text, and form fields. Weight 400 for paragraphs, weight 600 for emphasis and button labels. Line-height 1.43–1.71 at 14–18px gives body copy comfortable air. Letter-spacing stays near zero to slightly positive (+0.01 to +0.012em) for legible small sizes."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.5 | -0.06px | `--text-caption` |"
      info: "| body | 16px | 1.5 | 0.16px | `--text-body` |"
      info: "| subheading | 20px | 1.4 | 0.2px | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | 0.24px | `--text-heading-sm` |"
      info: "| heading | 32px | 1.2 | 0.16px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.13 | 0.24px | `--text-heading-lg` |"
      info: "| display | 64px | 1.08 | 0.32px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 28 | 28px | `--spacing-28` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 160 | 160px | `--spacing-160` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| tags | 4px |"
      info: "| cards | 8px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"
      info: "| stickers | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 64px"
      - "**Card padding:** 24px"
      - "**Element gap:** 8px"

  components:

    filled_dark_action_button:
      role: "Primary conversion button (Find your tutor, Get started)"

      info: "Background #121117, text #ffffff, Figtree 16px weight 600, border-radius 4px, padding 14px 24px, inline arrow icon (→) at 16px. No border, no shadow. Hover lightens to #2a2935 or lifts text color slightly."

    outlined_ghost_button:
      role: "Secondary actions in the nav and inline CTAs"

      info: "Transparent background, 1px border #121117, text #121117, Figtree 14px weight 600, border-radius 4px, padding 8px 16px. Becomes filled dark on hover."

    language_tutor_card:
      role: "Catalog entry in the subject grid (English tutors, Spanish tutors, etc.)"

      info: "White #ffffff background, 1px border #dcdce5, border-radius 8px, padding 16px 20px. Left-aligned icon at 32px (line illustration in #121117), Platform 20px weight 700 title, Figtree 13px weight 400 teacher count in #4d4c5c, right chevron (›) at 20px in #121117. Hover adds subtle background tint #f4f4f8."

    sticker_text_label:
      role: "Decorative rotated text tags layered on hero photography"

      info: "Background #121117, text #ffffff, Figtree 14px weight 600, border-radius 4px, padding 4px 10px. Sits at slight rotation (-5° to +5°) on top of photo tiles. Examples: 'Miki C. / Tutor', 'Roberto / Learner'."

    top_utility_bar:
      role: "Announcement strip above the main nav"

      info: "Background #121117, text #ffffff, Figtree 13px weight 400, centered content with optional inline flag emoji. 40px tall, single line, includes a right-side close (×) icon."

    main_navigation:
      role: "Site-wide primary nav"

      info: "White #ffffff background, 64px tall. Left: logo (Preply wordmark in #121117). Center: nav links in Figtree 14px weight 400 #121117, 24px horizontal spacing. Right: language/currency selector, help icon, and outlined 'Log in' button with 1px #121117 border, 4px radius."

    stat_strip:
      role: "Social proof bar below the hero (100,000+ tutors, 4.8 stars, etc.)"

      info: "White background, 5-column flex row, 48px vertical padding. Each stat: Platform 32px weight 700 #121117 for the number, Figtree 13px weight 400 #4d4c5c for the caption below. No dividers, generous horizontal spacing of ~57px between columns."

    hero_headline_block:
      role: "Primary fold headline on pink background"

      info: "Platform weight 700 at 64–96px, line-height 1.06–1.08, color #121117, max-width ~560px, left-aligned on the pink #ff7aac canvas. Subhead in Figtree 18px weight 400 #121117 at 24px top margin."

    hero_photo_collage:
      role: "Right-side hero visual on pink background"

      info: "Two overlapping portrait photos with 4px radius, slight rotation (-3° and +3°), black text stickers layered on top, large rotated black 'Progress Takes Two' wordmark with white text filling the middle. Photos extend off the right edge."

    footer_column:
      role: "Site link directory in dark footer"

      info: "Background #121117, 4-column grid. Column headings in Figtree 14px weight 600 uppercase #ffffff. Links in Figtree 14px weight 400 #dcdce5, 8px row gap, 32px top gap between heading and first link."

    subject_grid_section:
      role: "3×3 catalog of language subjects"

      info: "3-column grid, 16px row and column gap, white background. Each cell is a Language Tutor Card. Section has 64px vertical padding."

    section_heading:
      role: "Mid-page section titles (Progress starts with the right tutor)"

      info: "Center-aligned, Platform 48px weight 700 #121117, line-height 1.13, max-width ~800px. Subhead below in Figtree 18px weight 400 #4d4c5c, 16px top margin."

  do_s_and_don_ts:

    do:
      - "Use Platform weight 700 for every heading from 32px upward; never go below weight 600 for headlines."
      - "Reserve #ff7aac for full-bleed section backgrounds and brand moments — never paint a single component pink."
      - "Set filled action buttons to #121117 with white text, 4px radius, 14px 24px padding, and a trailing → icon."
      - "Layer real, slightly rotated photos with black text stickers on pink backgrounds; keep the collage energy in hero zones."
      - "Keep borders at 1px #dcdce5 or 1px #6a697c — the catalog grid is defined by hairlines, not shadows."
      - "Anchor all body copy in Figtree weight 400 with line-height 1.43–1.71; let the comfortable air do the work."
      - "Use 4px and 8px as the only two corner radii in the system; 16px is reserved for one-off decorative surfaces."

    don_t:
      - "Don't apply #ff7aac to buttons, links, or interactive surfaces — it is a canvas, not a control."
      - "Don't introduce drop shadows or multi-layer elevations; the system is flat and hairline-driven."
      - "Don't use rounded radii above 8px on functional components (cards, inputs, buttons)."
      - "Don't set headline line-height above 1.2 — Platform is designed to sit tight at scale."
      - "Don't mix the pink with heavy gradients or filters; the pink is always solid and unmodulated."
      - "Don't use Figtree for display sizes above 32px — let Platform carry anything that big."
      - "Don't crowd the white catalog with color; keep tutor cards monochrome and let the pink sections do the talking."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Pink Hero Canvas | `#ff7aac` | Full-bleed top fold and occasional brand sections |"
    info: "| 1 | Mist Page | `#f4f4f8` | Default body section background |"
    info: "| 2 | Pure White | `#ffffff` | Cards, tutor catalog rows, elevated content surfaces |"
    info: "| 3 | Midnight Footer | `#121117` | Inverted footer and rare dark UI zones |"

  elevation:

    - "**Language Tutor Card:** `none — defined only by 1px #dcdce5 border on #ffffff`"
    - "**Sticker Label:** `none — flat, relies on rotation to read as layered`"

  imagery:

    info: "Photography is the signature visual asset. Real tutor and learner portraits are cropped to head-and-shoulders, placed on the pink hero, and slightly rotated (±3°) to create a scrapbook composition. Black rectangular text stickers are layered directly on the photos. On content sections below the fold, photography is largely absent — the catalog relies on simple black line illustrations of landmarks (Eiffel Tower, Brandenburg Gate, torii gates) at 32px next to tutor subject titles. No lifestyle or stock photography appears; every portrait is specific, present, and personal."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #121117"
    - "background: #ffffff (content) / #ff7aac (hero canvas)"
    - "border: #dcdce5"
    - "accent: #ff7aac (brand canvas only), #ffdf3d (highlight)"
    - "primary action: no distinct CTA color"

    example_component_prompts:
    - "Build a hero section: #ff7aac full-bleed background, left-aligned headline in Platform 64px weight 700 #121117 with line-height 1.08, subhead in Figtree 18px weight 400 #121117, filled action button #121117 with #ffffff text, 4px radius, 14px 24px padding, trailing → icon. On the right, two overlapping portrait photos with 4px radius and ±3° rotation, each with a black #121117 text sticker (4px radius, Figtree 14px weight 600 #ffffff)."
    - "Build a language subject card: #ffffff background, 1px #dcdce5 border, 8px radius, 16px 20px padding. Left-aligned line icon at 32px in #121117, title in Platform 20px weight 700 #121117, caption in Figtree 13px weight 400 #4d4c5c, right chevron › at 20px in #121117."
    - "Build the main navigation: #ffffff background, 64px tall. Left wordmark 'Preply' in Figtree 18px weight 600 #121117. Center links in Figtree 14px weight 400 #121117 with 24px horizontal gap. Right outlined 'Log in' button — transparent background, 1px #121117 border, 4px radius, 8px 16px padding, Figtree 14px weight 600 #121117."
    - "Build the stat strip: #ffffff background, 48px vertical padding, 5-column row with ~57px horizontal gap. Each stat uses Platform 32px weight 700 #121117 for the number and Figtree 13px weight 400 #4d4c5c for the caption directly below."
    - "Build the footer column block: #121117 background, 4-column grid with 32px column gap. Column heading in Figtree 14px weight 600 uppercase #ffffff, links in Figtree 14px weight 400 #dcdce5 with 8px row gap, 32px top gap before first link."

  layout:

    page_model: "max-width 1200px centered for content sections, with the hero going full-bleed on pink. Hero pattern: left-aligned headline + subhead + single dark filled CTA on the left half, photo collage with stickers on the right half. Below the hero, a white stat strip spans the full content width with 5 evenly spaced columns. Content sections alternate between white and mist backgrounds separated by 64px vertical padding. The language catalog is a 3-column grid of hairline-bordered cards with 16px gaps. Headings center-align from 48px and up; body content left-aligns. Navigation is a flat white bar, not sticky. The footer is dark, full-bleed #121117, with 4 equal columns of links plus a second tier of SEO-style link blocks. No sidebar, no mega-menu."

  similar_brands:

    - "**Duolingo** — Equally loud brand color treatment and bold display typography, though Duolingo leans more illustrative where Preply uses real photography."
    - "**Cambly** — Same language-learning market and similar use of real tutor portraits as the emotional center of the hero."
    - "**Headspace** — Confident display-type-at-scale paired with a single saturated brand color and flat, shadow-free components."
    - "**Italki** — Catalog of tutor subjects rendered in a clean white grid with hairline borders, sitting below a personality-driven hero."
    - "**Babbel** — Black-and-white product UI that lets a single brand color carry the entire top-fold personality."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-preply-pink: #ff7aac;
          --color-midnight-ink: #121117;
          --color-soft-white: #ffffff;
          --color-mist-gray: #f4f4f8;
          --color-smoke: #dcdce5;
          --color-pewter: #6a697c;
          --color-graphite: #4d4c5c;
          --color-pure-black: #000000;
          --color-signal-yellow: #ffdf3d;
          --color-sky-pop: #99c5ff;
        
          /* Typography — Font Families */
          --font-platform: 'Platform', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --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;
          --tracking-caption: -0.06px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 0.24px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.16px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: 0.24px;
          --text-display: 64px;
          --leading-display: 1.08;
          --tracking-display: 0.32px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
        
          /* Named Radii */
          --radius-tags: 4px;
          --radius-cards: 8px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
          --radius-stickers: 4px;
        
          /* Surfaces */
          --surface-pink-hero-canvas: #ff7aac;
          --surface-mist-page: #f4f4f8;
          --surface-pure-white: #ffffff;
          --surface-midnight-footer: #121117;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-preply-pink: #ff7aac;
          --color-midnight-ink: #121117;
          --color-soft-white: #ffffff;
          --color-mist-gray: #f4f4f8;
          --color-smoke: #dcdce5;
          --color-pewter: #6a697c;
          --color-graphite: #4d4c5c;
          --color-pure-black: #000000;
          --color-signal-yellow: #ffdf3d;
          --color-sky-pop: #99c5ff;
        
          /* Typography */
          --font-platform: 'Platform', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --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;
          --tracking-caption: -0.06px;
          --text-body: 16px;
          --leading-body: 1.5;
          --tracking-body: 0.16px;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --tracking-subheading: 0.2px;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --tracking-heading-sm: 0.24px;
          --text-heading: 32px;
          --leading-heading: 1.2;
          --tracking-heading: 0.16px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.13;
          --tracking-heading-lg: 0.24px;
          --text-display: 64px;
          --leading-display: 1.08;
          --tracking-display: 0.32px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-28: 28px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-160: 160px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-2xl: 16px;
        }