# Capptoo Design System

> Deep indigo canvases punctuated by high-voltage violet typography and sharp, borderless geometric containers.

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

## TL;DR
Capptoo utilizes a "Midnight Digital" aesthetic, where the primary canvas is a deep indigo `#180c3f` rather than pure black. Brand voltage is carried by a singular, high-saturation violet `#a743ff` used for headings, interactive text, and thin structural borders. Typography is anchored by **Plus Jakarta Sans**, utilizing an extreme weight range from 400 for utility text to a massive 900 weight for display moments. The system is strictly flat, eschewing shadows and rounded corners in favor of 0px radii and high-contrast typographic hierarchy.

## Signature DNA
1. **The Indigo Floor** (The background is consistently `#180c3f`, providing a softer, more premium depth than `#000000` while maintaining high contrast for white and violet text.)
2. **Heavyweight Display** (Use of `PlusJakartaSans-Bold` at weight 900 for hero spans, creating a "stamp" effect against the dark background.)
3. **Violet Wireframes** (Structural separation is achieved through 1px borders in `#a743ff` rather than background shifts or shadows.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| N/A | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#180c3f` | Primary page background and surface | 14 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Primary body text and high-contrast borders | 71 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Deepest background (decorative/footer) | 5 | 1.0 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.violet}` | `#a743ff` | Primary brand accent: headings, buttons, borders | 41 | 0.8 | computed_style |
| `{color.lavender}` | `#c6b0e9` | Secondary text / sub-labels | 8 | 0.6 | computed_style |
| `{color.plum}` | `#7a49a5` | Muted violet for secondary emphasis | 8 | 0.6 | computed_style |
| `{color.neon-pink}` | `#f38aff` | Decorative highlights (decorative_only) | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Plus Jakarta Sans | 400, 700, 800 | Headings, UI, Nav | Plus Jakarta Sans (Google) | SIL OFL |
| PlusJakartaSans-Bold | 900 | Display, Hero | Plus Jakarta Sans (ExtraBold) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 146px | 146px | normal | 900 | Hero headlines | `span` |
| `{type.display.lg}` | 40px | 60px | normal | 400 | Intro paragraphs | `p` |
| `{type.heading.lg}` | 32px | 35.2px | normal | 800 | Service box titles | `span.uk-heading-large` |
| `{type.heading.md}` | 32px | 43.2px | normal | 700 | Section titles | `div.el-title.uk-h3` |
| `{type.heading.sm}` | 24px | 36px | normal | 400 | Sub-headings | `p` |
| `{type.heading.label}` | 24px | 33.6px | 1.5px | 700 | Uppercase labels | `h4.el-title.uk-h4` |
| `{type.body.md}` | 20px | 30px | normal | 400 | Default body text | `div#page` |
| `{type.caption.bold}` | 12px | 15.84px | 1.28px | 700 | Small labels/meta | `h4.el-meta.uk-heading-small` |
| `{type.caption.sm}` | 12px | 16.2px | 0.36px | 400 | Metadata | `div.el-meta.uk-text-meta` |

### Principles
1. **Extreme Weight Contrast:** Pair weight 900 display text with weight 400 body text to create immediate hierarchy.
2. **Wide Tracking for Labels:** Small caps and labels use letter-spacing between 1.28px and 1.5px for legibility on dark backgrounds.
3. **Monochromatic Text:** Headings are almost exclusively `#a743ff` or `#ffffff`.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.md}` | 32px | 11 |
| `{space.lg}` | 48px | 9 |
| `{space.xl}` | 80px | 9 |
| `{space.xxl}` | 160px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All containers, buttons, and cards | 120 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces are flat or defined by borders | 0 shadows captured |

## Components

### Tier 1: Foundational

#### Brand Border
**Role:** Structural separation of sections and cards.
**Pages observed:** https://capptoo.com
**Spec:** Border 1px solid `#a743ff` or `#ffffff` (0.063 opacity) | Radius 0px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Service Card
**Role:** Displaying core offerings in a grid.
**Pages observed:** https://capptoo.com
**Spec:** Background transparent | Border 1px solid `#a743ff` | Padding 80px 37px | Text `#ffffff` | Title `{type.heading.lg}`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Indigo Section
**Role:** Standard content band.
**Pages observed:** https://capptoo.com
**Spec:** Background `#180c3f` | Text `#ffffff` | Padding 80px 0px | Radius 0px
**States observed:** Default: captured

#### Hero Display
**Role:** Primary entry point.
**Pages observed:** https://capptoo.com
**Spec:** Background `#180c3f` | Text `#a743ff` | Typography `{type.display.mega}` | Padding 160px 0px
**States observed:** Default: captured

#### Calendly CTA
**Role:** Primary conversion point.
**Pages observed:** https://capptoo.com
**Spec:** Background transparent | Text `#ffffff` | Border 1px solid `#a743ff` | Typography 24px/700
**States observed:** Default: captured

#### Meta Label
**Role:** Technical or secondary categorization.
**Pages observed:** https://capptoo.com
**Spec:** Text `#c6b0e9` | Typography `{type.caption.sm}`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Section Padding (Vertical) | 80px or 160px |
| Max Content Width | Not explicitly captured (fluid) |
| Grid Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Section padding reduces; typography scales to viewport. |

## Imagery & decoration
Capptoo uses abstract, tech-focused imagery including circular "radar" motifs and blurred light streaks in violet and blue. It avoids literal photography in favor of high-concept digital textures.

## Do's
- Use `#180c3f` as the default background for all primary content.
- Set display headlines in `PlusJakartaSans-Bold` at weight 900.
- Use 1px borders in `#a743ff` to define interactive areas.
- Maintain 0px border radius on all UI elements.
- Apply letter-spacing (1.28px+) to all small-caps or metadata labels.

## Don'ts
- **Wrong:** Using `#ffffff` as a page background. **Right:** Use `#180c3f`. **Reason:** Capptoo is a dark-mode first brand; white is reserved for text and borders.
- **Wrong:** Applying rounded corners (e.g., 8px) to buttons. **Right:** Use 0px. **Reason:** The brand identity is built on sharp, architectural geometry.
- **Wrong:** Labeling `#ff6900` (Orange) as a parent brand color. **Right:** Stick to Violet/Indigo foundations. **Reason:** Saturated tokens like Orange are reserved for specific sub-brand contexts not present in the parent DNA.
- Do not use drop shadows to create depth; use borders or color blocks.
- Do not use weights below 400 for body text on dark backgrounds.

## Similar brands
- Vercel (Geometric, high contrast)
- Linear (Dark mode, subtle borders)
- Stripe (Typography-led, technical aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #180c3f;
  --color-accent: #a743ff;
  --color-text-primary: #ffffff;
  --color-text-muted: #c6b0e9;
  --font-main: 'Plus Jakarta Sans', sans-serif;
  --font-display: 'PlusJakartaSans-Bold', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a feature grid using a 1px solid #a743ff border, 0px border-radius, and #180c3f background. Use Plus Jakarta Sans weight 800 for the titles."
- "Design a hero section with a #180c3f background and a massive 146px headline in #a743ff using weight 900."
- "Generate a button component with no background, a 1px #ffffff border, 0px radius, and 24px bold text."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- Mobile-specific breakpoints (exact px values) were not declared in the CSS tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://capptoo.com | 1440px | 2026-06-06 |