swwim___style_reference:
  info: "> Cobalt wave with floating luxury objects."

  info: "A vivid blue ocean where oversized white type is pierced by editorial product still-lifes."

  theme: "light"

  info: "Swwim is a full-bleed, blue-saturated agency site where the hero IS the brand: a massive all-caps Baton Turbo display at 151px sits on a vivid cobalt field, scattered with floating product crops (a diamond ring, a Givenchy sandal, a megaphone) that overlap the letterforms. The rest of the system stays disciplined — white canvas pages, hairline #e5e7eb borders, pill-shaped controls with 9999px radius, Greycliff for everything readable. The color palette is nearly monochromatic: one hero blue (#1658b3) carries the page, with deeper #0d3c88 and darkest #01295f as gradient depth inside decorative graphics, and a single warm #eee1d9 flesh-tone accent peeking through illustration fills. Components are flat, borderless against the blue, and almost borderless against white — elevation comes from typography weight, not shadow stacks."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Cobalt Current | `#1658b3` | `--color-cobalt-current` | Hero background, primary surface flood, outlined-link borders — the single color that defines every full-bleed section |"
    info: "| Deep Channel | `#0d3c88` | `--color-deep-channel` | Darker blue for gradient depth in decorative graphics, icon accents, footer bands |"
    info: "| Electric Ripple | `#015fee` | `--color-electric-ripple` | Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |"
    info: "| Abyssal Ink | `#01295f` | `--color-abyssal-ink` | Darkest blue used inside SVG decoration and deep gradient stops — never as text or button |"
    info: "| White Canvas | `#ffffff` | `--color-white-canvas` | Page background, body text on blue, primary pill button fill — the neutral that carries white sections and inverts on blue |"
    info: "| Cloud Border | `#e5e7eb` | `--color-cloud-border` | Hairline dividers, card borders, separator rules across all white surfaces — the structural neutral of the system |"
    info: "| Carbon | `#000000` | `--color-carbon` | Body text on white, icon fills in black-mode illustrations |"
    info: "| Nude Clay | `#eee1d9` | `--color-nude-clay` | Warm flesh-tone accent inside decorative illustration fills and strokes — the only chromatic neutral, used to humanize blue compositions |"

  tokens___typography:

    baton_turbo___display_and_oversized_headlines_only___the_151px_hero_weight_is_the_signature_choice__a_single_weight_400_stretched_across_14px_to_151px_to_create_the_full_editorial_scale____font_baton_turbo:
      - "**Substitute:** Druk Wide, Tungsten, Antonio"
      - "**Weights:** 400"
      - "**Sizes:** 14px, 16px, 18px, 29px, 36px, 48px, 151px"
      - "**Line height:** 1.00–1.56"
      - "**Role:** Display and oversized headlines only — the 151px hero weight is the signature choice, a single weight (400) stretched across 14px to 151px to create the full editorial scale"

    greycliff___body__ui_labels__nav__buttons__badges__footer___the_working_typeface_at_three_weights__with_500_700_reserved_for_small_headings_and_nav_emphasis____font_greycliff:
      - "**Substitute:** Inter, Manrope, DM Sans"
      - "**Weights:** 400, 500, 700"
      - "**Sizes:** 14px, 16px, 18px, 20px, 24px, 30px"
      - "**Line height:** 1.20–1.56"
      - "**Letter spacing:** normal"
      - "**Role:** Body, UI labels, nav, buttons, badges, footer — the working typeface at three weights, with 500/700 reserved for small headings and nav emphasis"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| body-sm | 14px | 1.43 | — | `--text-body-sm` |"
      info: "| body | 16px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 18px | 1.56 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.4 | — | `--text-subheading` |"
      info: "| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |"
      info: "| heading | 30px | 1.25 | — | `--text-heading` |"
      info: "| heading-lg | 36px | 1.2 | — | `--text-heading-lg` |"
      info: "| display | 48px | 1.11 | — | `--text-display` |"
      info: "| hero | 151px | 1 | — | `--text-hero` |"

  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: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 36 | 36px | `--spacing-36` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 128 | 128px | `--spacing-128` |"
      info: "| 224 | 224px | `--spacing-224` |"

    border_radius:

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

    layout:

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

  components:

    white_pill_cta:
      role: "Primary action button"

      info: "Filled white pill on blue or white surfaces, 9999px radius, 16px 24px padding, Greycliff 500 at 16px, text in Cobalt Current (#1658b3). The signature control — no shadows, no border, shape alone communicates the action."

    ghost_nav_button:
      role: "Secondary header action"

      info: "White text on blue header, no background, 16px Greycliff 500, sits inline with a Menu label and hamburger icon. Underline or icon pairing is the only affordance."

    header_logo_lockup:
      role: "Brand mark in navigation"

      info: "Wordmark 'swwim' in white Greycliff 500 lowercase, followed by a 1px vertical white divider, then the descriptor 'Social Media Marketing' in Greycliff 400. Left-aligned, no logo image."

    hero_headline:
      role: "Primary page statement"

      info: "Baton Turbo 400 at 151px, white on Cobalt Current (#1658b3), all-caps, line-height 1.0. Product images absolutely positioned to overlap letterforms — a deliberate collage effect, never centered-clean."

    hero_body_caption:
      role: "Supporting hero copy"

      info: "Greycliff 400 at 18px, white, line-height 1.56, placed in the negative space beside the headline. No quotation marks, no italics — plain prose that lets the display type carry the weight."

    dive_in_link:
      role: "Anchor for scroll"

      info: "Small Greycliff 500 link with a circled down-arrow icon, white on blue, 14-16px. The site's only repeated micro-link style — used to invite the user below the fold."

    service_marquee:
      role: "Horizontal service ticker"

      info: "Full-bleed white-on-blue band, Baton Turbo 400 all-caps at 29-36px, separated by bullet dots, scrolling horizontally or static. Sits flush to the bottom of the hero as a visual footer for the section."

    product_float_image:
      role: "Decorative product crop"

      info: "Tightly cropped object photography (rings, shoes, packaging) absolutely positioned over the hero headline, no border-radius, no shadow, no caption. The objects overlap letterforms to create a collage system."

    white_surface_card:
      role: "Content container on white"

      info: "24px padding, 1px #e5e7eb border, no radius, no shadow. The default card treatment — flat, hairline-bordered, relying on white-space rather than elevation."

    icon:
      role: "UI iconography"

      info: "Minimal stroked icons, 1.5-2px stroke weight, monochromatic white on blue or Carbon on white. Used sparingly — the megaphone and arrow-down are the only icon-shaped elements visible."

  do_s_and_don_ts:

    do:
      - "Use Baton Turbo only for display and oversized headlines — 29px and up; never set it below 20px"
      - "Set the hero headline at 151px on the cobalt background, line-height 1.0, all-caps, with at least one product image overlapping the letterforms"
      - "Use 9999px radius for every button, tag, and pill control — there are no rounded-corner cards or inputs in this system"
      - "Keep surfaces flat: 1px #e5e7eb hairline borders separate content, never drop shadows"
      - "Let #1658b3 carry full-bleed sections as the dominant surface; reserve white for content pages and #0d3c88 for footer/gradient depth"
      - "Use Greycliff 500 for interactive labels and small headings, 400 for body, 700 sparingly for emphasis"
      - "Place a 1px white vertical divider between the wordmark and the descriptor in the header lockup"

    don_t:
      - "Do not use Baton Turbo for body copy, nav labels, buttons, or anything below 20px — it loses its editorial voice at small sizes"
      - "Do not introduce drop shadows, glows, or multi-layer elevation stacks — the system is intentionally flat"
      - "Do not add chromatic colors outside the blue family plus the single #eee1d9 flesh tone accent"
      - "Do not center the hero composition in a clean symmetrical layout — the scattered overlapping product crops are the signature"
      - "Do not round card corners or input fields; the only radius in the system is the 9999px pill"
      - "Do not use 151px type outside the hero; the display scale steps sharply down to 48px"
      - "Do not break the blue monochrome with a contrasting CTA color — the white pill on blue IS the action pattern"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 1 | White Canvas | `#ffffff` | Default page background for all content sections |"
    info: "| 2 | Cobalt Field | `#1658b3` | Full-bleed hero and section floods — the dominant branded surface |"
    info: "| 3 | Deep Channel | `#0d3c88` | Gradient depth and decorative fills |"

  imagery:

    object_photography_is_the_signature: "tightly cropped luxury product still-lifes (diamond ring, Givenchy sandal, beauty packaging) floating as overlapping elements over the hero typography. No lifestyle photography, no portraits, no environmental context — each object is hero on its own. The megaphone illustration is the only drawn graphic, rendered in flat brand colors with no outline. Imagery is full-bleed in spirit (objects escape their containers to overlap type) but the individual crops are unframed rectangles, not rounded or masked. Iconography is minimal and line-based, monochromatic."

  layout:

    info: "Full-bleed cobalt hero dominates the first viewport with a centered-but-asymmetric composition: oversized headline on the left, supporting body copy nested in the negative space right of center, product images absolutely positioned to break the type grid. Below the hero, a full-width white-on-blue service marquee ticker runs horizontally. Subsequent content sections are white-canvas with 1px hairline dividers, 24px card padding, and a 1440px max-width centered column. The header is a minimal top bar — wordmark left, single pill CTA + menu right — not sticky, not mega. Navigation is a single line, no dropdowns visible. Vertical rhythm is generous (64px section gaps) but the hero itself is deliberately dense through type-image overlap."

  agent_prompt_guide:

  quick_color_reference:
    - "text on white: Carbon (#000000)"
    - "text on blue: White Canvas (#ffffff)"
    - "page background: White Canvas (#ffffff)"
    - "hero / section flood: Cobalt Current (#1658b3)"
    - "border / divider: Cloud Border (#e5e7eb)"
    - "decorative accent: Nude Clay (#eee1d9)"
    - "primary action: #1658b3 (outlined action border)"

  3_example_component_prompts:

    - "**Hero with floating product crops**: Full-bleed Cobalt Current (#1658b3) background. Headline at 151px Baton Turbo weight 400, all-caps, white, line-height 1.0, occupying the left two-thirds. One product image (tightly cropped, no border, no radius) absolutely positioned to overlap the lower-right letterforms. Supporting body copy in Greycliff 400, 18px, white, line-height 1.56, placed in the negative space right of center. 64px top and bottom padding."

    - "**White Pill Button**: 9999px radius, 16px vertical / 24px horizontal padding, white fill, text in Greycliff 500 at 16px colored Cobalt Current (#1658b3). No border, no shadow. Sits inline with body content on white or on a blue surface."

    - "**Service Marquee Band**: Full-bleed Cobalt Current (#1658b3), 64px vertical padding, horizontally scrolling or static line of services separated by white bullet dots. Text is Baton Turbo 400 all-caps at 36px, white. Tightly packed — services run edge-to-edge with 24px gaps between items."

    - "**White Surface Card**: White background, 24px padding on all sides, 1px solid #e5e7eb border, 0px radius, no shadow. Body text in Greycliff 400, 16px, Carbon (#000000). Optional heading in Greycliff 500, 20px."

    - "**Header Lockup**: White background section, 'swwim' wordmark in Greycliff 500 lowercase 24px white, followed by a 1px wide × 24px tall white vertical divider with 12px margin on each side, then 'Social Media Marketing' descriptor in Greycliff 400 14px white. Right-aligned: white pill 'Contact Us' button + 'Menu' label in Greycliff 500 16px + hamburger icon."

  similar_brands:

    - "**Gretel** — Editorial agency layouts with oversized display type overlapping small product or texture crops on a bold single-color field"
    - "**Resn** — Full-bleed brand-color sections paired with playful scattered object imagery and confident oversized headlines"
    - "**Locomotive** — Agency portfolio pattern of full-bleed saturated hero bands and restrained white content sections beneath"
    - "**Gunner** — Monochromatic blue-dominant brand systems with pill-shaped controls and a single working neutral palette"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-cobalt-current: #1658b3;
          --color-deep-channel: #0d3c88;
          --color-electric-ripple: #015fee;
          --color-abyssal-ink: #01295f;
          --color-white-canvas: #ffffff;
          --color-cloud-border: #e5e7eb;
          --color-carbon: #000000;
          --color-nude-clay: #eee1d9;
        
          /* Typography — Font Families */
          --font-baton-turbo: 'Baton Turbo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-greycliff: 'Greycliff', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.11;
          --text-hero: 151px;
          --leading-hero: 1;
        
          /* 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-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-224: 224px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 64px;
          --card-padding: 24px;
          --element-gap: 8-16px;
        
          /* Border Radius */
          --radius-full: 9999px;
        
          /* Named Radii */
          --radius-tags: 9999px;
          --radius-cards: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 9999px;
        
          /* Surfaces */
          --surface-white-canvas: #ffffff;
          --surface-cobalt-field: #1658b3;
          --surface-deep-channel: #0d3c88;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-cobalt-current: #1658b3;
          --color-deep-channel: #0d3c88;
          --color-electric-ripple: #015fee;
          --color-abyssal-ink: #01295f;
          --color-white-canvas: #ffffff;
          --color-cloud-border: #e5e7eb;
          --color-carbon: #000000;
          --color-nude-clay: #eee1d9;
        
          /* Typography */
          --font-baton-turbo: 'Baton Turbo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-greycliff: 'Greycliff', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-body-sm: 14px;
          --leading-body-sm: 1.43;
          --text-body: 16px;
          --leading-body: 1.5;
          --text-body-lg: 18px;
          --leading-body-lg: 1.56;
          --text-subheading: 20px;
          --leading-subheading: 1.4;
          --text-heading-sm: 24px;
          --leading-heading-sm: 1.33;
          --text-heading: 30px;
          --leading-heading: 1.25;
          --text-heading-lg: 36px;
          --leading-heading-lg: 1.2;
          --text-display: 48px;
          --leading-display: 1.11;
          --text-hero: 151px;
          --leading-hero: 1;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-36: 36px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-128: 128px;
          --spacing-224: 224px;
        
          /* Border Radius */
          --radius-full: 9999px;
        }