# Frankieone Design System

> High-contrast fintech utility defined by deep navy canvases, vibrant primary blue accents, and heavy-weight geometric typography.

**Source:** [https://frankieone.com](https://frankieone.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Frankieone utilizes a high-contrast "Dark Mode" aesthetic as its primary identity, anchoring the experience in a deep navy `#0c1c2b` background. This is punctuated by a high-voltage primary blue `#1a6cff` (tokenized as `--primary-blue`) used for critical CTAs and interactive signals. Typography is exclusively **DM Sans**, leaning heavily on weight 800 for display headings to create a sense of structural security. Layouts alternate between pure white `#ffffff` surfaces for content-heavy sections and the signature navy for hero and conversion zones. Component geometry is soft, utilizing a 20px radius for cards and a 4px radius for functional inputs.

## Signature DNA
1. **The Navy Anchor** (The use of `#0c1c2b` as a primary surface color rather than just an accent, creating a "command center" atmosphere across the homepage and pricing pages).
2. **Heavyweight Display** (DM Sans at weight 800 for all H1 and H2 elements, providing a bold, institutional authority characteristic of regtech).
3. **The Blue Voltage** (The specific use of `#1a6cff` against navy or white to draw immediate focus to primary actions like "Book a Demo" or "Contact Us").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| Canvas White | `#ffffff` | Primary page background, button text | 93 | 0.8 | Computed Style |
| Deep Navy | `#0c1c2b` | Dark mode surface, primary text color | 196 | 0.8 | Computed Style |
| Ink | `#212529` | Secondary body text | 32 | 0.8 | Computed Style |
| Border Soft | `#f0f1f3` | Section dividers, card outlines | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary-blue` | `#1a6cff` | Primary CTA background, brand signal | 19 | 1.0 | CSS Variable |
| Action Blue | `#4284fb` | Secondary buttons, text links | 79 | 0.8 | Computed Style |
| Sky Border | `#d2e9fc` | Pricing card borders, input focus | 9 | 0.6 | Computed Style |
| Muted Slate | `#8d9ba8` | De-emphasized labels | 9 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| DM Sans | 300, 400, 700, 800 | Universal (Heading, Body, UI) | DM Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 62px | 68.2px | normal | 800 | Hero H1 | `h1` |
| `display-lg` | 42px | 46.2px | normal | 800 | Section Heading | `h2.text-block-heading.h2` |
| `stat-number` | 48px | 72px | normal | 700 | Data visualizations | `span.stat-num.count-number` |
| `heading-md` | 32px | 35.2px | normal | 800 | Sub-section heads | `h3` |
| `heading-sm` | 24px | 26.4px | normal | 700 | Card titles | `div.icon-title.h4` |
| `body-lg` | 18px | 28.8px | normal | 400 | Intro paragraphs | `span` |
| `body-md` | 16px | 24px | normal | 400 | Default running text | `p` |
| `label-caps` | 14px | 15.4px | 1.18px | 300 | Overline labels | `h4.text-block-label` |

### Principles
1. **Ultra-Heavy Headings:** Primary headings must use weight 800 to maintain brand authority.
2. **Tight Display Leading:** Display sizes (42px+) use a tight 1.1x line-height ratio.
3. **Wide Tracking for Labels:** Small labels (14px) use 1.18px letter spacing to maintain legibility against dark backgrounds.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 12 |
| `space-2` | 8px | 18 |
| `space-3` | 12px | 11 |
| `space-4` | 16px | 8 |
| `space-6` | 24px | 44 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Section containers | 370 occurrences |
| `radius-sm` | 4px | Form inputs | Text Input component |
| `radius-lg` | 20px | Content cards | Surface component |
| `radius-pill` | 50px | Primary buttons | CTA elements |

## Elevation
Not captured in source (system is primarily flat/monochrome).

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (e.g., "Book My Demo")
**Pages observed:** [pricing, about]
**Spec:** Background `#1a6cff` / Text `#ffffff` / Radius 50px / Typography DM Sans 18px Bold
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Lead generation forms
**Pages observed:** [pricing]
**Spec:** Background `#ffffff` / Text `#0c1c2b` / Border 1px `#d2e9fc` / Radius 4px / Padding 12px
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** [homepage, about]
**Spec:** Background `transparent` / Border 1px `#f0f1f3` / Radius 20px / Padding 20px
**States observed:** Default

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** [pricing]
**Spec:** Background `#ffffff` / Border 1px `#d2e9fc` / Radius 20px / Padding 24px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section Container
**Role:** High-impact hero or CTA bands
**Pages observed:** [homepage, pricing]
**Spec:** Background `#0c1c2b` / Text `#ffffff` / Radius 0px
**States observed:** Default

#### Scrolling Banner Item
**Role:** Partner logo or feature ticker
**Pages observed:** [homepage]
**Spec:** Typography DM Sans 16px / Line-height 32px / Color `#0c1c2b`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, H1 reduces to ~36px, navigation becomes hamburger menu |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), full horizontal navigation |

## Imagery & decoration
Frankieone uses complex node-based diagrams to visualize data flows, often utilizing the primary blue `#1a6cff` for "active" paths. It avoids generic stock photography in favor of UI-inspired illustrations and clean, high-contrast iconography.

## Do's
- Use `#0c1c2b` for large surface areas to create depth.
- Set all H1 and H2 headings to DM Sans weight 800.
- Use `--primary-blue` (`#1a6cff`) for the most important action on the page.
- Maintain a 20px border radius on all content cards.
- Ensure 1.18px letter spacing on all uppercase labels.

## Don'ts
- **Wrong:** Using `#4284fb` for the main "Book a Demo" CTA. **Right:** Use `#1a6cff`. **Reason:** `#4284fb` is a secondary action color.
- **Wrong:** Applying a border radius to section backgrounds. **Right:** Keep sections at 0px radius. **Reason:** Brand uses sharp section transitions.
- **Wrong:** Using light weights (300/400) for display headings. **Right:** Use 800. **Reason:** Brand identity relies on heavy typographic weight.

## Similar brands
- Plaid (High-contrast utility)
- Stripe (Clean geometric typography)
- Chainalysis (Dark-mode fintech authority)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary-blue: #1a6cff;
  --navy-deep: #0c1c2b;
  --white: #ffffff;
  --ink: #212529;
  --border-soft: #f0f1f3;
  --radius-card: 20px;
  --font-main: 'DM Sans', sans-serif;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": { "primary": { "value": "#1a6cff" } },
    "surface": {
      "dark": { "value": "#0c1c2b" },
      "light": { "value": "#ffffff" }
    }
  },
  "radius": {
    "card": { "value": "20px" },
    "button": { "value": "50px" }
  }
}
```

## Agent prompt examples
- "Create a hero section with a `#0c1c2b` background, a DM Sans weight 800 headline in `#ffffff`, and a pill-shaped primary button using `#1a6cff`."
- "Design a feature grid using 20px rounded cards with a 1px `#f0f1f3` border and DM Sans 24px Bold titles."
- "Generate a contact form with 4px rounded inputs, `#d2e9fc` borders, and 16px DM Sans body text."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Success and Error semantic colors were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://frankieone.com | 1440px | 2026-06-06 |
| Pricing | https://frankieone.com/pricing | 1440px | 2026-06-06 |
| About | https://frankieone.com/about | 1440px | 2026-06-06 |