# Simetrik Design System

> High-contrast financial precision anchored by deep obsidian surfaces and a singular, high-voltage electric violet primary.

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

## TL;DR
Simetrik utilizes a monochrome foundation of pure white (#ffffff) and off-black (#111111) to establish an atmosphere of enterprise stability. This neutrality is punctuated by a high-contrast electric violet (#3838f9) used exclusively for primary actions and brand-critical highlights. Typography is strictly Aeonik, leveraging the "Medium" weight for structured, geometric headings and "Regular" for legible, technical body prose. The system favors generous vertical spacing (100px section gaps) and soft-radius containers (15px) to balance the severity of its dark-mode surfaces.

## Signature DNA
1. **The Electric Primary** (#3838f9): A singular, saturated violet used for all primary CTAs, creating a clear interactive path against both light and dark canvases.
2. **Aeonik Geometricity**: The exclusive use of Aeonik-Medium for headings (up to 68px) provides a modern, architectural feel that signals technical precision.
3. **Obsidian Sectioning**: Large-scale use of #111111 for full-width sections and footer surfaces to create a premium, "pro-tool" aesthetic.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-white` | #ffffff | Page background, text on dark surfaces | 58 | 1.0 | Computed Style |
| `--color-black` | #111111 | Primary text, dark section backgrounds | 113 | 0.8 | Computed Style |
| `--color-gray-dark` | #787878 | Secondary body text | 113 | 0.8 | Computed Style |
| `--color-gray-light` | #c4c4c4 | Tertiary text, disabled states | 70 | 0.8 | Computed Style |
| `--color-off-white` | #f6f6f6 | Subtle surface backgrounds | 9 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-primary` | #3838f9 | Primary CTA background, active links | 13 | 0.8 | Computed Style |
| `--color-accent-soft` | #5759ee | Secondary brand text, decorative accents | 72 | 0.8 | Computed Style |
| `--color-accent-light` | #8da8f9 | Hover states, secondary button text | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Aeonik-Medium | 500 | Headings, Display | Montserrat Medium | Proprietary |
| Aeonik-Regular | 400 | Body, Navigation, UI | Inter Regular | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 68px | 69.36px | normal | 500 | Hero H1 | `h1` |
| `{type.display-lg}` | 46px | 48.76px | 0.56px | 500 | Section H2 | `h2` |
| `{type.display-md}` | 40px | 42.4px | 0.46px | 500 | Sub-section H3 | `h3` |
| `{type.heading-sm}` | 26px | 31.2px | 0.56px | 500 | Card titles | `h6` |
| `{type.body-lg}` | 20px | 27.6px | 0.44px | 400 | Intro paragraphs | `p` |
| `{type.body-md}` | 18px | 26.64px | 0.36px | 400 | Default body | `li#menu-item-398` |
| `{type.button}` | 16px | 16px | 0.32px | 500 | Primary CTA | `a#button` |
| `{type.caption}` | 14px | 19.6px | 0.36px | 400 | Small labels | `p.caption` |

### Principles
1. **Heading Weight is Fixed**: All headings (H1-H6) use Aeonik-Medium (500). Never use bold or regular weights for titles.
2. **Optical Tracking**: Larger display sizes (46px+) utilize positive letter spacing (0.56px) to maintain airiness in geometric glyphs.
3. **Line Height Tightness**: Display type maintains a tight 1.02x to 1.06x ratio to ensure visual impact.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 18 |
| `{space.sm}` | 16px | 80 |
| `{space.md}` | 24px | 6 |
| `{space.lg}` | 48px | 6 |
| `{space.xl}` | 60px | 5 |
| `{space.section}` | 100px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, footer | 377 occurrences |
| `{radius.md}` | 10px | Form controls, small buttons | 11 occurrences |
| `{radius.lg}` | 15px | Content cards, image containers | 23 occurrences |
| `{radius.pill}` | 100px | Primary buttons, badges | 8 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide call to action.
**Pages observed:** Homepage, About.
**Spec:** Background: #3838f9 / Text: #ffffff / Border: 0px / Radius: 100px / Padding: 12px 39px / Typography: 16px Aeonik-Medium.
**States observed:** Default: captured | Hover: not captured.

#### Navigation
**Role:** Global header.
**Pages observed:** Homepage, About.
**Spec:** Background: #ffffff / Text: #111111 / Border: 0px / Radius: 0px / Typography: 18px Aeonik-Regular.

### Tier 2: Patterns
#### Card
**Role:** Feature highlights and testimonials.
**Pages observed:** Homepage, About.
**Spec:** Background: #f8f8f8 / Text: #111111 / Border: 0px / Radius: 15px / Padding: 60px / Typography: 16px Aeonik-Regular.

#### Footer
**Role:** Global site closure.
**Pages observed:** Homepage, About.
**Spec:** Background: #111111 / Text: #ffffff / Border: 1px solid #454545 / Radius: 0px / Padding: 50px 0px.

### Tier 3: Surface-specific
#### Dark Surface Section
**Role:** High-impact content bands.
**Pages observed:** Homepage, About.
**Spec:** Background: #111111 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 100px 0px.

#### Badge Card
**Role:** Secondary indicators or category labels.
**Pages observed:** Homepage, About.
**Spec:** Background: #e2ecff / Text: #3838f9 / Border: 0px / Radius: 100px / Padding: 8px 37px.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (estimated) |
| Section Gap | 100px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px. |

## Do's
- Use #3838f9 for all primary user actions.
- Set all headings in Aeonik-Medium with positive letter spacing.
- Use #111111 for full-width sections to create visual rhythm.
- Apply 15px radius to all content-containing cards.
- Maintain 100px vertical spacing between major sections.

## Don'ts
- **Wrong:** Using #0693e3 (Vivid Cyan Blue) for primary buttons. **Right:** Use #3838f9. **Reason:** #0693e3 is a legacy WP token, not the brand primary.
- Do not use #000000 for text; use #111111 for better readability on white.
- Do not apply shadows to cards; the system relies on flat color fills and borders.
- Do not use Aeonik-Regular for headings; it lacks the required brand weight.

## Quick start

```css
/* CSS Variables */
:root {
  --simetrik-primary: #3838f9;
  --simetrik-black: #111111;
  --simetrik-white: #ffffff;
  --simetrik-gray: #787878;
  --simetrik-radius-card: 15px;
  --simetrik-radius-pill: 100px;
  --simetrik-font-display: "Aeonik-Medium", sans-serif;
  --simetrik-font-body: "Aeonik-Regular", sans-serif;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Box-shadow tokens were not found in the CSS variable export, suggesting a flat design preference.
- Specific mobile breakpoint triggers (e.g., 768px vs 1024px) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://simetrik.com | 1440px | 2026-06-06 |
| About | https://simetrik.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://simetrik.com | 390px | 2026-06-06 |