# Versatil Design System

> High-contrast corporate monochrome anchored by a deep signal blue canvas and a sharp red geometric slash.

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

## TL;DR
Versatil utilizes a high-contrast monochrome foundation where absolute white (#ffffff) and black (#000000) are punctuated by a specific signal blue background and a vivid red accent (#dc3545) found in the logo's "A" slash. The system is characterized by heavy, uppercase sans-serif typography for brand identity and a clean, centered layout. While the parent is defined as monochrome, the CSS tokens reveal a broad spectrum of utility colors (yellow, green, pink, purple, teal) reserved for functional UI states or future sub-brand expansion.

## Signature DNA
1. **The Red Slash** (A 45-degree red geometric strike through the letter 'A' in the wordmark, using `--red` #dc3545, observed on the primary splash screen).
2. **Signal Blue Canvas** (A deep, saturated blue background used as the primary brand floor for splash and loading states, referencing `--blue` #007bff).
3. **Achromatic Typography** (Heavy use of pure white #ffffff text against dark backgrounds to ensure maximum contrast and legibility).

## 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 |
|-------|-----|------|-------------|------------|--------|
| `--white` | `#ffffff` | Primary background and display text | High | High | Evidence |
| `--black` | `#000000` | Primary text and dark UI elements | High | High | Evidence |
| `--blue` | `#007bff` | Primary brand canvas (Signal Blue) | High | High | `--blue` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--red` | `#dc3545` | Brand signature slash in logo | Low | High | `--red` |
| `--orange` | `#fd7e14` | Decorative / Utility | <5 | Medium | `--orange` |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--green` | `#28a745` | Success states | Not captured | High | `--green` |
| `--yellow` | `#ffc107` | Warning states | Not captured | High | `--yellow` |
| `--cyan` | `#17a2b8` | Information states | Not captured | High | `--cyan` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sans-Serif (System) | 700, 400 | Wordmark and Tagline | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 120px | 1.0 | -0.02em | 700 | Main Wordmark | `.logo-text` |
| `{type.tagline}` | 32px | 1.2 | 0 | 400 | Brand Tagline | `.tagline` |
| `{type.body}` | 16px | 1.5 | 0 | 400 | Default text | Not captured |
| `{type.h1}` | 48px | 1.1 | -0.01em | 700 | Page headers | Not captured |
| `{type.h2}` | 36px | 1.2 | 0 | 700 | Section headers | Not captured |
| `{type.h3}` | 24px | 1.3 | 0 | 600 | Sub-headers | Not captured |
| `{type.label}` | 14px | 1.0 | 0.05em | 700 | Small labels | Not captured |
| `{type.caption}` | 12px | 1.4 | 0 | 400 | Legal/Captions | Not captured |

### Principles
1. **Uppercase Dominance:** Brand-level identity (Versatil) is always rendered in uppercase.
2. **High Contrast:** Text must maintain a minimum 21:1 ratio (White on Blue/Black) for primary brand moments.
3. **Tight Tracking:** Display type uses slightly negative letter spacing to feel "engineered" and solid.

## Spacing
**Base unit:** 4px
Table: Not captured in source (Layout is currently centered/absolute).

## Border radius
Table: Not captured in source.

## Elevation
Table: Not captured in source.

## Components
### Tier 1: Foundational
#### Brand Wordmark
**Role:** Primary identity anchor.
**Pages observed:** https://versatil.com
**Spec:** Text #ffffff / Weight 700 / Uppercase / Red Slash #dc3545.
**States observed:** Default: captured | Others: not captured.

#### Loading Spinner
**Role:** System feedback.
**Pages observed:** https://versatil.com
**Spec:** Border 2px solid rgba(255,255,255,0.2) / Active Border #ffffff / Circle.
**States observed:** Active: captured.

### Tier 2: Patterns
*Not captured in source.*

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|----------|-------|
| Content Alignment | Center |
| Page Background | #007bff (Splash) |
| Max-Width | 100vw |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Logo scales to 80% width; tagline wraps to two lines. |
| Desktop | 1440px | Single line centered layout. |

## Imagery & decoration
The brand relies on geometric simplicity. The primary decorative element is the "Slash" — a 45-degree vector that cuts through typography. It avoids photography in the initial brand reveal, favoring solid color fields.

## Do's
- Use `--blue` (#007bff) for primary landing backgrounds.
- Ensure the "A" in Versatil always features the `--red` (#dc3545) slash.
- Use pure white (#ffffff) for all display typography on dark backgrounds.
- Maintain centered vertical and horizontal alignment for splash content.
- Use uppercase for the primary wordmark.

## Don'ts
- **Wrong:** Using `--blue` as a text color on a white background. **Right:** Use `--black` or `--blue` for backgrounds only. **Reason:** The brand identity is built on a "Signal Blue" canvas, not blue ink.
- **Wrong:** Mislabeling `--red` as the primary brand color. **Right:** Use `--blue` as primary, `--red` as accent. **Reason:** Red is reserved for the signature slash only.
- **Wrong:** Applying rounded corners to the logo slash. **Right:** Keep edges sharp and geometric. **Reason:** The brand signals "Innovation" through precision.
- Do not use gradients; stick to solid hex values from the foundation palette.
- Do not use lowercase for the main brand wordmark.

## Similar brands
- IBM (Blue/White/Black corporate precision)
- Oracle (High-contrast red accent on monochrome)
- Akamai (Solid blue canvas with geometric white type)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --versatil-primary: #007bff;
  --versatil-accent: #dc3545;
  --versatil-white: #ffffff;
  --versatil-black: #000000;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-brand-blue: #007bff;
  --color-brand-red: #dc3545;
  --font-display: "Inter", sans-serif;
}
```

## Agent prompt examples
- "Create a hero section with a `#007bff` background and centered white uppercase text in weight 700."
- "Design a button using `#ffffff` text on a `#000000` background with 0px border-radius to match the geometric brand style."
- "Generate a loading state using a white CSS spinner on a deep blue `#007bff` canvas."

## Known gaps
- Spacing and border-radius scales were not explicitly defined in the splash evidence.
- Component states (hover/focus) for buttons or inputs were not captured as the analyzed page was a splash/loading state.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Splash Screen | https://versatil.com | 1440x900 | 2026-06-06 |
| Mobile Splash | https://versatil.com | 390x844 | 2026-06-06 |