memorisely___style_reference:
  info: "> Architect's drafting table on warm parchment — a quiet, monochrome workspace where every element is a typographic decision."

  theme: "light"

  info: "Memorisely reads as a typographer's workspace: a warm cream canvas, pure white card surfaces, and a single near-black that serves as both text and primary action. The system is deliberately zero-chromatic — no blue, no green, no accent hue — letting Inter's weight contrast and tight negative tracking carry all hierarchy. Components stay flat and pill-leaning: a floating nav bar, 8px button corners, and 100px-radius interactive elements create a designed-by-a-designer feel without ornament. Separation comes from hairline borders in warm linen (#f2f0e9) and the cream-to-white surface jump, not from shadows or color."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Warm Parchment | `#faf9f6` | `--color-warm-parchment` | Page canvas, body background — the base layer that gives the entire site its designed-by-hand warmth |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card surfaces, floating navigation, elevated content blocks — pure white sits one step above the cream canvas |"
    info: "| Soft Linen | `#f2f0e9` | `--color-soft-linen` | Hairline borders, subtle dividers, muted background washes — the warm-tinted replacement for #e5e5e5 |"
    info: "| Ink Black | `#171717` | `--color-ink-black` | Primary text, primary action button background, strong heading borders — the workhorse near-black that unifies copy and CTAs |"
    info: "| Jet Black | `#000000` | `--color-jet-black` | Maximum-contrast icon strokes, dense border treatments where absolute weight is needed |"
    info: "| Carbon | `#212121` | `--color-carbon` | Strong body borders, emphasis dividers — one shade softer than Ink Black for structural lines |"
    info: "| Stone | `#6e6e6e` | `--color-stone` | Muted body text, secondary copy, ghost link color — the first step down from primary text |"
    info: "| Ash | `#878787` | `--color-ash` | Tertiary text, helper labels, company-logo grayscale treatment — the quietest readable gray |"
    info: "| Graphite | `#414141` | `--color-graphite` | Heading borders, emphasis underlines — a mid-dark accent for typographic rules |"

  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___the_sole_typeface_across_the_system__inter_at_600_56px__3_36px_tracking_carries_the_display_headline__500_22px_handles_section_headings__400_16px_is_body__the_weight_ladder_stops_at_600___semibold_is_the_ceiling__which_keeps_the_type_from_feeling_corporate_or_heavy_____font_inter:
      - "**Substitute:** system-ui, -apple-system, 'Segoe UI', sans-serif"
      - "**Weights:** 400, 500, 600"
      - "**Sizes:** 10, 13, 14, 15, 16, 18, 22, 32, 56"
      - "**Line height:** 1.14–1.50"
      - "**Letter spacing:** -0.06em at 56px display, -0.04em at 22–32px headings, normal at body sizes"
      - "**Role:** The sole typeface across the system. Inter at 600/56px (-3.36px tracking) carries the display headline; 500/22px handles section headings; 400/16px is body. The weight ladder stops at 600 — semibold is the ceiling, which keeps the type from feeling corporate or heavy."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| micro | 10px | 1.2 | — | `--text-micro` |"
      info: "| caption | 13px | 1.5 | — | `--text-caption` |"
      info: "| body | 16px | 1.45 | — | `--text-body` |"
      info: "| heading-sm | 18px | 1.38 | -0.72px | `--text-heading-sm` |"
      info: "| heading | 22px | 1.27 | -0.88px | `--text-heading` |"
      info: "| heading-lg | 32px | 1.25 | -1.28px | `--text-heading-lg` |"
      info: "| display | 56px | 1.14 | -3.36px | `--text-display` |"

  tokens___spacing___shapes:

    density: "compact"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      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: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 26 | 26px | `--spacing-26` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| badges | 100px |"
      info: "| buttons | 8px |"
      info: "| navPill | 100px |"
      info: "| productCards | 16px |"

    shadows:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| subtle | `rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, ...` | `--shadow-subtle` |"
      info: "| lg | `rgba(191, 191, 191, 0.25) 0px 1px 20px 0px` | `--shadow-lg` |"

    layout:

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

  components:

    floating_pill_navigation:
      role: "Top-level site navigation"

      info: "A floating horizontal bar centered on the page, not full-width. White (#ffffff) background, 100px border-radius for a perfect pill, subtle 1px outer ring shadow. Contains the brand mark on the left, nav links (Inter 500, 14px, #171717) centered, and no visible CTAs. Sits 24–32px from the viewport top with generous horizontal margin."

    primary_dark_button:
      role: "Main call-to-action (Browse bootcamps, Enroll, etc.)"

      info: "Filled button with #171717 background and #ffffff text. Inter weight 500, 14–15px, padding 10px 20px. 8px border-radius. Subtle outer-ring shadow at rgba(110,110,110,0.1). No hover state shift in color — the contrast against the cream canvas is already the entire statement."

    ghost_text_link_button:
      role: "Secondary action (Upcoming workshops, Learn more)"

      info: "No fill, no border. Inter weight 500, 15px, #171717 color, 1px underline offset 4px. Padding 10px 0. Sits beside the primary button at a 12–16px gap. The underline is the affordance — no box, no background."

    new_announcement_pill:
      role: "Inline announcement above the hero headline"

      info: "Small horizontal pill (100px radius), #171717 background, #ffffff text. Inter weight 500, 12–13px. Contains the word 'New' in a tiny lighter weight, then the announcement copy. Padding 4px 10px. Acts as a typographic label rather than a badge."

    hero_centered_text_stack:
      role: "Primary above-the-fold content block"

      info: "Display headline (Inter 600, 56px, -3.36px tracking, #171717) on one or two lines, max-width ~800px, centered. Subtext at 18px, weight 400, #6e6e6, max-width ~560px. Vertical rhythm: 16px between headline and subtext, 24px before the CTA pair, 32px before social proof."

    social_proof_cluster:
      role: "Trust signal under hero CTAs"

      info: "Stacked avatar circles (28–32px, slight overlap, 1.5px white border) on the left, then a row of 5 small filled stars (Inter-rendered ★ glyphs or icons) and a rating line like '4.8 (20k+)' in Inter 500, 14px, #171717. Below in smaller text: 'Trusted by 20k+ Designers' at 13px, #6e6e6e."

    company_logo_strip:
      role: "Enterprise credibility band"

      info: "Single horizontal row of grayscale corporate logos (IBM, ebay, Netflix, Wise, Shopify, Slack, Google, Atlassian). All rendered in #878787 or #a0a0a0 to strip brand color. Vertically centered with the label 'Upskilling teams in 150+ countries' (Inter 500, 13px, #171717) on the left. Generous horizontal gap (40–64px) between logos."

    section_heading_pair:
      role: "Section opener for content blocks"

      info: "Eyebrow label (Inter 500, 12–13px, #171717, often with a small ↗ or → suffix) on top, then a left-aligned heading (Inter 600, 32px, -1.28px tracking, #171717) and an optional subtext (Inter 400, 18px, #6e6e6, max-width ~520px). Stacks vertically with 8–12px gaps between elements."

    live_product_card:
      role: "Workshop/bootcamp preview in a 3-column grid"

      info: "16px border-radius card with a dark product screenshot as the visual (code editor or video call interface). A small '● LIVE' badge pinned top-left: red dot glyph + 'LIVE' in Inter 500, 12px, #171717 on a white pill. Card has no visible border — the dark image itself defines the card edge. Spacing between cards: 24px column gap, 32px row gap."

    code_editor_preview_frame:
      role: "Product showcase image"

      info: "Mac-window chrome (red/yellow/green dots top-left) wrapping a dark-themed VS Code-style editor. Editor background near #1e1e1, syntax highlighting in muted colors. Always contained within a 16px-radius frame, never full-bleed. Sits on a #ffffff card surface to make the dark UI pop."

    avatar_stack:
      role: "Inline social proof within cards or lists"

      info: "3–5 overlapping circular avatars (28–32px), each with a 1.5–2px white border (#ffffff) to separate them. Avatars are real photos, not initials. The border color matches the card surface so overlap reads as clean separation regardless of background."

    star_rating_inline:
      role: "Numeric rating display"

      info: "Five small filled stars (★) in #171717 at 12–14px, immediately followed by '4.8 (20k+)' in Inter 500 at 13–14px, #171717. Stars are rendered as a single row with 1–2px gaps. No outline, no half-star styling visible — flat filled glyphs only."

  do_s_and_don_ts:

    do:
      - "Set the page canvas to #faf9f6 (Warm Parchment) — never use pure white as the page background; pure white is reserved for card surfaces and the floating nav."
      - "Use #171717 for both primary text and primary action button fills — the shared near-black is what makes the monochrome system feel intentional rather than default."
      - "Set display headlines to 56px / Inter 600 / -3.36px letter-spacing; the tight negative tracking on large sizes is signature."
      - "Use 8px border-radius for cards and most buttons, 100px for pills (nav, badges, tags), 16px for product image cards — these three radii cover the entire system."
      - "Separate sections with 1px #f2f0e9 hairline borders or a cream-to-white surface jump, not with drop shadows."
      - "Keep all spacing on the 10px element gap / 16px card padding / 80px section gap rhythm; the density should feel compact within components and spacious between them."
      - "Render all company logos and secondary imagery in grayscale (Ash #878787 range) to preserve the zero-chromatic palette."

    don_t:
      - "Don't introduce any chromatic color — the system is deliberately zero-hue. No blue links, no green success states, no red error accents. Use grayscale weight shifts instead."
      - "Don't use 0px letter-spacing on display or heading sizes — the negative tracking (-0.04em to -0.06em) is what gives Inter its tightened, premium read at scale."
      - "Don't apply drop shadows for elevation beyond the three signature uses (nav ring, button ring, product image glow). The system is flat by default."
      - "Don't set Inter weight above 600 — the weight ladder stops at semibold; going to 700/800 breaks the typographic restraint."
      - "Don't use border-radius below 8px on interactive elements; 4px or 0px corners will read as a different (sharper, more corporate) system."
      - "Don't use #ffffff as the page background — it will flatten the warm parchment character of the entire site."
      - "Don't stack multiple surfaces of the same color (e.g., white card on white section) — the cream-to-white jump is the only surface elevation available."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Warm Parchment | `#faf9f6` | Page canvas — every section sits on this warm cream base |"
    info: "| 1 | Paper White | `#ffffff` | Card surfaces, floating nav, product preview containers |"
    info: "| 2 | Linen Wash | `#f2f0e9` | Subtle background tints, soft section dividers |"

  elevation:

    - "**Floating Pill Navigation:** `rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px`"
    - "**Primary Dark Button:** `rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px`"
    - "**Product Image Cards:** `rgba(191, 191, 191, 0.25) 0px 1px 20px 0px`"

  imagery:

    info: "The visual language is product-screenshot-led rather than photographic: dark-themed code editor windows (VS Code-style) dominate, shown in realistic workflow states with syntax highlighting and file trees. When people appear, they are candid workshop-style portraits of instructors in home/office settings — natural light, no staging, no lifestyle gloss. All images are contained within 16px-radius frames on white card surfaces, never full-bleed. Icons are minimal line-based monochrome glyphs. No illustrations, no 3D renders, no abstract graphics. The role of imagery is product proof — showing real workflows, real editors, real sessions — not decoration."

  layout:

    info: "Max-width 1200px centered on a Warm Parchment (#faf9f6) canvas. The hero is a centered text stack: eyebrow pill → 56px display headline → 18px subtext → dual CTA row (filled + ghost) → social proof cluster → grayscale company logo strip. Below the fold, the layout shifts to left-aligned section heading pairs followed by 3-column product card grids with 24px column gaps and 32px row gaps. The floating pill nav is the only persistent chrome — no full-width header, no sidebar. Section rhythm is consistent: ~80px vertical gap between sections, each section opening with an eyebrow + heading pair. Content density is compact within cards and breathing-room-generous between sections."

  agent_prompt_guide:

    quick_color_reference:
    - "Canvas: #faf9f6"
    - "Card surface: #ffffff"
    - "Border / divider: #f2f0e9"
    - "Primary text: #171717"
    - "Muted text: #6e6e6e"
    - "primary action: no distinct CTA color"

    3_5_example_component_prompts:

    - "*Floating pill navigation bar*: White (#ffffff) background, 100px border-radius, subtle outer-ring shadow (rgba(110,110,110,0.1) 0 0 0 1px, rgba(110,110,110,0.2) 0 1px 0 0). Centered horizontally, 24px from viewport top, max-width ~640px. Brand mark left in #171717 at 16px Inter 600. Nav links (Inter 500, 14px, #171717) spaced 24px apart in the center."

    - "*Hero section*: Warm Parchment (#faf9f6) background. Display headline 'Actionable AI Design Engineering & Vibe Coding Training' in Inter 600, 56px, letter-spacing -3.36px, #171717, centered, max-width 800px. Subtext 18px Inter 400, #6e6e6e, max-width 560px. Below: a small 'New' announcement pill (#171717 bg, #ffffff text, 100px radius) floating above the headline."

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

    - "*LIVE product card grid*: Three columns, 24px gap. Each card is 16px border-radius with no visible border, containing a dark code-editor screenshot (near-black #1e1e10 editor chrome) as the visual. '● LIVE' badge top-left: white pill background, red dot glyph, 'LIVE' in Inter 500 12px #171717."

    - "*Section heading pair*: Left-aligned, no centered text below the fold. Eyebrow label in Inter 500 13px #171717 (e.g., 'AI Design Bootcamps ↗'), then heading in Inter 600 32px -1.28px tracking #171717, then optional subtext in Inter 400 18px #6e6e6e. 8px gap between eyebrow and heading, 12px between heading and subtext."

  similar_brands:

    - "**Linear** — Same near-black text + monochrome palette philosophy with tight typographic tracking, though Linear leans dark-mode-first"
    - "**Vercel** — Shared designer-engineer aesthetic with achromatic palette and large display headlines in a single sans-serif weight"
    - "**Notion** — Warm off-white canvas with hairline borders replacing shadows, and text-as-interface restraint"
    - "**Rauno Freiberg** — Same flat-surface-on-warm-canvas approach with Inter as the sole typeface and zero chromatic color"
    - "**Stripe Press** — Editorial restraint — warm paper background, near-black type, pill-shaped UI elements, and complete absence of accent color"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-warm-parchment: #faf9f6;
          --color-paper-white: #ffffff;
          --color-soft-linen: #f2f0e9;
          --color-ink-black: #171717;
          --color-jet-black: #000000;
          --color-carbon: #212121;
          --color-stone: #6e6e6e;
          --color-ash: #878787;
          --color-graphite: #414141;
        
          /* 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;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.2;
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.45;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.72px;
          --text-heading: 22px;
          --leading-heading: 1.27;
          --tracking-heading: -0.88px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -1.28px;
          --text-display: 56px;
          --leading-display: 1.14;
          --tracking-display: -3.36px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 80px;
          --card-padding: 16px;
          --element-gap: 10px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 100px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-badges: 100px;
          --radius-buttons: 8px;
          --radius-navpill: 100px;
          --radius-productcards: 16px;
        
          /* Shadows */
          --shadow-subtle: rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px;
          --shadow-lg: rgba(191, 191, 191, 0.25) 0px 1px 20px 0px;
        
          /* Surfaces */
          --surface-warm-parchment: #faf9f6;
          --surface-paper-white: #ffffff;
          --surface-linen-wash: #f2f0e9;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-warm-parchment: #faf9f6;
          --color-paper-white: #ffffff;
          --color-soft-linen: #f2f0e9;
          --color-ink-black: #171717;
          --color-jet-black: #000000;
          --color-carbon: #212121;
          --color-stone: #6e6e6e;
          --color-ash: #878787;
          --color-graphite: #414141;
        
          /* 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;
        
          /* Typography — Scale */
          --text-micro: 10px;
          --leading-micro: 1.2;
          --text-caption: 13px;
          --leading-caption: 1.5;
          --text-body: 16px;
          --leading-body: 1.45;
          --text-heading-sm: 18px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.72px;
          --text-heading: 22px;
          --leading-heading: 1.27;
          --tracking-heading: -0.88px;
          --text-heading-lg: 32px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -1.28px;
          --text-display: 56px;
          --leading-display: 1.14;
          --tracking-display: -3.36px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-6: 6px;
          --spacing-7: 7px;
          --spacing-8: 8px;
          --spacing-10: 10px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-26: 26px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-lg: 8px;
          --radius-xl: 12px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
          --radius-3xl-2: 28px;
          --radius-3xl-3: 44px;
          --radius-full: 100px;
        
          /* Shadows */
          --shadow-subtle: rgba(110, 110, 110, 0.1) 0px 0px 0px 1px, rgba(110, 110, 110, 0.2) 0px 1px 0px 0px;
          --shadow-lg: rgba(191, 191, 191, 0.25) 0px 1px 20px 0px;
        }