# Ottimate Design System

> High-contrast financial automation anchored by deep navy, seafoam accents, and expansive Hanken Grotesk display type.

**Source:** https://ottimate.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Ottimate utilizes a high-contrast "Dark Mode" aesthetic even on light canvases, leaning heavily on a palette of deep navy (#123044) and slate gray (#49535c). The visual identity is punctuated by two primary action colors: a vibrant seafoam green (#03c9a3) and a corporate sky blue (#418ecc). Typography is dominated by Hanken Grotesk, used at extreme weights (900 for hero displays) and generous sizes (up to 75px) to create a sense of industrial-grade reliability. Layouts feature large, rounded-corner containers (up to 25px) and organic, wave-like section dividers that break the standard grid.

## Signature DNA
1. **Ultra-Heavy Display Type** (Hanken Grotesk at weight 900 and 75px creates an unmistakable typographic anchor for hero sections, as seen on the homepage.)
2. **The "Ottimate Wave"** (Organic, flowing section dividers that transition between deep navy backgrounds and white canvas, replacing standard horizontal rules.)
3. **Dual-Action Chromaticism** (The system alternates between Seafoam #03c9a3 for "growth/profit" actions and Blue #418ecc for "technical/process" actions.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Primary canvas, button text, dark-mode text | 77 | 1 | `--ast-global-color-0` |
| `{color.navy}` | `#123044` | Primary text, dark section backgrounds | 25 | 1 | `--ast-global-color-5` |
| `{color.slate}` | `#49535c` | Secondary text, borders, subtle backgrounds | 90 | 1 | `--ast-global-color-6` |
| `{color.ice}` | `#f3f7ff` | Card surfaces, alternating section bands | 11 | 1 | `--ast-global-color-1` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.seafoam}` | `#03c9a3` | Primary CTA (Growth), success indicators | 10 | 0.6 | Computed Style |
| `{color.blue}` | `#418ecc` | Primary CTA (Technical), input labels | 10 | 1 | `--ast-global-color-2` |
| `{color.mint}` | `#00b794` | Decorative accents, secondary buttons | 3 | 1 | `--ast-global-color-3` |
| `{color.lavender-gray}` | `#e0e4f0` | Decorative button backgrounds | 3 | 1 | `--box-shadow-color-1` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Hanken Grotesk | 300, 400, 500, 600, 700, 900 | All headlines, display, and body | Hanken Grotesk (Google Fonts) | SIL OFL |
| Bilo | 700 | Specific section subheads | Inter | Proprietary |
| Inter | 400 | Fallback / UI elements | Inter | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-mega}` | 75px | 90px | normal | 900 | Homepage Hero | `h4` |
| `{type.display-xl}` | 64px | 30px | normal | 700 | Feature Intros | `p` |
| `{type.display-lg}` | 60px | 75px | normal | 700 | Section Headers | `h2` |
| `{type.display-md}` | 50px | 50px | normal | 300 | Light Display | `h2#issue-and-control...` |
| `{type.heading-sm}` | 24px | 28.8px | normal | 700 | Card Titles | `h4` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Lead Paragraphs | `article` |
| `{type.body-md}` | 18px | 31px | normal | 600 | UI Labels / Dots | `button.embla__dot` |
| `{type.body-sm}` | 16px | 30px | normal | 400 | Standard Body | `p.has-text-align-center` |

### Principles
1. **Weight Contrast:** Pair weight 900 display type with weight 300 sub-headlines for maximum hierarchy tension.
2. **Line Height Generosity:** Body text maintains a 1.5x to 1.8x line-height ratio (30px height on 16px-18px size) for readability.
3. **Achromatic Hierarchy:** Use Slate #49535c for secondary information and Navy #123044 for primary headers.

## Spacing
**Base unit:** 5px (derived from 5/10/15/20 pattern)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 26 |
| `{space.sm}` | 10px | 40 |
| `{space.md}` | 20px | 54 |
| `{space.lg}` | 30px | 10 |
| `{space.xl}` | 60px | 22 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Section containers | 146 occurrences |
| `{radius.sm}` | 3px | Technical buttons | Rounded Button (About) |
| `{radius.md}` | 8px | Content cards | Card (About) |
| `{radius.lg}` | 12px | Feature cards | Card (Home) |
| `{radius.xl}` | 25px | Large surface panels | Surface (Home) |
| `{radius.pill}` | 99px | Decorative buttons | Rounded Button (Home) |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Standard cards and surfaces | 90% of components |
| Shadow 1 | `rgba(0, 0, 0, 0.15) 0px 0px 0px 0px` | Subtle button definition | Rounded Button (About) |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** Homepage, About
**Spec:** Background `{color.seafoam}` (#03c9a3) | Text `{color.navy}` (#123044) | Radius 10px | Padding 15px | Type `{type.body-lg}`
**States observed:** Default | Hover: Not captured

#### Rounded Button (Technical)
**Role:** Secondary or process-oriented actions
**Pages observed:** About
**Spec:** Background `{color.blue}` (#418ecc) | Text `{color.white}` (#ffffff) | Radius 3px | Padding 10px 20px | Type `{type.body-md}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product benefits
**Pages observed:** Homepage
**Spec:** Background `{color.ice}` (#f3f7ff) | Text `{color.navy}` (#123044) | Radius 12px | Padding 30px 30px 50px
**States observed:** Default | Hover: Not captured

#### Content Card (About)
**Role:** Information blocks on light backgrounds
**Pages observed:** About
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.slate}` (#49535c) | Radius 8px | Padding 20px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Dark Surface Panel
**Role:** High-impact brand messaging areas
**Pages observed:** Homepage
**Spec:** Background `{color.navy}` (#123044) | Text `{color.white}` (#ffffff) | Radius 25px | Padding 15px 25px
**States observed:** Default | Hover: Not captured

#### Translucent Card
**Role:** Overlaying imagery or complex backgrounds
**Pages observed:** About
**Spec:** Background `rgba(255, 255, 255, 0.2)` | Text `{color.white}` (#ffffff) | Radius 8px | Padding 54px 24px 34px 32px
**States observed:** Default | Hover: Not captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from 1440px viewport) |
| Section Padding | 85.5px (vertical) |
| Column Gap | 20px - 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down; Grid stacks 1-column. |

## Imagery & decoration
- **Wave Dividers:** Smooth, organic SVG paths separating major color blocks.
- **Iconography:** Thin-line seafoam icons (#03c9a3) with circular or square enclosures.
- **Photography:** Professional office/tech environments with a slight cool-tone overlay to match the navy palette.

## Do's
- Use Hanken Grotesk 900 for primary page headlines.
- Apply `{radius.xl}` (25px) for large brand-moment surfaces.
- Use Seafoam (#03c9a3) for buttons related to "margins," "profit," or "growth."
- Use Blue (#418ecc) for buttons related to "support," "technical," or "process."
- Maintain high contrast between Navy (#123044) and White (#ffffff).

## Don'ts
- **Wrong:** Using Seafoam (#03c9a3) for body text. **Right:** Use Navy (#123044) or Slate (#49535c). **Reason:** Legibility and brand hierarchy.
- **Wrong:** Mixing sharp corners with rounded buttons. **Right:** Use consistent `{radius.md}` or `{radius.lg}` for interactive elements.
- **Wrong:** Using sub-brand colors (if any existed) as the primary background. **Right:** Stick to the Parent Navy (#123044).
- Do not use drop shadows on cards; use background color shifts (Ice #f3f7ff) for depth.
- Do not use Hanken Grotesk 900 for body copy.

## Similar brands
- Mercury (Financial/Clean/Navy)
- Ramp (Corporate/High-Contrast/Grotesk)
- Brex (Fintech/Structured/Rounded)

## Quick start

```css
/* CSS Variables */
:root {
  --ottimate-navy: #123044;
  --ottimate-slate: #49535c;
  --ottimate-seafoam: #03c9a3;
  --ottimate-blue: #418ecc;
  --ottimate-ice: #f3f7ff;
  --font-main: 'Hanken Grotesk', sans-serif;
}
```

```javascript
// Tailwind v4 Theme
@theme {
  --color-primary: #123044;
  --color-accent-growth: #03c9a3;
  --color-accent-process: #418ecc;
  --font-display: "Hanken Grotesk";
  --radius-brand: 25px;
}
```

## Agent prompt examples
- "Create a feature section with a Navy #123044 background, using Hanken Grotesk 900 for the headline in White #ffffff and a Seafoam #03c9a3 primary button with 10px rounding."
- "Design a pricing card using the Ice #f3f7ff background and 12px border radius, with Slate #49535c for the secondary text."
- "Generate a hero section with a wave-style divider transitioning from White to Navy #123044."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Specific mobile-only typography tokens were not fully isolated from desktop styles.
- Form input validation states (Error/Success) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://ottimate.com | 1440px | 2026-06-06 |
| About Page | https://ottimate.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://ottimate.com | 390px | 2026-06-06 |