# Codat Design System

> A technical financial canvas where deep navy ink meets high-voltage lime accents on a warm, architectural parchment.

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

## TL;DR
Codat utilizes a "monochrome-plus" system where a deep Base Navy `{--color-base-navy}` (#18103a) provides the structural weight against a warm Base White `{--color-base-white}` (#ecede5) canvas. The brand's energy is concentrated in a high-contrast Light Green `{--color-lt-green}` (#d1e100) used for primary actions and critical highlights. Typography is strictly divided between Lexend for technical, wide-set headings and Inter for high-legibility body copy. The system avoids traditional shadows, favoring 1px borders and flat, layered surfaces to communicate a "bank-grade" precision.

## Signature DNA
1. **The 200-Weight Display** (Lexend at weight 200 is used for primary heroes and large statistics, creating a sophisticated, thin-stroke technical feel. Observed on `https://codat.io`)
2. **Parchment Layering** (Surfaces use a warm #ecede5 base rather than pure white, often layered with transparent overlays `rgba(236, 237, 229, 0.75)` to create depth without shadows. Observed on `https://codat.io/about`)
3. **High-Voltage Accents** (The use of #d1e100 is restricted to interactive triggers and "new" indicators, popping aggressively against the navy backgrounds. Observed across all pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{--color-base-navy}` | `#18103a` | Primary text, dark surfaces, and brand ink | 158 | 1 | Computed Style |
| `{--color-base-white}` | `#ecede5` | Primary page background and canvas | 2544 | 1 | Computed Style |
| `{--color-off-white}` | `#f4f5f0` | Subtle section backgrounds | — | 1 | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{--color-lt-green}` | `#d1e100` | Primary CTA background, active highlights | 38 | 1 | Computed Style |
| `{--color-teal}` | `#b2d4c7` | Secondary accents and illustrative borders | 46 | 1 | Computed Style |
| `{--color-medium-blue}` | `#6482a7` | Tertiary accents | 42 | 1 | Computed Style |
| `{--color-dark-green}` | `#21524f` | Deep decorative surfaces | 4 | 1 | Computed Style |
| `{--color-dark-green-2}` | `#0f2e2c` | Decorative only | 2 | 0.8 | Decorative Only |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{--bricks-bg-danger}` | `#ffe6ec` | Error states / Danger alerts |
| `{--bricks-bg-success}` | `#e6f6ed` | Success confirmations |
| `{--bricks-bg-warning}` | `#fff2d7` | Warning notifications |
| `{--bricks-bg-info}` | `#e5f3ff` | Information callouts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Lexend | 200, 300, 400 | Headings, Display, UI | Lexend (Google Fonts) | OFL |
| Inter | 300, 400 | Body, Labels, Navigation | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 66px | normal | 200 | Hero H1 | `h1#brxe-adfxgp` |
| `{type.display-md}` | 48px | 52.8px | normal | 200 | Section Headers | `h2#brxe-68d18e` |
| `{type.stat-lg}` | 46px | 73.6px | normal | 200 | Large Numbers | `span#supplierCount` |
| `{type.heading-lg}` | 36px | 45px | normal | 300 | Standard Headings | `span:nth-of-type(1)` |
| `{type.heading-sm}` | 20px | 28px | normal | 400 | Card Titles | `h3#brxe-vtaixl` |
| `{type.body-lg}` | 18px | 28.8px | normal | 300 | Lead Paragraphs | `section#codat-scroll-container` |
| `{type.body-md}` | 14px | 21px | 0.14px | 300 | Standard Body | `p` |
| `{type.caption}` | 11px | 22px | 0.55px | 300 | Small Metadata | `div#brxe-dpkwzv` |

### Principles
1. **Weight Contrast:** Display text must use weight 200 (Lexend) to maintain the "technical blueprint" aesthetic.
2. **Body Legibility:** Inter is used for all long-form reading at weight 300 or 400.
3. **Tracking for Small Caps:** Caption-sized text (11px) uses increased tracking (0.55px) for legibility.

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 16px | 10 |
| `{space.md}` | 20px | 36 |
| `{space.lg}` | 40px | 36 |
| `{space.section}` | 110px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Main sections, sharp containers | 2686 occurrences |
| `{radius.sm}` | 8px | Control buttons | Rounded Button spec |
| `{radius.md}` | 12px | Content cards | Card spec |
| `{radius.lg}` | 16px | Feature surfaces | Surface spec |
| `{radius.full}` | 50px | Large pill buttons / panels | Panel role |

## Elevation
The system is primarily flat. Depth is achieved through color blocking and 1px borders.
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | None | Default state | All pages |
| Bordered | 1px `{--color-base-navy}` | Card definition | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: transparent (0) / Text: #d1e100 / Border: 1px #d1e100 / Radius: 8px / Padding: 6px 16px / Typography: 13px Lexend
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Surface
**Role:** Structural layout containers
**Pages observed:** All
**Spec:** Background: #ecede5 / Text: #18103a / Border: 0px / Radius: 0px / Padding: 32px 22px
**States observed:** Default only

### Tier 2: Patterns

#### Card
**Role:** Content grouping and feature highlights
**Pages observed:** All
**Spec:** Background: `rgba(236, 237, 229, 0.75)` / Text: #18103a / Border: 0px / Radius: 12px / Padding: 50px 40px / Typography: 18px Inter
**States observed:** Default | Hover: captured

#### Badge
**Role:** Status and category labeling
**Pages observed:** All
**Spec:** Background: transparent / Text: #18103a / Border: 1px #18103a / Radius: 0px / Padding: 0px / Typography: 14px Lexend (200 weight)
**States observed:** Default only

### Tier 3: Surface-specific

#### Dark Hero Card
**Role:** High-impact hero sections
**Pages observed:** `https://codat.io`
**Spec:** Background: #18103a / Text: #ecede5 / Border: 1px #18103a / Radius: 12px / Padding: 14px 58px
**States observed:** Default only

#### Interactive Surface
**Role:** Hover-responsive content areas
**Pages observed:** `https://codat.io/about`
**Spec:** Background: transparent / Text: #18103a / Border: 1px #b2d4c7 / Radius: 0px / Padding: 24px
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 110px |
| Column Gap | 40px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Section padding reduces to 20px; H1 scales to ~32px |
| Desktop | 1440px | Full 1200px container; 110px section spacing |

## Imagery & decoration
Codat uses abstract geometric patterns and "technical" line art. It avoids soft gradients or photographic backgrounds, preferring solid color blocks and 1px grid-like dividers.

## Do's
- Use Lexend at weight 200 for any text larger than 40px.
- Apply `{--color-base-white}` (#ecede5) as the default background for all pages.
- Use 1px borders in `{--color-base-navy}` to define card boundaries on light backgrounds.
- Reserve `{--color-lt-green}` (#d1e100) for the primary "Get Started" or "Submit" actions.
- Use Inter for all paragraph text to ensure readability.

## Don'ts
- **Wrong:** Using #d1e100 for large background areas. **Right:** Use it only for buttons and small accents. **Reason:** High-vibrancy color causes eye strain at scale.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use 1px borders or subtle color shifts. **Reason:** The brand identity is flat and architectural.
- **Wrong:** Mislabeling sub-brand colors (e.g., a specific product orange) as the parent primary. **Right:** Always use `{--color-base-navy}` as the primary brand anchor.

## Similar brands
- Stripe (technical precision)
- Plaid (financial infrastructure aesthetic)
- Vercel (monochrome weight with geometric focus)

## Quick start

```css
/* CSS Variables */
:root {
  --color-base-navy: #18103a;
  --color-base-white: #ecede5;
  --color-lt-green: #d1e100;
  --color-teal: #b2d4c7;
  --font-heading: 'Lexend', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section for Codat using Lexend weight 200 for the headline in #18103a, sitting on a #ecede5 background with a #d1e100 pill button."
- "Create a feature grid of cards with 12px border radius, no shadow, and a 1px border using #dddedf."
- "Design a data visualization component using #18103a for the axis and #d1e100 for the primary data line."

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated crawl.
- Mobile-specific menu transition timings are not documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|------|
| Homepage | https://codat.io | 1440x900 | 2026-06-06 |
| About Page | https://codat.io/about | 1440x900 | 2026-06-06 |
| Mobile Home | https://codat.io | 390x844 | 2026-06-06 |