Homerun

# Homerun — Style Reference
> Warm, playful professionalism with soft edges.

**Theme:** light

Homerun employs a whimsical, modern aesthetic through a muted, earthy color palette punctuated by vibrant, deep blues and a playful use of soft, chunky card shadows. Typography is clean and confident, creating a comfortable information hierarchy. Components feature generous padding, organic rounded corners, and a light-hearted visual rhythm that prioritizes a friendly user experience over stark efficiency.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, card surfaces, ghost button backgrounds, default text color on dark surfaces |
| Vanilla Cream | `#faf9f7` | `--color-vanilla-cream` | Secondary card surfaces, subtle background variations |
| Paper Beige | `#edebe7` | `--color-paper-beige` | Tertiary card backgrounds, button borders, subtle surface accents |
| Warm Gray | `#736b6b` | `--color-warm-gray` | Muted text, secondary navigation links, subtle borders |
| Charcoal Coffee | `#4a3e3e` | `--color-charcoal-coffee` | Primary text, darker borders, icon fills, placeholder text |
| Deep Mocha | `#2d2323` | `--color-deep-mocha` | Headline text, strong accents, button text on light surfaces |
| True Black | `#000000` | `--color-true-black` | Strongest contrast for headlines and critical information |
| Royal Blue | `#4f75fe` | `--color-royal-blue` | Primary action buttons, active navigation states, interactive links, brand accents — a vibrant, trustworthy blue |
| Oceanic Blue | `#c9d5fd` | `--color-oceanic-blue` | Soft background washes, decorative card elements |
| Grape Punch | `#f0a8fa` | `--color-grape-punch` | Decorative card backgrounds, accent surfaces |
| Bubblegum Pink | `#d386de` | `--color-bubblegum-pink` | Distinctive card shadow color — a playful, vibrant elevation cue |
| Spring Green | `#00c275` | `--color-spring-green` | Green action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color |
| Rich Blue | `#4353ff` | `--color-rich-blue` | Secondary action button fill and border |

## Tokens — Typography

### GT America — Primary UI text, body copy, navigation, buttons, and most informational elements. Its clarity and range of weights provide a solid, readable foundation. · `--font-gt-america`
- **Substitute:** Inter
- **Weights:** 400, 500, 700
- **Sizes:** 13px, 14px, 16px, 18px, 20px, 22px, 28px, 50px
- **Line height:** 1.11, 1.20, 1.25, 1.30, 1.38, 1.40, 1.43, 1.44, 1.45, 2.00
- **Letter spacing:** normal
- **Role:** Primary UI text, body copy, navigation, buttons, and most informational elements. Its clarity and range of weights provide a solid, readable foundation.

### GT Walsheim — Display headlines and hero text. The extra bold weight and subtle, proportional negative letter-spacing give it a confident, modern presence without being overly aggressive. · `--font-gt-walsheim`
- **Substitute:** Montserrat
- **Weights:** 900
- **Sizes:** 20px, 22px, 30px, 34px, 48px, 64px, 82px
- **Line height:** 1.00, 1.10, 1.18, 1.20, 1.40
- **Letter spacing:** -0.0230em at 82px, -0.0160em at 64px, -0.0150em at 48px, -0.0070em at 34px, -0.0040em at 30px
- **Role:** Display headlines and hero text. The extra bold weight and subtle, proportional negative letter-spacing give it a confident, modern presence without being overly aggressive.

### Oliver — Likely used for decorative quotes or specific brand messaging, bringing an artistic, serif touch. · `--font-oliver`
- **Substitute:** DM Serif Display
- **Weights:** 400
- **Sizes:** 22px
- **Line height:** 1.40
- **Letter spacing:** normal
- **Role:** Likely used for decorative quotes or specific brand messaging, bringing an artistic, serif touch.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.45 | — | `--text-caption` |
| body | 16px | 1.43 | — | `--text-body` |
| subheading | 20px | 1.25 | — | `--text-subheading` |
| heading-sm | 22px | 1.2 | — | `--text-heading-sm` |
| heading | 30px | 1.2 | -0.12px | `--text-heading` |
| heading-lg | 48px | 1.18 | -0.72px | `--text-heading-lg` |
| display | 82px | 1 | -1.89px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 32 | 32px | `--spacing-32` |
| 36 | 36px | `--spacing-36` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 20-40px |
| links | 100px |
| inputs | 30px |
| buttons | 10-12px |
| default | 10px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| sm | `rgb(211, 134, 222) 0px 4px 5px 0px` | `--shadow-sm` |
| subtle | `rgb(31, 24, 24) 0px 0px 0px 8px` | `--shadow-subtle` |
| subtle-2 | `rgb(227, 225, 221) 0px 2px 0px 0.5px` | `--shadow-subtle-2` |

### Layout

- **Section gap:** 43px
- **Card padding:** 12px
- **Element gap:** 8px

## Components

### Ghost Navigation Button
**Role:** Secondary navigation and utility actions.

Text: Charcoal Coffee (#4a3e3e), no background. Border: Charcoal Coffee (#4a3e3e), 0px radius. Padding: 14px vertical, 20-24px horizontal. Appears as a text link with a bottom border on hover.

### Primary CTA Button
**Role:** Key conversion action.

Background: Royal Blue (#4f75fe), Text: Canvas White (#ffffff). Radius: 12px. Padding: 12px vertical, 16-20px horizontal. Emphasizes urgency and brand identity.

### Standard Button
**Role:** General purpose buttons.

Background: Canvas White (#ffffff), Text: Charcoal Coffee (#4a3e3e). Border: Paper Beige (#edebe7). Radius: 10px. Padding: 12px vertical, 16-20px horizontal.

### Small Text Button with Icon
**Role:** In-line actions or links within denser content.

Background: Transparent. Text: Deep Mocha (#2d2323). Border: Deep Mocha (#2d2323). Radius: 10px. Padding: 0px vertical, 0-12px horizontal. Used for compact actions, often with an arrow icon.

### Hero Card with Playful Shadow
**Role:** Visually appealing content blocks.

Background: Grape Punch (#f0a8fa). Radius: 20px. Box Shadow: Bubblegum Pink (#d386de) 0px 4px 5px 0px. Padding: 60px vertical, 50px horizontal.

### Neutral Content Card
**Role:** Standard content containers, features, testimonials.

Background: Vanilla Cream (#faf9f7) or Paper Beige (#edebe7). Radius: 20-40px. No shadow. Padding: 40-48px vertical, 48-64px horizontal.

### Outline Input
**Role:** User input fields.

Background: rgba(45, 35, 35, 0.1). Text: Charcoal Coffee (#4a3e3e). Border: Warm Gray (#595d68). Radius: 30px (left side), 0px (right side). Padding: 8px vertical, 12-20px horizontal for a pill-like shape.

### Cookie Consent Modal
**Role:** Legal consent UI.

Background: Canvas White (#ffffff). Radius: 20px. No shadow. Padding: Not directly specified, but internally uses standard component structure.

### Cookie Consent Confirm Button
**Role:** Action within cookie consent modal.

Background: Rich Blue (#4353ff). Text: Canvas White (#ffffff). Border: Rich Blue (#4353ff). Radius: 12px. Padding: 12px vertical, 16-20px horizontal.

### HR Feature Tag
**Role:** Categorization or feature highlight.

Background: Spring Green (#00c275). Text: Canvas White (#ffffff). Border radius: 12px. Padding: 12px vertical, 16px horizontal. Signifies HR-related content.

## Do's and Don'ts

### Do
- Prioritize Royal Blue (#4f75fe) for primary actions and active states.
- Use GT Walsheim 900 for all display and large headlines, applying proportional negative letter-spacing for visual punch.
- Apply generous padding (40-60px vertical, 48-64px horizontal) to cards to create a spacious feel.
- Utilize soft, organic border radii: 20px for most cards, up to 40px for larger decorative cards, and 10-12px for buttons.
- Employ the Bubblegum Pink (#d386de) for soft, vibrant card shadows, moving away from conventional grayscale shadows.
- Maintain a clear hierarchy: Deep Mocha (#2d2323) for headlines, Charcoal Coffee (#4a3e3e) for body text, and Warm Gray (#736b6b) for muted or secondary information.
- Leverage Canvas White (#ffffff), Vanilla Cream (#faf9f7), and Paper Beige (#edebe7) for layered background surfaces.

### Don't
- Avoid harsh, sharp corners; all component corners should have a radius of at least 10px.
- Do not use dark, heavy shadows; opt for the light-hearted Bubblegum Pink (#d386de) shadow or no shadow.
- Do not introduce new saturated hues outside of Royal Blue (#4f75fe) or the accent purples and pinks for UI elements.
- Do not use highly dense layouts; ensure ample negative space around elements and between sections.
- Do not use generic system fonts for any text role; always use GT America or GT Walsheim (or their recommended substitutes).
- Avoid purely black text (#000000) for standard body copy; reserve it for high-contrast headlines or specific bold statements.
- Do not center-align large blocks of body text; left-align for readability.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas White | `#ffffff` | Base page background |
| 1 | Vanilla Cream | `#faf9f7` | Secondary backgrounds, such as subtle section dividers or nested content areas |
| 2 | Paper Beige | `#edebe7` | Tertiary backgrounds for cards, panels, or distinct content blocks |
| 3 | Oceanic Blue | `#c9d5fd` | Decorative background washes, often for hero sections or highlighted cards |
| 4 | Grape Punch | `#f0a8fa` | High-prominence decorative card backgrounds with unique shadow properties |

## Elevation

- **Hero Card:** `rgb(211, 134, 222) 0px 4px 5px 0px`
- **Button Focus:** `rgb(227, 225, 221) 0px 2px 0px 0.5px`

## Imagery

Imagery features a mix of conceptual illustrations and product screenshots, often combined. Illustrations are abstract, feature organic shapes and are rendered in muted, brand-aligned colors. Photography, when present, tends to be tightly cropped on subjects, minimizing busy backgrounds. Icons are generally outlined, with a moderate stroke weight, and monochrome in brand colors or neutrals. Imagery serves both decorative and explanatory roles, adding a friendly and approachable feel.

## Layout

The page uses a contained layout with some full-bleed hero sections. Max width isn't explicitly defined visually but elements are centrally aligned. Hero sections often feature large, bold headlines centered over backgrounds, with content typically structured in alternating left-text/right-visual or right-text/left-visual blocks. Features are presented in multi-column card grids, emphasizing the soft-edged, spaced-out card components. Vertical rhythm is established through consistent section gaps and generous component padding. The primary navigation is a sticky top bar with clearly delineated sections.

## Agent Prompt Guide

Quick Color Reference:
text: #4a3e3e
background: #ffffff
border: #edebe7
accent: #f0a8fa
primary action: #4f75fe (filled action)

Example Component Prompts:
1. Create a Primary CTA Button: Royal Blue (#4f75fe) background, Canvas White (#ffffff) text, 12px radius, 12px vertical padding, 16px horizontal padding. Text uses GT America 500, 16px.
2. Design a Hero Card: Grape Punch (#f0a8fa) background, 20px radius, Bubblegum Pink (#d386de) 0px 4px 5px 0px box shadow, 60px vertical padding, 50px horizontal padding. Headline uses GT Walsheim 900, 64px, Deep Mocha (#2d2323), letter-spacing -1.02px.
3. Implement a Neutral Content Card: Vanilla Cream (#faf9f7) background, 40px radius, no shadow, 48px vertical padding, 64px horizontal padding. Body text uses GT America 400, 16px, Charcoal Coffee (#4a3e3e).
4. Build an Outline Input Field: rgba(45, 35, 35, 0.1) background, Charcoal Coffee (#4a3e3e) text, Warm Gray (#595d68) border, 30px radius on left, 0px on right, 8px vertical padding, 20px left padding, 12px right padding. Placeholder text in Warm Gray (#736b6b).
5. Create a Ghost Navigation Button: Transparent background, Charcoal Coffee (#4a3e3e) text, no border. Padding 14px vertical, 24px horizontal. Text uses GT America 500, 14px.

## Similar Brands

- **Framer** — Shares a sophisticated, slightly playful aesthetic with vibrant accent colors on mostly neutral backgrounds and ample whitespace.
- **Notion** — Similar approach to clean, component-based UI with generous padding and soft rounded corners, prioritizing clarity and usability.
- **Linear** — Uses a single, strong accent color (blue), paired with a predominantly neutral palette, and a focus on clean typography.
- **Webflow** — Features bright, engaging branding colors and a well-defined card-based layout with soft shadows and rounded elements.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-vanilla-cream: #faf9f7;
  --color-paper-beige: #edebe7;
  --color-warm-gray: #736b6b;
  --color-charcoal-coffee: #4a3e3e;
  --color-deep-mocha: #2d2323;
  --color-true-black: #000000;
  --color-royal-blue: #4f75fe;
  --color-oceanic-blue: #c9d5fd;
  --color-grape-punch: #f0a8fa;
  --color-bubblegum-pink: #d386de;
  --color-spring-green: #00c275;
  --color-rich-blue: #4353ff;

  /* Typography — Font Families */
  --font-gt-america: 'GT America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim: 'GT Walsheim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-oliver: 'Oliver', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.45;
  --text-body: 16px;
  --leading-body: 1.43;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 30px;
  --leading-heading: 1.2;
  --tracking-heading: -0.12px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.18;
  --tracking-heading-lg: -0.72px;
  --text-display: 82px;
  --leading-display: 1;
  --tracking-display: -1.89px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Layout */
  --section-gap: 43px;
  --card-padding: 12px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
  --radius-full: 60px;
  --radius-full-2: 100px;

  /* Named Radii */
  --radius-cards: 20-40px;
  --radius-links: 100px;
  --radius-inputs: 30px;
  --radius-buttons: 10-12px;
  --radius-default: 10px;

  /* Shadows */
  --shadow-sm: rgb(211, 134, 222) 0px 4px 5px 0px;
  --shadow-subtle: rgb(31, 24, 24) 0px 0px 0px 8px;
  --shadow-subtle-2: rgb(227, 225, 221) 0px 2px 0px 0.5px;

  /* Surfaces */
  --surface-canvas-white: #ffffff;
  --surface-vanilla-cream: #faf9f7;
  --surface-paper-beige: #edebe7;
  --surface-oceanic-blue: #c9d5fd;
  --surface-grape-punch: #f0a8fa;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-canvas-white: #ffffff;
  --color-vanilla-cream: #faf9f7;
  --color-paper-beige: #edebe7;
  --color-warm-gray: #736b6b;
  --color-charcoal-coffee: #4a3e3e;
  --color-deep-mocha: #2d2323;
  --color-true-black: #000000;
  --color-royal-blue: #4f75fe;
  --color-oceanic-blue: #c9d5fd;
  --color-grape-punch: #f0a8fa;
  --color-bubblegum-pink: #d386de;
  --color-spring-green: #00c275;
  --color-rich-blue: #4353ff;

  /* Typography */
  --font-gt-america: 'GT America', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-gt-walsheim: 'GT Walsheim', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-oliver: 'Oliver', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.45;
  --text-body: 16px;
  --leading-body: 1.43;
  --text-subheading: 20px;
  --leading-subheading: 1.25;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.2;
  --text-heading: 30px;
  --leading-heading: 1.2;
  --tracking-heading: -0.12px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.18;
  --tracking-heading-lg: -0.72px;
  --text-display: 82px;
  --leading-display: 1;
  --tracking-display: -1.89px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;

  /* Border Radius */
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 30px;
  --radius-3xl-2: 40px;
  --radius-full: 60px;
  --radius-full-2: 100px;

  /* Shadows */
  --shadow-sm: rgb(211, 134, 222) 0px 4px 5px 0px;
  --shadow-subtle: rgb(31, 24, 24) 0px 0px 0px 8px;
  --shadow-subtle-2: rgb(227, 225, 221) 0px 2px 0px 0.5px;
}
```