# Sookshum-labs Design System

> High-contrast dark mode canvas punctuated by vibrant orange primary actions and hyper-rounded glassmorphic containers.

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

## TL;DR
Sookshum-labs utilizes a deep monochromatic foundation of absolute black `#000000` and dark charcoal `#151515`, creating a high-end "pro-tool" aesthetic. The primary brand voltage is carried by a saturated orange `#e68624` used exclusively for critical calls-to-action and heading highlights. Typography relies on **Poppins** for an approachable yet geometric feel, often rendered at massive display scales (up to 86px) with tight negative tracking. Layouts are defined by large 32px corner radii on containers and a "glass" effect achieved through subtle inner shadows and semi-transparent backgrounds.

## Signature DNA
1. **Orange-on-Black High Contrast** (Primary orange `#e68624` is used sparingly against `#000000` to create immediate visual hierarchy for conversion points like "Request a quote").
2. **Hyper-Rounded Glassmorphism** (Containers use a consistent 32px radius and an inset shadow `rgba(248, 248, 248, 0.06)` to simulate depth on a flat dark plane).
3. **Geometric Display Type** (Poppins 600 at 86px with -2.15px letter spacing creates a dense, authoritative header style that dominates the hero sections).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--layout-background-color` | `#151515` | Page floor / Footer background | 2 | 1 | Computed style |
| `canvas-black` | `#000000` | Primary section background | 91 | 1 | Computed style |
| `--inner-container` | `#1c1c1c` | Card and panel surfaces | 73 | 1 | CSS variable |
| `--secondary-color` | `#f8f8f8` | Primary text and heading color | 158 | 1 | CSS variable |
| `pure-white` | `#ffffff` | High-emphasis text and icons | 420 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary` | `#e68624` | Primary CTA background, border | 8 | 1 | CSS variable |
| `--light-text-primary` | `#8f8f8f` | Muted body text / descriptions | 1 | 1 | CSS variable |
| `--green-dot` | `#5ff319` | Decorative status indicator | 1 | 1 | Decorative only |
| `--custom-blue` | `#5cc9ff` | Decorative button variant | 1 | 1 | Decorative only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 300, 400, 500, 600 | All headings, display, UI | Poppins (Google Fonts) | OFL |
| Roboto | 500 | Specific button labels | Roboto (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 86px | 111px | -2.15px | 600 | Hero H1 | `h1.hero-text.bg-clip-text` |
| `{type.display.xl}` | 67px | 87.1px | -1.675px | 600 | Secondary Hero | `h1.text-white.hero-text` |
| `{type.display.lg}` | 48px | 67.2px | normal | 500 | Section Headers | `h2.!font-poppins.text-5xl` |
| `{type.heading.md}` | 36px | 54px | normal | 500 | Sub-section heads | `h3.font-poppins.text-[36px]` |
| `{type.heading.sm}` | 26px | 32.5px | normal | 500 | Card Titles | `h4.font-poppins.text-[26px]` |
| `{type.body.lg}` | 19px | 26.6px | normal | 500 | Feature descriptions | `div.font-poppins.text-[19px]` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body text | `section#hero` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Footer links | `a.hover:underline` |

### Principles
1. **Negative tracking on display type.** As Poppins increases in size, letter spacing tightens from normal to -2.15px.
2. **Weight-based hierarchy.** Headings never drop below 500 weight; body text alternates between 300 (light) and 400 (regular).
3. **Color-coded emphasis.** Orange is used as a text-fill for specific "impact" words within H1/H2 headings.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 18 |
| `{space.md}` | 16px | 69 |
| `{space.lg}` | 32px | 76 |
| `{space.section}` | 120px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.panel}` | 32px | Feature cards, pricing cards, containers | 205 occurrences |
| `{radius.pill}` | 9999px | All CTA buttons, status badges | 53 occurrences |
| `{radius.sharp}` | 0px | Page sections, footer | 394 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `glass-inset` | `inset 2px 4px 16px 0px rgba(248, 248, 248, 0.06)` | Primary card depth | Observed on 85 elements |
| `primary-glow` | `inset 0px 0px 6px 0px rgba(255, 255, 255, 0.4)` | Orange button internal light | Observed on 9 elements |
| `floating` | `0px 25px 50px -12px rgba(0, 0, 0, 0.25)` | Hovered or floating assets | Observed on 3 elements |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main conversion action (Request a Quote, Get in Touch)
**Pages observed:** All
**Spec:** Background `#e68624` / Text `#ffffff` / Border `0px` / Radius `9999px` / Padding `0px 24px` / Typography Poppins 500 (16px) / Shadow `rgba(255, 255, 255, 0.4) inset`
**States observed:** Default | Hover: captured

#### Pill Button (Tertiary)
**Role:** Secondary navigation or "Discover" links
**Pages observed:** 2
**Spec:** Background `rgba(40, 40, 40, 0.7)` / Text `#ffffff` / Border `1px rgba(255, 255, 255, 0.1)` / Radius `9999px` / Padding `12px 32px` / Shadow `glass-inset`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or process steps
**Pages observed:** 2
**Spec:** Background `#1c1c1c` / Text `#ffffff` / Border `0px` / Radius `32px` / Padding `32px` / Shadow `glass-inset`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and contact info
**Pages observed:** 2
**Spec:** Background `#151515` / Text `#ffffff` / Border `0px` / Radius `0px` / Padding `25px 0px 0px`
**States observed:** Default

#### Pricing Card
**Role:** Tiered service selection
**Pages observed:** 1
**Spec:** Background `#1c1c1c` / Text `#ffffff` / Border `1px #e68624` (on active) / Radius `32px` / Padding `16px`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Padding | 120px (vertical) |
| Grid Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Display type scales to 52px; card padding reduces to 16px; 1-column stack. |
| Desktop | 1440px | 3-column feature grids; 86px display type. |

## Imagery & decoration
The brand uses high-fidelity 3D renders of abstract tech objects (spheres, nodes, AWS icons) in a monochromatic gray palette. It avoids flat illustrations or bright multi-color photography. Decorative "glass" blur effects are used behind cards to create depth.

## Do's
- Use `#e68624` for the primary action in every section.
- Apply a `32px` radius to all content containers.
- Set display headings in Poppins 600 with negative letter spacing.
- Use `#1c1c1c` for card surfaces to distinguish from the `#000000` canvas.
- Ensure all primary buttons have the white inset shadow for "glow" effect.

## Don'ts
- **Wrong:** Using `#5cc9ff` (Blue) for a primary CTA. **Right:** Use `#e68624`. **Reason:** Blue is a decorative/secondary token only.
- **Wrong:** Using sharp corners for cards. **Right:** Use `32px` radius.
- **Wrong:** Placing dark text on the black canvas. **Right:** Use `#f8f8f8` or `#ffffff`.
- **Wrong:** Using standard Poppins tracking for H1s. **Right:** Use `-2.15px` tracking.

## Similar brands
- Linear (Dark mode, high contrast, geometric)
- Vercel (Monochrome foundation, accent-driven)
- Framer (Glassmorphism, large display type)

## Quick start

### CSS Custom Properties
```css
:root {
  --primary: #e68624;
  --background: #000000;
  --surface: #1c1c1c;
  --text-primary: #f8f8f8;
  --radius-panel: 32px;
  --shadow-glass: inset 2px 4px 16px 0px rgba(248, 248, 248, 0.06);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #e68624;
  --color-surface: #1c1c1c;
  --font-display: "Poppins", sans-serif;
  --radius-panel: 32px;
  --shadow-glass: inset 2px 4px 16px 0px rgba(248, 248, 248, 0.06);
}
```

## Known gaps
- Hover state transitions (durations/easings) were not explicitly captured in CSS variables.
- Mobile navigation menu transition logic was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://sookshum-labs.com | 1440px | 2026-06-06 |
| Pricing | https://sookshum-labs.com/pricing | 1440px | 2026-06-06 |
| About | https://sookshum-labs.com/about | 1440px | 2026-06-06 |