# Quantico Design System

> High-contrast digital canvas where deep violets and cyan accents intersect with stark monochrome foundations.

**Source:** https://quantico.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Quantico utilizes a high-contrast "monochrome plus" palette, anchoring its identity in a deep primary violet (#7b0ece) and a vibrant cyan accent (#47cde8). The system relies heavily on the **Assistant** font family, using its Bold weight at large scales (52px) for display impact. UI geometry is characterized by extreme pill-shaped radii (30px) for interactive elements and sharp 0px edges for foundational containers like the header and footer. Surfaces alternate between pure white (#ffffff) and a dark charcoal (#383838) in the footer, creating a clear hierarchical rhythm.

## Signature DNA
1. **Pill-on-Sharp Contrast:** Interactive elements use a 30px radius (`{radii.panel}`) while main layout containers like the navigation and footer maintain a 0px (`{radii.sharp}`) edge.
2. **The Violet Anchor:** Primary actions and key brand moments are consistently rendered in #7b0ece, often paired with white text for maximum legibility.
3. **Cyan Voltage:** A specific cyan (#47cde8) is used as a high-frequency accent for text highlights and decorative icons to break the violet/charcoal baseline.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, button text | 52 | 1.0 | Computed Style |
| `{colors.black}` | `#000000` | Primary body text, icon strokes | 147 | 0.8 | Computed Style |
| `{colors.charcoal}` | `#383838` | Footer background | 3 | 0.6 | Computed Style |
| `{colors.off-white}` | `#eeeeee` | Secondary surface background | 4 | 0.6 | Computed Style |
| `{colors.lavender-tint}` | `#f4edfb` | Card background (subtle) | 10 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary-violet}` | `#7b0ece` | Primary CTA background, text highlights | 13 | 0.8 | Computed Style |
| `{colors.accent-cyan}` | `#47cde8` | Decorative text, accent icons | 48 | 0.8 | Computed Style |
| `{colors.primary-soft}` | `#a573dd` | Secondary button background, surface tint | 9 | 0.6 | Computed Style |
| `{colors.link-blue}` | `#0000ee` | Inline text links | 42 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Assistant | 400, 700 | Primary UI, Body, Subheadings | Assistant (Google Fonts) | SIL Open Font |
| AssistantBold | 700 | Hero Display, Section Headers | Assistant Bold | SIL Open Font |
| Arial | 400 | System fallback, UI controls | N/A | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 52px | normal | normal | 700 | Hero headlines | `h2.pinkPurple.ffBold` |
| `{text.heading-lg}` | 37px | normal | normal | 700 | Section titles | `h2.ffBold.fs50` |
| `{text.heading-md}` | 20px | normal | normal | 400 | Sub-section labels | `h2.ffRegular.fs20modify` |
| `{text.subheading}` | 19px | normal | normal | 700 | Feature titles | `h3` |
| `{text.body-lg}` | 17px | normal | normal | 400 | Navigation links | `a` |
| `{text.body}` | 16px | normal | normal | 400 | Default body text | `header.header2020` |
| `{text.body-sm}` | 15px | normal | normal | 700 | Bold UI labels | `a.ffBold.fs20` |
| `{text.caption}` | 12px | normal | normal | 400 | Footer links, metadata | `a.fs16.ffRegular` |

### Principles
1. **Header weight is absolute.** Display text at 52px must use AssistantBold at weight 700.
2. **Body legibility.** Standard body copy is fixed at 16px using Assistant Regular.
3. **Color-coded emphasis.** Headlines frequently mix #000000 with #7b0ece to highlight key value propositions.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 14px | 41 |
| `{space.sm}` | 22px | 11 |
| `{space.md}` | 33px | 10 |
| `{space.lg}` | 43px | 12 |
| `{space.xl}` | 72px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radii.sharp}` | 0px | Layout containers (Header, Footer) | Navigation component |
| `{radii.card}` | 20px | Content cards | Card (observed once) |
| `{radii.panel}` | 30px | Primary buttons | Rounded Button component |
| `{radii.pill}` | 35px | Secondary panels | Card (observed once) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.nav}` | `rgba(0, 0, 0, 0.16) 0px 3px 6px 0px` | Header navigation | Navigation component |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global top-level navigation.
**Pages observed:** 3 (Home, Pricing, About)
**Spec:** Background: #ffffff | Text: #000000 | Radius: 0px | Shadow: `{shadow.nav}`
**States observed:** Default: captured | Hover: not captured

#### Footer
**Role:** Global site map and contact info.
**Pages observed:** 3 (Home, Pricing, About)
**Spec:** Background: #383838 | Text: #ffffff (implied) | Padding: 72px 82px 73px
**States observed:** Default: captured

### Tier 2: Patterns

#### Rounded Button
**Role:** Primary and secondary call-to-action.
**Pages observed:** 3 (Home, Pricing, About)
**Spec:** Background: #7b0ece (Primary) or #a573dd (Secondary) | Text: #ffffff | Radius: 30px | Font: 15px AssistantBold
**States observed:** Default: captured | Active: captured

#### Surface
**Role:** Full-width section background for emphasis.
**Pages observed:** 3 (Home, Pricing, About)
**Spec:** Background: #a573dd | Text: #000000 | Radius: 0px
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Content Card
**Role:** Feature highlights or pricing tiers.
**Pages observed:** 1 (Home)
**Spec:** Background: #f4edfb | Radius: 20px | Padding: 21px 33px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | ~1200px |
| Footer Padding | 72px (Top) |
| Section Gap | 72px - 83px |

## Do's
- Use AssistantBold 700 for all headlines above 30px.
- Apply `{radii.panel}` (30px) to all primary buttons.
- Maintain a white background (#ffffff) for the main content canvas.
- Use #7b0ece for primary brand actions.
- Ensure the navigation bar uses the `{shadow.nav}` for depth.

## Don'ts
- Do not use rounded corners on the global header or footer.
- Do not use #47cde8 for primary buttons; it is an accent/text color only.
- Do not use Arial for headlines; Assistant is the required brand face.
- Avoid using shadows on content cards; use background tints like #f4edfb instead.
- Do not mix different radii on the same component type.

## Similar brands
- Mixpanel (Violet-centric SaaS)
- Logiwa (High-contrast technical UI)
- Segment (Clean typography with vibrant accents)

## Quick start

### CSS Variables
```css
:root {
  --quantico-violet: #7b0ece;
  --quantico-cyan: #47cde8;
  --quantico-charcoal: #383838;
  --quantico-white: #ffffff;
  --quantico-radius-button: 30px;
  --quantico-shadow-nav: rgba(0, 0, 0, 0.16) 0px 3px 6px 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #7b0ece;
  --color-accent: #47cde8;
  --color-surface-dark: #383838;
  --font-display: "Assistant", sans-serif;
  --radius-button: 30px;
}
```

## Agent prompt examples
- "Create a hero section with a #ffffff background, a 52px AssistantBold headline in #000000 with #7b0ece highlights, and a 30px rounded button in #7b0ece."
- "Design a footer using #383838 background with 12px Assistant text links and 72px top padding."
- "Generate a feature card with a #f4edfb background, 20px border radius, and 19px AssistantBold subheadings."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoint transitions for the 52px display type were not fully detailed in the provided scale.
- Success and error semantic colors were not observed in the analyzed pages.

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