# Velosimo Design System

> High-contrast utility for government technology, anchoring clean white surfaces with electric blue accents and rigorous Arimo typography.

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

## TL;DR
Velosimo utilizes a high-contrast monochrome foundation (#ffffff canvas, #000000 text) punctuated by a specific electric blue spectrum (#0000ff, #4678ee). The system is built on Arimo, a geometric sans-serif that maintains legibility across dense integration maps and technical content. Components favor sharp or subtly rounded geometry (9px for cards, 50px for large panels) rather than organic pills. Visual depth is achieved through a single, heavy elevation tier (30px blur) rather than multiple shadow layers. The layout is structured around a 22px rhythm, prioritizing clarity for complex government technology workflows.

## Signature DNA
1. **The Electric Blue Accent** (#0000ff used for primary CTAs and iconography anchors, providing high-voltage contrast against the pure white canvas).
2. **Arimo Geometric Rigor** (The exclusive use of Arimo across all roles, from 12px captions to 32px headlines, creates a unified, "utility-first" aesthetic).
3. **Soft-Depth Cards** (White surfaces elevated by a specific 30px blur shadow `rgba(154, 161, 177, 0.17)`, used to separate testimonial and feature content from the flat background).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background, button text, card surface | 11 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary text, headings, footer background | 44 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#0000ff` | Primary CTA background, active text, borders | 4 | 0.6 | computed_style |
| `{color.accent-soft}` | `#4678ee` | Secondary text, iconography, surface accents | 8 | 0.6 | computed_style |
| `{color.border-light}` | `#6492fd` | Card and component borders (decorative_only) | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Arimo | 400, 500, 700 | All roles (Display, Body, UI) | Arimo (Google Fonts) | Apache 2.0 |
| sans-serif | 400 | System fallback | N/A | N/A |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.h2}` | 32px | 44.8px | normal | 700 | Section Headlines | `h2` |
| `{text.h4}` | 18px | 25.2px | normal | 400 | Subheadings | `h4` |
| `{text.body}` | 16px | 22.4px | normal | 400 | Default Body | `span#hs_cos_wrapper_widget_...` |
| `{text.body-bold}` | 16px | 22.4px | normal | 700 | Emphasized Subheads | `h2` (small variant) |
| `{text.testimonial}` | 16px | 22px | normal | 500 | Quote content | `p.kl-testimonial__content` |
| `{text.preheader}` | 14px | 19.6px | normal | 700 | Small labels/caps | `span.kl-rich-text__preheader` |
| `{text.caption-spaced}` | 12px | 13.2px | 0.36px | 700 | Metadata/Badges | `div#hs_cos_wrapper_widget_...` |
| `{text.caption}` | 12px | 16.8px | normal | 700 | Small annotations | `span` |

### Principles
- **Weight-based hierarchy:** Differentiation is achieved through weight shifts (400 to 700) rather than typeface mixing.
- **Tight leading for small text:** Captions use a 1.1x line height (13.2px on 12px font) for compact labeling.
- **Geometric clarity:** Arimo's neutral, open shapes are used to ensure legibility in dense integration diagrams.

## Spacing
**Base unit:** 4px (derived)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 7 |
| `{space.lg}` | 22px | 19 |
| `{space.xl}` | 25px | 8 |
| `{space.section}` | 64px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers, layout blocks | 50 occurrences |
| `{radius.md}` | 9px | Cards, buttons, interactive elements | `kl-card` |
| `{radius.full}` | 50px | Large panels, testimonial containers | `p.kl-testimonial` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(154, 161, 177, 0.17) 0px 11px 30px 0px` | Testimonial cards, feature highlights | `Card` component |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://velosimo.com
**Spec:** Background `{color.primary}` (#0000ff) / Text `{color.canvas}` (#ffffff) / Radius `{radius.md}` (9px) / Typography `{text.body}` (16px/700)
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site navigation and social links
**Pages observed:** https://velosimo.com
**Spec:** Background `{color.ink}` (#000000) / Text `{color.canvas}` (#ffffff) / Padding `{space.section}` (64px)
**States observed:** Default: captured

### Tier 2: Patterns

#### Testimonial Card
**Role:** Customer social proof
**Pages observed:** https://velosimo.com
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.md}` (9px) / Shadow `{shadow.card}` / Padding `18px 25px 25px`
**States observed:** Default: captured

#### Integration Map
**Role:** Visualizing system connectivity
**Pages observed:** https://velosimo.com
**Spec:** Uses `{color.accent-soft}` (#4678ee) for connecting lines and nodes against white background.

### Tier 3: Surface-specific

#### Preheader Label
**Role:** Section categorization
**Pages observed:** https://velosimo.com
**Spec:** Text `{color.accent-soft}` (#4678ee) / Typography `{text.preheader}` (14px/700) / Case: Uppercase
**States observed:** Default: captured

#### Feature Icon Plate
**Role:** Value proposition illustration
**Pages observed:** https://velosimo.com
**Spec:** Icon stroke `{color.accent-soft}` (#4678ee) / Alignment: Left / Spacing below: `{space.lg}` (22px)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 64px |
| Column Gap | 25px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked testimonial cards, centered headings, hamburger menu navigation |
| Desktop | 1440px | 4-up testimonial grid, side-by-side feature splits |

## Imagery & decoration
- **Logos:** Uses a grayscale "Partners" and "Customers" grid to maintain focus on the Velosimo brand blue.
- **Diagrams:** Clean, vector-based integration maps using thin strokes and brand-blue nodes.
- **Avoids:** Heavy gradients, drop shadows on text, or rounded "pill" buttons.

## Do's
- Use `#0000ff` for primary actions only to maintain high visual signal.
- Apply `{shadow.card}` to white surfaces to create depth against white backgrounds.
- Maintain a `{space.lg}` (22px) rhythm between body paragraphs and headers.
- Use Arimo 700 for all "Preheader" labels in uppercase.
- Ensure all icons use the `#4678ee` stroke color.

## Don'ts
- **Wrong:** Using `#4678ee` for primary CTA buttons. **Right:** Use `#0000ff`. **Reason:** The lighter blue lacks the necessary "voltage" for primary actions in this system.
- **Wrong:** Mixing Serif fonts for headlines. **Right:** Use Arimo 700. **Reason:** The brand identity is strictly geometric and utility-focused.
- **Wrong:** Applying `{radius.full}` (50px) to small buttons. **Right:** Use `{radius.md}` (9px).
- Do not use drop shadows on text or dark-colored backgrounds.
- Do not use saturated colors other than the blue spectrum for UI elements.

## Similar brands
- Accela (GovTech peer, clean sans-serif)
- DocuSign (Utility-focused, blue/white/black palette)
- Esri (Technical, map-centric UI)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-primary: #0000ff;
  --color-accent-soft: #4678ee;
  --font-main: 'Arimo', sans-serif;
  --shadow-card: 0px 11px 30px 0px rgba(154, 161, 177, 0.17);
  --radius-md: 9px;
  --space-lg: 22px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #0000ff;
  --color-accent-soft: #4678ee;
  --font-sans: "Arimo", ui-sans-serif, system-ui;
  --shadow-card: 0 11px 30px 0 rgba(154, 161, 177, 0.17);
  --radius-md: 9px;
  --spacing-lg: 22px;
}
```

## Agent prompt examples
- "Create a feature card using a white background, a 9px border radius, and the Velosimo shadow `rgba(154, 161, 177, 0.17) 0px 11px 30px 0px`."
- "Design a primary button with a `#0000ff` background, white Arimo 700 text, and 9px corner rounding."
- "Generate a section header with an uppercase preheader in `#4678ee` (14px Arimo 700) followed by an `h2` in `#000000` (32px Arimo 700)."

## Known gaps
- Hover and active states for secondary navigation items were not explicitly captured in the computed style evidence.
- Error and Success semantic tokens were not present on the analyzed marketing pages.
- Exact mobile breakpoint pixel values are inferred from standard 390px viewport testing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://velosimo.com | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://velosimo.com | Mobile 390px | 2026-06-06 |