# Superwise Design System

> High-contrast governance interface anchoring vibrant safety-red actions against a structured, neutral-slate foundation.

**Source:** https://superwise.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Superwise utilizes a high-density, monochrome foundation of deep slates (`#1a1d24`) and cool neutrals (`#505d77`) to establish an atmosphere of enterprise authority. This sobriety is punctuated by a singular, high-voltage brand red (`#e22624`) used exclusively for primary conversion points and critical "guardrail" UI elements. Typography is strictly Inter-based, relying on heavy weights (700) and tight tracking (-1.2px) for display impact, while maintaining a spacious 8px-based grid. The system balances "sharp" 0px corners for layout containers with "soft" 12px-16px radii for interactive cards and pill-shaped buttons.

## Signature DNA
1. **The Guardrail Red** (The primary brand color `#e22624` is used as a functional signal for safety and governance, appearing in hero CTAs and "Guardrail" card borders across all pages).
2. **Slate-Neutral Typography** (Body text avoids pure black, opting for `--color-neutral-600` (`#505d77`) and `--color-neutral-700` (`#424c61`) to reduce visual fatigue on white canvases).
3. **Hybrid Geometry** (A deliberate mix of 0px "sharp" surfaces for section containers and 12px-16px "soft" radii for content cards, creating a distinction between the platform architecture and the data within it).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-neutral-900` | `#1a1d24` | Primary text, dark surface backgrounds | 301 | 1 | computed_style |
| `--tw-ring-offset-color` | `#ffffff` | Page background, card surfaces | 90 | 1 | brand_page |
| `--color-neutral-200` | `#d5dae2` | Default borders, secondary text | 63 | 1 | computed_style |
| `--color-neutral-50` | `#f6f7f9` | Subtle section backgrounds | 9 | 1 | computed_style |
| `--color-neutral-100` | `#eceef2` | Light dividers, tertiary text | 7 | 1 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-neutral-600` | `#505d77` | Secondary body text | 64 | 1 | computed_style |
| `--color-neutral-500` | `#657490` | Muted labels, captions | 53 | 1 | computed_style |
| `--color-primary-600` | `#e22624` | Primary CTA background, brand accents | 26 | 1 | brand_page |
| `--color-neutral-700` | `#424c61` | Emphasis text on light surfaces | 22 | 1 | computed_style |
| `--color-primary-700` | `#b81e1c` | Hover states for red buttons | 19 | 1 | computed_style |
| `--color-primary-500` | `#f04a48` | Secondary brand accents | 8 | 1 | computed_style |
| `--color-primary-300` | `#f9a8a8` | Decorative text (decorative_only) | 2 | 1 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--color-success` | `#10b981` | Positive metrics, success states |
| `--color-error` | `#ff3333` | Critical alerts, error states |
| `--color-warning` | `#f59e0b` | Cautionary states |
| `--color-info` | `#22d3ee` | Technical annotations |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700 | Display, Heading, Body | Inter (Google Fonts) | SIL Open Font |
| IBM Plex Mono | 500, 600 | Technical labels, Mono | IBM Plex Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 60px | 63px | -1.2px | 700 | Hero H1 | `h1.text-h1` |
| `{type.h2}` | 36px | 41.4px | -0.36px | 700 | Section Head | `h2.text-h2` |
| `{type.h3}` | 32px | 40px | normal | 600 | Feature Title | `div.w-16.h-16` |
| `{type.h4}` | 24px | 32.4px | normal | 600 | Sub-section Head | `p.text-body-lg.md:text-h4` |
| `{type.body-lg}` | 18px | 28.8px | normal | 400 | Lead paragraph | `p.text-body-lg` |
| `{type.body}` | 16px | 24px | normal | 400 | Default text | `section.bg-gradient` |
| `{type.label}` | 16px | 24px | 1.28px | 600 | Section labels | `p.text-section-label` |
| `{type.body-sm}` | 13px | 19.5px | normal | 400 | Footer/Muted text | `p.text-body-sm` |

### Principles
1. **Tight Display Tracking:** Display sizes (60px) use aggressive negative tracking (-1.2px) to maintain visual density.
2. **Neutral Emphasis:** Primary text is rarely pure black; it uses `#1a1d24` to maintain softness against white backgrounds.
3. **Mono for Metadata:** IBM Plex Mono is reserved for technical labels and "SDK/Docs" links to signal developer utility.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 8px | 46 |
| `{space.sm}` | 12px | 47 |
| `{space.md}` | 16px | 68 |
| `{space.lg}` | 24px | 72 |
| `{space.xl}` | 32px | 44 |
| `{space.xxl}` | 48px | 20 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, footer | 394 occurrences |
| `{radius.md}` | 8px | Pricing cards, small inputs | 26 occurrences |
| `{radius.lg}` | 12px | Feature cards, primary surfaces | 55 occurrences |
| `{radius.xl}` | 16px | Large brand cards, hero containers | 11 occurrences |
| `{radius.pill}` | 9999px | CTA buttons, badges | 24 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `0 1px 2px 0 rgba(0,0,0,0.05)` | Default card state | 22 occurrences |
| `{shadow.elevated}` | `0 10px 15px -3px rgba(0,0,0,0.1)` | Hovered cards | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (e.g., "Get Superwise Chat")
**Pages observed:** All
**Spec:** Background: `#e22624` | Text: `#ffffff` | Radius: `9999px` | Padding: `12px 24px` | Typography: Inter 600
**States observed:** Default: `#e22624` | Hover: `#b81e1c` | Focus: Captured | Active: Captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Control AI with our Platform")
**Pages observed:** All
**Spec:** Background: `transparent` | Text: `#1a1d24` | Border: `1px #d5dae2` | Radius: `9999px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit and product feature display
**Pages observed:** https://superwise.ai, https://superwise.ai/pricing
**Spec:** Background: `#ffffff` | Text: `#1a1d24` | Border: `1px #d5dae2` | Radius: `12px` | Padding: `32px`
**States observed:** Default: Captured | Hover: `{shadow.elevated}`

#### Governance Card
**Role:** Highlighting specific "Guardrail" or "Policy" features
**Pages observed:** https://superwise.ai, https://superwise.ai/about
**Spec:** Background: `#ffffff` | Border: `2px #e22624` | Radius: `16px` | Padding: `40px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** https://superwise.ai/pricing
**Spec:** Background: `#ffffff` | Border: `1px #d5dae2` | Radius: `8px` | Padding: `24px`
**States observed:** Default: Captured | Featured: `Border: 2px #f04a48`

#### Section Label
**Role:** Small caps eyebrow text for section categorization
**Pages observed:** https://superwise.ai, https://superwise.ai/about
**Spec:** Text: `#b81e1c` | Typography: IBM Plex Sans 600 | Size: 16px | Letter Spacing: 1.28px

## Layout
| Property | Value |
|---|---|
| Max content width | 1280px |
| Section padding (vertical) | 80px - 120px |
| Grid columns | 12 |
| Column gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | <768px | Stacked 1-column cards, text-h1 reduces to 40px |
| Desktop | 1440px | 3-up feature grids, 60px display type |

## Imagery & decoration
Superwise uses technical diagrams and high-fidelity UI screenshots with soft shadows (`rgba(0,0,0,0.1)`). Backgrounds occasionally feature subtle gradients from `#1a1d24` to `#0d0e11` in hero sections. Avoids organic shapes, photography of people, or rounded corners on large layout-level containers.

## Do's
- Use `#e22624` for primary conversion buttons only.
- Apply `{radius.pill}` to all interactive buttons.
- Set secondary text to `#505d77` for readability on white.
- Use IBM Plex Mono for technical links (Docs/SDK).
- Maintain 80px minimum vertical spacing between major sections.

## Don'ts
- Do not use `#e22624` for large background surfaces; keep it for accents.
- Do not use sharp corners (0px) on interactive cards; use `{radius.lg}`.
- Do not use pure black `#000000` for body text; use `#1a1d24`.
- **Wrong:** Using a generic red like `#ff0000` for CTAs. **Right:** Use `--color-primary-600` (`#e22624`). **Reason:** Brand consistency and specific governance-red identity.

## Similar brands
- Scale AI
- Weights & Biases
- Datadog
- Sentry

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #e22624;
  --color-neutral-900: #1a1d24;
  --color-neutral-600: #505d77;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --font-main: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}
```

## Agent prompt examples
- "Create a feature card with a 1px #d5dae2 border, 12px corner radius, and a primary red #e22624 icon."
- "Generate a hero section with a 60px Inter Bold headline, -1.2px letter spacing, and a pill-shaped red CTA button."
- "Design a pricing table using #f6f7f9 for the header background and #1a1d24 for the main text."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://superwise.ai | 1440x900 | 2026-06-06 |
| Pricing | https://superwise.ai/pricing | 1440x900 | 2026-06-06 |
| About | https://superwise.ai/about | 1440x900 | 2026-06-06 |