gumroad___style_reference:
  info: "> Pink coin on a cream sketchbook. Warm off-white canvas, inky geometric type, and a single hot-pink coin mascot stamped across every page like a sticker on a notebook."

  theme: "light"

  info: "Gumroad is a warm-cream canvas stamped with a single hand-drawn pink coin motif and an inky geometric sans. The off-white #f4f4f0 background feels like a sketchbook page; black type and black filled buttons land on it with the weight of a marker stroke. Surfaces stay flat — white cards sit on the warm canvas with thin gray hairline borders rather than shadows. Saturated color appears in small, deliberate punctuation: a pink coin mascot, yellow and green accent swatches used as inline color markers, and the occasional red highlight. The tone is informal, creator-first, anti-corporate — typography is tight, tracking pulls negative on display sizes, and the type scale stretches from 14px body up to 192px hero type, all from one family. Components are utility-shaped (4px radii on inputs and buttons, 16–24px on larger cards) and never decorated with gradients or glow."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas Cream | `#f4f4f0` | `--color-canvas-cream` | Page background, input fills, and the warm base layer every other surface sits on |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Card and product-tile surfaces elevated above the cream canvas |"
    info: "| Ink Black | `#000000` | `--color-ink-black` | Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color |"
    info: "| Graphite | `#242423` | `--color-graphite` | Secondary text and input borders; reads as a softened black when true black would feel too harsh against cream |"
    info: "| Hairline | `#d1d5dc` | `--color-hairline` | Card and button borders, dividers, and ghost-button outlines |"
    info: "| Coin Pink | `#ff90e8` | `--color-coin-pink` | Brand mascot coin fills, decorative accents, and the single chromatic signature of the product |"
    info: "| Highlight Yellow | `#ffc900` | `--color-highlight-yellow` | Accent swatches and small punctuation marks — never backgrounds of full components |"
    info: "| Highlight Lime | `#f1f333` | `--color-highlight-lime` | Accent swatches used alongside yellow as a paired color-marker system |"
    info: "| Highlight Vermillion | `#dc341e` | `--color-highlight-vermillion` | Accent swatch for the third color in the marker trio; reserved for emphasis only |"

  tokens___typography:

    abc_favorit___the_sole_type_family_across_the_system___used_for_headings__body__buttons__inputs__and_even_icons__weights_split_into_400_body_ui__500_emphasis__prices__nav__700_display_and_oversized_marketing_type__letter_spacing_pulls_negative_on_every_step_above_24px__reaching__0_029em_at_192px__which_tightens_the_geometric_forms_into_a_confident__almost_stencil_like_display_voice__the_stylistic_alternates_ss04_and_ss11_are_always_on_and_shape_the_personality_of_every_glyph_____font_abc_favorit:
      - "**Substitute:** Inter (closest freely available geometric grotesque with similar apertures) or General Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14, 16, 18, 20, 24, 30, 36, 48, 72, 96, 192"
      - "**Line height:** 1.20 (body), 0.90–1.00 (display)"
      - "**Letter spacing:** Tracking is negative on every step: -0.0020em at 14px, -0.0040em at 16px, -0.0060em at 18px, -0.0080em at 20px, -0.0110em at 24px, -0.0130em at 30px, -0.0170em at 36px, -0.0200em at 48px, -0.0220em at 72px, -0.0250em at 96px, -0.0290em at 192px"
      - "**OpenType features:** `\"ss04\" on, \"ss11\" on`"
      - "**Role:** The sole type family across the system — used for headings, body, buttons, inputs, and even icons. Weights split into 400 (body/UI), 500 (emphasis, prices, nav), 700 (display and oversized marketing type). Letter-spacing pulls negative on every step above 24px, reaching -0.029em at 192px, which tightens the geometric forms into a confident, almost stencil-like display voice. The stylistic alternates ss04 and ss11 are always on and shape the personality of every glyph."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 14px | 1.43 | -0.028px | `--text-caption` |"
      info: "| body-sm | 16px | 1.5 | -0.064px | `--text-body-sm` |"
      info: "| body | 18px | 1.56 | -0.108px | `--text-body` |"
      info: "| subheading | 24px | 1.33 | -0.264px | `--text-subheading` |"
      info: "| heading-sm | 30px | 1.38 | -0.39px | `--text-heading-sm` |"
      info: "| heading | 36px | 1.4 | -0.612px | `--text-heading` |"
      info: "| heading-lg | 48px | 1.25 | -0.96px | `--text-heading-lg` |"
      info: "| display | 96px | 1 | -2.4px | `--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: "| 32 | 32px | `--spacing-32` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 56 | 56px | `--spacing-56` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 160 | 160px | `--spacing-160` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 16px |"
      info: "| tiles | 24px |"
      info: "| inputs | 4px |"
      info: "| buttons | 4px |"

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 40-48px"
      - "**Card padding:** 24-32px"
      - "**Element gap:** 8-16px"

  components:

    filled_black_button:
      role: "Primary action — the only solid-color button in the system"

000000_background__ffffff_text_in_abc_favorit_16px___500__4px_radius__12px_24px_padding__no_border__used_for_the_main_cta_on_each_page_e_g___start_selling__text_is_the_only_white_element_allowed_to_sit_on_black__never_put_a_colored_fill_behind_it:

    ghost_outline_button:
      role: "Secondary action paired next to the filled black button"

      info: "Transparent background on the cream canvas, #000000 text in 16px / 500, 1px border in #d1d5dc, 4px radius, 12px 24px padding. Reads as the soft counterpart to the black filled button."

    search_input:
      role: "Marketplace search field embedded inline in the hero"

ffffff_background__1px_d1d5dc_border__4px_radius__12px_16px_padding__placeholder_in_242423_at_16px___400__trailing_search_icon_button_is_a_square_40_40_inset_in_the_same_border_color:

    nav_pill_active:
      role: "Currently selected top-nav item"

000000_pill_with_ffffff_text_in_14px___500__full_radius_9999px__6px_12px_padding__sits_inline_with_the_regular_text_nav_links_to_mark_the_active_page:

    stat_badge:
      role: "Inline social-proof chip — the '8.9K ★' marker beside the wordmark"

ffffff_background__1px_000000_border__full_radius_9999px__4px_8px_padding__text_in_abc_favorit_14px___500_in_000000__star_icon_inline:

    product_tile_card:
      role: "White card showing a creator's product preview in the marketplace"

ffffff_background__1px_d1d5dc_border__16px_radius__no_shadow__internal_layout__12px_row_gap_between_thumbnail_image__title_abc_favorit_18px___500__and_price_abc_favorit_16px___500_in_000000__tile_sits_on_the_cream_canvas_with_32px_gap_between_siblings_in_a_grid:

    feature_card:
      role: "Larger content block used in feature sections like 'Sell anything' and 'Make your own road'"

ffffff_background__1px_d1d5dc_border__24px_radius__32_40px_internal_padding__heading_at_abc_favorit_30_36px___500_in_000000__optional_supporting_copy_at_16px___400_in_242423__generous_breathing_room___no_shadows__only_the_hairline_border_to_define_the_edge:

    phone_mockup_frame:
      role: "Decorative device frame that holds a product screenshot inside feature cards"

      info: "Outlined phone illustration in #242423 stroke, white screen, 16px radius on the device, content (a small product card) inset with 8px padding. Always rendered as a flat illustration, never a photo."

    pink_coin_mascot:
      role: "Signature decorative element scattered across hero and feature sections"

      info: "Flat hot-pink #ff90e8 ellipse with a 1px #000000 stroke, 45° tilt, centered black 'G' set in ABC Favorit 700. Used at 60–160px sizes; always floating, never as a clickable element."

    color_marker_swatch:
      role: "Tiny inline color chip used as a decorative period or bullet"

      info: "Small 8–12px square or circle in #ffc900, #f1f333, #dc341, or #ff90e8. Placed inline with text as a playful replacement for a dot or comma. Never carries information on its own."

    footer_link:
      role: "Low-weight secondary navigation"

      info: "ABC Favorit 14px / 400 in #242423, no underline, 8px vertical gap between siblings. Hover state lifts to #000000."

  do_s_and_don_ts:

    do:
      - "Use ABC Favorit with 'ss04' and 'ss11' feature settings on at all times — these alternates are part of the brand voice."
      - "Set the page background to #f4f4f0 and every card surface to #ffffff with a 1px #d1d5dc border; never use shadows to separate layers."
      - "Make the primary action a solid #000000 button with white text at 4px radius — the only filled button in the system."
      - "Keep all display type from 30px upward with negative letter-spacing reaching -2.4px at 96px; tracking is part of the aesthetic."
      - "Use the pink coin (#ff90e8) only as the mascot and as one item in the yellow / lime / vermillion / pink marker palette; never as a button background."
      - "Pad section blocks with 40–48px vertical rhythm and 12–16px between UI elements; use 58px horizontal page padding on hero areas."
      - "Round cards at 16px (product tiles) or 24px (feature cards) and round buttons, inputs, and nav pills at 4px or 9999px — never an intermediate value."

    don_t:
      - "Don't add box-shadows to cards, buttons, or navigation; the system expresses depth with hairline #d1d5dc borders only."
      - "Don't introduce gradients — the palette is fully flat; color appears as solid fills only."
      - "Don't use blue, purple, or any hue outside the cream / black / pink / yellow / lime / vermillion set."
      - "Don't create a colored CTA — black is the only filled button color; secondary actions are ghost-outlined in #d1d5dc."
      - "Don't set body text below 14px or use anything other than ABC Favorit (or its substitute) for the entire interface."
      - "Don't set the canvas to pure #ffffff; the warm #f4f4f0 cream is what makes the system feel like a sketchbook rather than a blank app shell."
      - "Don't use the accent colors (#ffc900, #f1f333, #dc341e) as full backgrounds of components — they live only as small swatches and inline punctuation."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#f4f4f0` | Page-level warm off-white base that all sections sit on |"
    info: "| 1 | Card | `#ffffff` | Product tiles, feature cards, and content blocks lifted off the canvas |"
    info: "| 2 | Filled Action | `#000000` | The only solid black surface — primary CTA buttons and the active nav pill |"

  imagery:

    info: "Illustration-driven, not photographic. The dominant visual motif is a flat hot-pink (#ff90e8) coin with a black 'G' and a thin black outline, scattered at multiple sizes and 45° tilts as a mascot. Secondary visuals are flat product mockups rendered inside a black-outlined phone frame sitting on a white screen. The illustration style is hand-drawn and slightly wobbly — line work is 1–2px black strokes, fills are flat, no gradients or shading. Icons are inline 1px black line glyphs drawn in the same stroke language. Photography is absent; the system relies on creator-product screenshots and vector coin/phone illustrations to carry visual interest."

  layout:

    info: "Max-width 1200px centered content with full-bleed cream #f4f4f0 background. Hero is a single centered column — oversized 72–96px headline, a 1–2 line subhead, then a horizontal row containing a black filled CTA plus a white-outlined search input side by side, followed by a small 'Contribute on GitHub' helper line. The mascot coins float as absolute-positioned decorative elements in the hero corners at 45° tilts, breaking the centered alignment. Below the hero, the page flows into a 2-column or 3-column card grid for product tiles and feature blocks, with alternating white card surfaces on the cream canvas separated by 40–48px vertical gaps. The top navigation is a single horizontal bar with the wordmark on the left, text links centered, and 'Log in' plus a black 'Start selling' CTA on the right; an active nav link is marked by a black filled pill behind white text. Sections never alternate dark/light — the whole page stays on cream with white cards."

  agent_prompt_guide:

    info: "Quick Color Reference"
    - "text: #000000 (primary), #242423 (secondary)"
    - "background: #f4f4f0 (canvas), #ffffff (cards)"
    - "border: #d1d5dc (hairline)"
    - "accent: #ff90e8 (pink coin mascot)"
    - "primary action: no distinct CTA color"
    - "secondary marker: #ffc900 / #f1f333 / #dc341e (inline swatches only)"

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

    - "Product tile card: #ffffff background, 1px #d1d5dc border, 16px radius, 24px padding, no shadow. Thumbnail 16:9 image filling width with 8px radius, 12px gap, then title in ABC Favorit 18px / 500 #000000, then price in 16px / 500 #000000. Sits on the cream canvas in a 3-column grid with 32px gap between tiles."

    - "Feature card: #ffffff background, 1px #d1d5dc border, 24px radius, 40px padding. Heading 'Sell anything' in ABC Favorit 36px / 500, #000000, letter-spacing -0.612px, followed by supporting copy in 16px / 400 #242423 with 12px top gap. Optional phone-mockup illustration on the right: 1px #242423 stroke outline, white screen, 16px device radius, flat product preview inside."

  similar_brands:

    - "**Substack** — Same off-white canvas, oversized single-family geometric sans for headlines, and a single accent-orange CTA — the anti-corporate creator-platform look."
    - "**Buy Me a Coffee** — Same warm cream background, flat illustration mascots, informal tone, and a high-contrast black filled CTA anchoring the hero."
    - "**Kofi / Gumroad competitor set** — Shared creator-economy visual language: hairline-bordered cards, 4px-radius controls, and zero box-shadow depth."
    - "**Carrd** — Same single-typeface system, tight negative tracking on display, and ultra-flat card surfaces with hairline borders."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas-cream: #f4f4f0;
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-graphite: #242423;
          --color-hairline: #d1d5dc;
          --color-coin-pink: #ff90e8;
          --color-highlight-yellow: #ffc900;
          --color-highlight-lime: #f1f333;
          --color-highlight-vermillion: #dc341e;
        
          /* Typography — Font Families */
          --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.028px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.064px;
          --text-body: 18px;
          --leading-body: 1.56;
          --tracking-body: -0.108px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.264px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.39px;
          --text-heading: 36px;
          --leading-heading: 1.4;
          --tracking-heading: -0.612px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -0.96px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -2.4px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 40-48px;
          --card-padding: 24-32px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        
          /* Named Radii */
          --radius-cards: 16px;
          --radius-tiles: 24px;
          --radius-inputs: 4px;
          --radius-buttons: 4px;
        
          /* Surfaces */
          --surface-canvas: #f4f4f0;
          --surface-card: #ffffff;
          --surface-filled-action: #000000;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas-cream: #f4f4f0;
          --color-paper-white: #ffffff;
          --color-ink-black: #000000;
          --color-graphite: #242423;
          --color-hairline: #d1d5dc;
          --color-coin-pink: #ff90e8;
          --color-highlight-yellow: #ffc900;
          --color-highlight-lime: #f1f333;
          --color-highlight-vermillion: #dc341e;
        
          /* Typography */
          --font-abc-favorit: 'ABC Favorit', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 14px;
          --leading-caption: 1.43;
          --tracking-caption: -0.028px;
          --text-body-sm: 16px;
          --leading-body-sm: 1.5;
          --tracking-body-sm: -0.064px;
          --text-body: 18px;
          --leading-body: 1.56;
          --tracking-body: -0.108px;
          --text-subheading: 24px;
          --leading-subheading: 1.33;
          --tracking-subheading: -0.264px;
          --text-heading-sm: 30px;
          --leading-heading-sm: 1.38;
          --tracking-heading-sm: -0.39px;
          --text-heading: 36px;
          --leading-heading: 1.4;
          --tracking-heading: -0.612px;
          --text-heading-lg: 48px;
          --leading-heading-lg: 1.25;
          --tracking-heading-lg: -0.96px;
          --text-display: 96px;
          --leading-display: 1;
          --tracking-display: -2.4px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-56: 56px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-160: 160px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-md: 4px;
          --radius-2xl: 16px;
          --radius-3xl: 24px;
        }