# Springdel Design System

> High-contrast electric blue accents cutting through a structured, cool-gray and white technical grid.

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

## TL;DR
Springdel utilizes a high-energy "Primary Blue" (#241df2) as its core functional and brand signal, set against a foundation of soft grays (#f0f0f5) and pure white surfaces. The typography is anchored by **Manrope**, used at extreme weights (800) for display headers to create a bold, technical authority, while **Lato** handles high-density body content. The system relies on a "panel" aesthetic with generous border radii (up to 35px) and subtle inset-style shadows to define its dashboard-inspired UI.

## Signature DNA
1. **The Electric Primary:** Use of #241df2 (`--primary-blue`) for all high-priority actions and brand-critical text highlights, maintaining a 7.3:1 contrast ratio against the light canvas.
2. **Heavyweight Manrope Display:** Hero headers are strictly Manrope at weight 800, often reaching 72px, creating a "thick" typographic presence that feels industrial and stable.
3. **Dashboard Panels:** Content is organized into cards with 16px to 35px radii, often featuring subtle 1px borders in #c4caff or #f0f0f5 to mimic a software interface.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | #ffffff | Primary surface, button text | 140 | 0.8 | computed_style |
| `{colors.black}` | #000000 | Primary text, dark sections | 234 | 0.8 | computed_style |
| `{colors.canvas}` | #f0f0f5 | Page background, borders | 14 | 1.0 | `--k1` |
| `{colors.surface-soft}` | #f8f8fc | Secondary surface | 4 | 1.0 | `--k0` |
| `{colors.border-muted}` | #dedee8 | Divider lines | 2 | 1.0 | `--k2` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | #241df2 | Primary CTA, brand text | 23 | 1.0 | `--primary-blue` |
| `{colors.accent-light}` | #6d74ff | Secondary text emphasis | 18 | 1.0 | `--i4` |
| `{colors.accent-deep}` | #3730f5 | Surface backgrounds | 16 | 1.0 | `--i5` |
| `{colors.text-muted}` | #6b6b8a | Secondary body text | 17 | 1.0 | `--k5` |
| `{colors.dark-blue}` | #110359 | Dark mode borders | 4 | 1.0 | `--dark-blue-bg` |
| `{colors.pale-blue}` | #edf7ff | Decorative surface | 1 | 1.0 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Manrope | 400, 500, 600, 700, 800 | Display, Headings | Manrope (Google Fonts) | SIL Open Font |
| Lato | 400 | Body copy | Lato (Google Fonts) | SIL Open Font |
| JetBrains Mono | 400, 500 | Technical metrics | JetBrains Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-hero}` | 72px | 68.4px | normal | 800 | Main Hero H1 | `h1.h1-hero-main` |
| `{type.display-lg}` | 42px | 45.76px | normal | 800 | Section Headers | `h2.h2-new-2` |
| `{type.heading-md}` | 38px | 42.24px | normal | 800 | Sub-section | `h3.h3-new.white` |
| `{type.heading-sm}` | 32px | 35.2px | normal | 700 | Card Titles | `h2.h2-new-3` |
| `{type.body-lg}` | 18px | 26.4px | normal | 500 | Intro Paragraphs | `p.p-new` |
| `{type.body-base}` | 16px | 24px | normal | 400 | Default Body | `div.section.nav-2` |
| `{type.button}` | 14px | 24px | normal | 600 | CTA Labels | `a.cta-button` |
| `{type.caption-mono}` | 11px | 24px | 1.1px | 400 | Technical KPIs | `div.metric-l` |

### Principles
1. **Display Boldness:** Headers must use Manrope at weight 800. Weight 700 is reserved for secondary headings only.
2. **Technical Monospace:** Use JetBrains Mono for all data-driven metrics and labels to signal "EdgeOps" precision.
3. **Body Legibility:** Lato 400 is the workhorse for long-form text, always set with a 1.5x line-height (24px on 16px base).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 16 |
| `{space.sm}` | 12px | 10 |
| `{space.md}` | 20px | 12 |
| `{space.lg}` | 32px | 26 |
| `{space.xl}` | 48px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.control}` | 10px | Buttons, small inputs | `radius: 10.08px` |
| `{radius.card}` | 16px | Content cards | `radius: 16px` |
| `{radius.panel}` | 35px | Large section containers | `radius: 35px` |
| `{radius.pill}` | 99px | Tags, badges | `radius: 99px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | rgba(10, 10, 30, 0.04) 0px 2px 6px 0px | Standard cards | Card component |
| `{shadow.glow}` | rgba(55, 48, 245, 0.5) 0px 6px 18px -4px | Primary CTA hover | Observed on primary buttons |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** https://springdel.com, https://springdel.com/about
**Spec:** Background: #241df2 | Text: #ffffff | Radius: 10px | Padding: 10.8px 16.56px | Typography: Manrope 600 (14px)
**States observed:** Default | Hover: captured (glow shadow) | Active: captured

#### Ghost Button
**Role:** Secondary actions / Navigation
**Pages observed:** https://springdel.com
**Spec:** Background: transparent | Text: #241df2 | Border: 1px #241df2 | Radius: 10px | Typography: Manrope 600 (14px)
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product capabilities
**Pages observed:** https://springdel.com
**Spec:** Background: #ffffff | Border: 1px #c4caff | Radius: 8px | Shadow: `{shadow.subtle}` | Text: #6d74ff
**States observed:** Default | Hover: captured

#### Metric Badge
**Role:** Technical data display
**Pages observed:** https://springdel.com
**Spec:** Background: #f8f8fc | Border: 1px #f0f0f5 | Radius: 10px | Typography: JetBrains Mono (11px)
**States observed:** Default

### Tier 3: Surface-specific

#### Dashboard Surface
**Role:** Main content container for platform previews
**Pages observed:** https://springdel.com, https://springdel.com/about
**Spec:** Background: transparent | Radius: 35px | Border: 0px | Padding: 0px
**States observed:** Default

#### Footer Container
**Role:** Global site footer
**Pages observed:** https://springdel.com
**Spec:** Background: #000000 | Text: #ffffff | Padding: 128px 0px 0px
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1200px |
| Section Padding | 128px (Vertical) |
| Grid Gutter | 24px |

## Do's
- Use #241df2 for all interactive elements to maintain brand "voltage."
- Apply Manrope 800 for hero headlines to ensure technical authority.
- Use JetBrains Mono for any numerical data or status labels.
- Ensure cards have at least an 8px radius; use 35px for large layout containers.
- Maintain a high contrast (7:1+) for text on the #f0f0f5 canvas.

## Don'ts
- **Wrong:** Using #0000ff as the primary action color. **Right:** Use #241df2. **Reason:** #0000ff is a browser default and lacks the specific brand saturation of Springdel's primary blue.
- **Wrong:** Setting display headers in Lato. **Right:** Use Manrope 800. **Reason:** Lato lacks the geometric weight required for the brand's display tier.
- **Wrong:** Using sharp 0px corners for cards. **Right:** Use at least 8px radius. **Reason:** The brand identity relies on the "softened technical" dashboard aesthetic.
- Do not use #edf7ff for primary buttons; it is a decorative background token only.
- Do not use Manrope below 13px; switch to JetBrains Mono for micro-labels.

## Similar brands
- Snyk (Technical blue, heavy sans-serif)
- Datadog (Dashboard-centric UI, high-density metrics)
- Vercel (High contrast, technical typography)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary-blue: #241df2;
  --canvas-gray: #f0f0f5;
  --text-main: #0a0a14;
  --radius-panel: 35px;
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Lato', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
```

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