# Wisdmlabs Design System

> High-contrast monochrome precision anchored by Poppins and Inter, utilizing deep obsidian surfaces and sharp, functional geometry.

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

## TL;DR
Wisdmlabs employs a "monochrome-plus" strategy where the core identity is strictly achromatic (#000000 and #ffffff), while product-specific accents (like #ffb800 amber) are reserved for secondary UI signals. The system relies on a dual-font strategy: **Inter** for high-density technical data and primary display, and **Poppins** for geometric subheadings and counter elements. Layouts alternate between stark white canvases and deep #121519 obsidian bands. Componentry is characterized by high-radius pills (999px) for primary actions and soft-edged cards (16px) that use inset shadows to create a "pressed" or "layered" depth rather than traditional elevation.

## Signature DNA
1. **Obsidian Sectioning** (Deep #121519 or #000000 backgrounds used for high-impact service grids and footer blocks, creating a stark rhythmic contrast against white content areas.)
2. **The Inset Depth Pattern** (Cards and buttons frequently utilize inset shadows, such as `rgba(255, 255, 255, 0.25) 0px 4px 4px 0px inset`, to create a tactile, molded appearance.)
3. **Geometric Pill CTAs** (Primary actions are consistently rendered as 999px pills, often in absolute black #000000 with white text, providing a clear, rounded anchor in a grid-heavy layout.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, button backgrounds, brand borders | 124 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 187 | 1.0 | `--wp--preset--color--white` |
| `{color.obsidian}` | `#121519` | Dark section backgrounds, footer surface | 62 | 0.8 | Computed Style |
| `{color.iron}` | `#333333` | Secondary text, dark surface variations | 103 | 0.8 | Computed Style |
| `{color.ash}` | `#717171` | Muted text, secondary borders | 49 | 0.8 | Computed Style |
| `{color.smoke}` | `#f2f2f2` | Subtle section backgrounds | 22 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.amber}` | `#ffb800` | Decorative text, rating stars (decorative_only) | 8 | 1.0 | `--wp--preset--color--luminous-vivid-amber` |
| `{color.berry}` | `#cc3366` | About page highlights (decorative_only) | 43 | 0.8 | Computed Style |
| `{color.blue}` | `#2563eb` | Link states (decorative_only) | 18 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Inter** | 400, 500, 600, 700 | Display, Body, UI | Inter (Google Fonts) | SIL OFL |
| **Poppins** | 300, 400, 500, 600, 700 | Subheadings, Counters | Poppins (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 52px | 80px | 0.5px | 600 | Hero Title | `h1.wdm-home-hero__title` |
| `{type.display.lg}` | 40px | 60px | 0.5px | 600 | Section Headlines | `h2.wdm-logo-marquee__headline` |
| `{type.heading.md}` | 30px | 50px | 0.5px | 500 | Value Prop Heads | `p.wdm-value-prop__headline` |
| `{type.heading.sm}` | 24px | 40px | 0.5px | 500 | Product Names | `h3.wdm-featured-products__name` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Lead Paragraphs | `p` |
| `{type.body.md}` | 16px | 26px | normal | 400 | Standard Body | `p.wdm-home-hero__description` |
| `{type.ui.md}` | 14px | 24px | 0.2px | 500 | Primary Pill CTA | `a.wdm-home-hero__cta--primary` |
| `{type.caption}` | 12px | 18px | normal | 600 | Rating Notes | `span.wdm-featured-products__rating-note` |

### Principles
1. **Display Tightness**: Large headlines (40px+) use a slightly tighter letter-spacing (0.5px) relative to their size to maintain impact.
2. **Poppins for Numerics**: All counter numbers and statistics use Poppins to leverage its geometric clarity.
3. **Inter for Utility**: Navigation, buttons, and technical descriptions are strictly Inter for maximum legibility.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 25 |
| `{space.sm}` | 12px | 14 |
| `{space.md}` | 20px | 54 |
| `{space.lg}` | 24px | 17 |
| `{space.xl}` | 50px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp sections, inputs | 697 occurrences |
| `{radius.md}` | 8px | Service cards | 12 occurrences |
| `{radius.lg}` | 16px | Content cards | 14 occurrences |
| `{radius.pill}` | 999px | Buttons, badges | 28 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.inset-light}` | `rgba(255, 255, 255, 0.25) 0px 4px 4px 0px inset` | Card depth | Card component |
| `{shadow.soft-outer}` | `rgba(0, 0, 0, 0.2) 0px 0px 10px 0px` | Floating cards | About page cards |
| `{shadow.button-glow}` | `rgba(255, 255, 255, 0.15) 0px 0px 2px 0px inset` | Dark pill buttons | Primary CTAs |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call-to-action for lead generation and navigation.
**Pages observed:** Home, About
**Spec:** Background: `#0d0d0d` | Text: `#ffffff` | Radius: `999px` | Padding: `10px 18px` | Typography: `{type.ui.md}`
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Surface Card
**Role:** Container for service descriptions and testimonials.
**Pages observed:** Home, About
**Spec:** Background: `rgba(255, 255, 255, 0.7)` | Border: `1px solid #e0e0e0` | Radius: `16px` | Padding: `28px` | Shadow: `{shadow.inset-light}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Service Showcase Grid
**Role:** Displaying core offerings with icons and descriptions.
**Pages observed:** Home, About
**Spec:** Background: `rgba(0, 0, 0, 0)` | Text: `#ffffff` | Border: `1px solid rgba(255, 255, 255, 0.1)` | Radius: `16px` | Padding: `20px`
**States observed:** Default | Hover: captured

#### Logo Marquee
**Role:** Social proof band for client logos.
**Pages observed:** Home
**Spec:** Background: `#ffffff` | Height: `auto` | Padding: `50px 0` | Alignment: Center

### Tier 3: Surface-specific

#### Obsidian Footer
**Role:** Global site navigation and contact info.
**Pages observed:** Home, About
**Spec:** Background: `#121519` | Text: `#ffffff` | Border-top: `1px solid #333333` | Typography: `{type.body.md}`
**States observed:** Default

#### Contact Form Panel
**Role:** Lead capture on Home and About.
**Pages observed:** Home
**Spec:** Background: `#000000` | Text: `#ffffff` | Radius: `25px` | Padding: `40px` | Input Radius: `3px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 70px - 150px |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero title scales to 32px; section padding reduces to 30px; grids stack 1-column. |
| Desktop | 1440px | 12-column grid active; 1200px container centered. |

## Do's
- Use `#000000` for primary buttons on light backgrounds.
- Apply `{radius.pill}` (999px) to all interactive buttons.
- Reserve **Poppins** for numerical data and counter labels.
- Use `{shadow.inset-light}` to define card boundaries on white backgrounds.
- Maintain a minimum of 70px vertical spacing between major sections.

## Don'ts
- **Wrong:** Using `#ffb800` for primary button backgrounds. **Right:** Use `#000000`. **Reason:** Amber is a decorative accent, not a primary brand action color.
- **Wrong:** Applying soft drop shadows to all cards. **Right:** Use inset shadows or 1px borders. **Reason:** The brand identity is flat and molded, not floating.
- **Wrong:** Mixing Inter and Poppins within the same text block. **Right:** Use Inter for prose and Poppins for headers/stats.
- Do not use border radii between 1px and 5px for cards; keep cards at 8px or 16px.

## Similar brands
- Vercel (monochrome, high-contrast)
- Linear (obsidian surfaces, sharp geometry)
- Framer (pill-based UI, typography-first)

## Quick start

```css
/* CSS Variables */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-obsidian: #121519;
  --radius-pill: 999px;
  --radius-card: 16px;
  --font-primary: 'Inter', sans-serif;
  --font-accent: 'Poppins', sans-serif;
}
```

## Agent prompt examples
- "Generate a service card for Wisdmlabs using a white background with a 16px border radius, a 1px #e0e0e0 border, and an inset shadow of rgba(255, 255, 255, 0.25) 0px 4px 4px 0px. Use Inter 16px for the description."
- "Create a primary CTA button in absolute black with 999px radius, 10px 18px padding, and white Inter text at 14px with 0.2px letter spacing."
- "Design a dark section header using Poppins 40px weight 600 in white on a #121519 background."

## Known gaps
- Hover state transitions for the Service Showcase Grid were not fully captured in the static evidence.
- Specific mobile menu transition logic is missing from the source.

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