# Solverminds Design System

> High-contrast maritime engineering—Geist-driven typography anchored on deep obsidian and stark zinc foundations.

**Source:** https://solverminds.com | **Captured:** 2026-06-06  
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Solverminds utilizes a "Dark Mode by Default" aesthetic that mirrors the technical precision of maritime software. The system is built on a monochrome foundation of Obsidian (#000000) and Base Black (#09090b), punctuated by a high-voltage Signal Blue (#3b82f6) accent for interactive elements. Typography is strictly Geist, leveraging tight negative letter-spacing on massive 72px display headings to create a dense, authoritative information hierarchy. Layouts favor generous vertical rhythm (96px) and sharp or subtly rounded (8px) containers that house technical data visualizations and product maps.

## Signature DNA
1. **Technical Monochrome Depth:** The interface layers near-black surfaces (#09090b and #060810) against pure black (#000000) to create functional depth without using traditional shadows.
2. **Geist Display Compression:** Large-scale headings (48px to 72px) use aggressive negative tracking (up to -2.52px) and a 700 weight, giving the brand a "stamped" engineering feel.
3. **Signal Blue Accents:** A single high-saturation blue (#3b82f6) is reserved for primary actions and critical borders, cutting through the achromatic base.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-black` | `#000000` | Primary background and text | 9 | 1.0 | CSS Variable |
| `--sm-base` | `#09090b` | Secondary surface background | 8 | 1.0 | CSS Variable |
| `--sm-deep` | `#060810` | Tertiary deep background (Footer) | 2 | 1.0 | Computed Style |
| `--sm-surface` | `#fafafa` | Primary light text and icons | 243 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--sm-blue` | `#3b82f6` | Primary CTA background, active borders | 17 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Geist | 400, 500, 600, 700 | Heading, Body, UI | Inter | Vercel Font License |
| Geist Mono | 400, 600, 700 | Technical Data, Captions | JetBrains Mono | Vercel Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-6xl}` | 72px | 68.4px | -2.52px | 700 | Hero Headlines | `h1.text-5xl.md:text-6xl` |
| `{type.display-5xl}` | 60px | 61.2px | -1.8px | 700 | Page Headers | `h1.text-4xl.md:text-5xl` |
| `{type.display-4xl}` | 48px | 50.4px | -1.44px | 700 | Section Titles | `h2.text-4xl.md:text-5xl` |
| `{type.heading-lg}` | 30px | 36px | -0.6px | 600 | Sub-sections | `h2.text-2xl.md:text-3xl` |
| `{type.heading-md}` | 22px | 33px | -0.55px | 700 | Feature Titles | `span.text-[22px].font-bold` |
| `{type.body-base}` | 16px | 24px | normal | 400 | Default Body | `nav.fixed.top-0` |
| `{type.body-sm}` | 14px | 21px | -0.35px | 600 | UI Labels | `p.text-[14px].font-semibold` |
| `{type.caption-mono}`| 12px | 17.25px | 0.2875px | 400 | Technical Meta | `p.text-[11.5px].font-mono` |

### Principles
- **Headings are always bold:** Weights below 600 are never used for headings.
- **Negative tracking on scale:** As font size increases, letter spacing must decrease proportionally to maintain visual density.
- **Mono for Meta:** Technical specifications and "Since 2003" markers always use Geist Mono.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 83 |
| `{space.md}` | 16px | 31 |
| `{space.lg}` | 24px | 40 |
| `{space.section}` | 96px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 587 occurrences |
| `{radius.sm}` | 6px | Secondary buttons | `Rounded Button` component |
| `{radius.md}` | 8px | Standard cards | `Card` component |
| `{radius.lg}` | 16px | Feature/Pricing cards | `Card` (Pricing) |
| `{radius.pill}` | 9999px | Badges / Tags | 34 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | Default page state | Observed on all pages |
| Bordered | 1px solid #ffffff1a | Card definition | `oklab(1 0 0 / 0.1) 0px 0px 0px 1px` |
| Overlay | 0px 20px 25px -5px | Modals/Pricing | `oklab(0 0 0 / 0.4)` shadow |

## Components

### Tier 1: Foundational

#### Primary Action (Pill)
**Role:** Main site conversion
**Pages observed:** https://solverminds.com
**Spec:** Background: #ffffff05 / Text: #fafafa / Border: #ffffff14 (1px) / Radius: 9999px / Padding: 10px 16px / Typography: Geist 16px
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Inline actions and navigation
**Pages observed:** https://solverminds.com, https://solverminds.com/about
**Spec:** Background: transparent / Text: #fafafa / Border: none / Radius: 6px / Padding: 8px 14px / Typography: Geist 13px
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Standard Card
**Role:** Feature display and content grouping
**Pages observed:** https://solverminds.com, https://solverminds.com/about
**Spec:** Background: #ffffff0a / Text: #f5f5f7 / Border: #ffffff1a (1px) / Radius: 8px / Padding: 10px 20px
**States observed:** Default: Captured

#### Pricing/Feature Card
**Role:** High-emphasis content
**Pages observed:** https://solverminds.com/pricing, https://solverminds.com/about
**Spec:** Background: #09090b (95%) / Text: #000000 / Border: #ffffff14 (1px) / Radius: 16px / Padding: 24px / Shadow: oklab(0 0 0 / 0.4)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Site Footer
**Role:** Global navigation and legal
**Pages observed:** https://solverminds.com, https://solverminds.com/about
**Spec:** Background: #060810 / Text: #fafafa / Border: #ffffff0f (1px top) / Radius: 0px / Padding: 0px
**States observed:** Default: Captured

#### Technical Badge
**Role:** Product metadata and tags
**Pages observed:** https://solverminds.com
**Spec:** Background: transparent / Text: #fafafa / Border: #fafafa (1px) / Radius: 9999px / Typography: Geist 16px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (V) | 96px |
| Column Gap | 24px |

## Do's
- Use **Geist 700** for all display headings above 30px.
- Apply **-2.52px letter-spacing** to 72px headlines.
- Use **#09090b** for section backgrounds to create subtle contrast against the **#000000** canvas.
- Reserve **#3b82f6** strictly for primary interactive triggers.
- Ensure all technical metadata uses **Geist Mono**.

## Don'ts
- **Wrong:** Using #3b82f6 for large text blocks. **Right:** Use #fafafa. **Reason:** Saturated colors are for interaction, not legibility.
- **Wrong:** Applying border-radius to main section containers. **Right:** Use 0px. **Reason:** The brand relies on sharp, architectural edges for its layout structure.
- **Wrong:** Using standard tracking on display type. **Right:** Use negative tracking. **Reason:** Geist requires compression at large scales to maintain the "Solverminds" engineering aesthetic.

## Quick start

```css
:root {
  --sm-black: #000000;
  --sm-base: #09090b;
  --sm-deep: #060810;
  --sm-surface: #fafafa;
  --sm-blue: #3b82f6;
  --sm-border: rgba(255, 255, 255, 0.1);
  
  --font-main: "Geist", sans-serif;
  --font-mono: "Geist Mono", monospace;
}
```

## Known gaps
- Hover states for primary buttons were not explicitly captured in the CSS variable stream.
- Mobile-specific navigation transitions were not captured.
- Success and Error semantic colors were not present in the analyzed marketing pages.