# Wittybrains Design System

> High-contrast corporate engineering aesthetic anchored by deep plum accents and geometric card structures.

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

## TL;DR
Wittybrains utilizes a structured, high-contrast layout that balances a pure white canvas (#ffffff) with deep gray text (#444444) and a signature plum accent (#881280). The system relies heavily on Montserrat for geometric headings and Open Sans for legible body copy. Visual depth is achieved through soft, large-radius shadows (29px-30px blur) on cards with rounded corners ranging from 10px to 18px. The interface is punctuated by vibrant secondary accents like cyan (#1bb1dc) and orange (#ff5723) used primarily for iconography and decorative highlights.

## Signature DNA
1. **Plum Typography Anchors** (The use of #881280 for key headings and pricing elements provides a sophisticated, non-standard corporate identity across the About and Pricing pages).
2. **Soft-Shadow Floating Cards** (Content is organized into white cards with `rgba(68, 88, 144, 0.1) 0px 10px 29px` shadows and 18px radii, creating a layered, modern engineering feel).
3. **Geometric Type Pairing** (The strict pairing of Montserrat for bold subheadings and Open Sans for 16px body text ensures a clean, professional information hierarchy).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, card surface, primary text | 52 | 1.0 | CSS Variable: --white |
| `{color.gray.dark}` | `#444444` | Primary body text | 101 | 0.8 | Computed Style |
| `{color.black}` | `#000000` | Headings, button text, dark surfaces | 22 | 0.8 | Computed Style |
| `{color.gray.light}` | `#dddddd` | Default borders and dividers | 9 | 0.6 | Computed Style |
| `{color.pink.mist}` | `#fceef3` | Subtle section backgrounds | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.plum}` | `#881280` | Primary brand accent, pricing text, headings | 12 | 0.8 | Resolved Primary |
| `{color.cyan}` | `#1bb1dc` | Icon backgrounds, secondary borders | 4 | 0.6 | Computed Style |
| `{color.orange}` | `#ff5723` | Decorative highlights, small text accents | 5 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 500, 600, 700 | Headings, subheadings | Montserrat (Google) | OFL |
| Open Sans | 400, 500 | Body, descriptions | Open Sans (Google) | OFL |
| monospace | 400 | Technical UI, folder buttons | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h4.title}` | 18px | 21.6px | normal | 700 | Section subheadings | `h4.title` |
| `{type.h4.title.soft}` | 18px | 21.6px | normal | 600 | Secondary subheadings | `h4.title` |
| `{type.body.base}` | 16px | 24px | normal | 400 | Default body text | `section#technologies` |
| `{type.body.sm.medium}` | 14px | 24px | normal | 500 | Description text | `p.description` |
| `{type.body.sm.tight}` | 14px | 20px | normal | 500 | Compact descriptions | `p.description` |
| `{type.mono.sm}` | 13px | normal | normal | 400 | Technical UI markers | `span.folder-button` |
| `{type.caption}` | 12px | 24px | normal | 500 | Small labels/captions | `span` |

### Principles
1. **Heading Geometry:** All subheadings use Montserrat to maintain a modern, geometric feel.
2. **Legibility First:** Body text is locked to 16px Open Sans with a generous 1.5x line height (24px).
3. **Plum Emphasis:** Use #881280 for text-based emphasis in professional or financial contexts (Pricing/About).

## Spacing
**Base unit:** 5px (derived from 10/15/20/30 pattern)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 9 |
| `{space.sm}` | 15px | 26 |
| `{space.md}` | 20px | 51 |
| `{space.lg}` | 30px | 12 |
| `{space.xl}` | 60px | 6 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default surfaces, inputs | 120 occurrences |
| `{radius.md}` | 10px | Feature cards, interactive elements | Card component |
| `{radius.lg}` | 18px | Primary content cards | Card component |
| `{radius.full}` | 50% | Icon containers, avatars | Surface component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(68, 88, 144, 0.1) 0px 10px 29px 0px` | Feature/Service cards | Card component |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.1) 0px 10px 30px 0px` | Secondary cards | Card component |
| `{shadow.border}` | `rgba(0, 0, 0, 0.1) 0px 0px 5px 0px` | Subtle UI depth | Surface component |

## Components
### Tier 1: Foundational
#### Feature Card
**Role:** Primary content container for services and technologies.
**Pages observed:** Home, About
**Spec:** Background: #ffffff | Radius: 18px | Padding: 30px 20px | Shadow: `{shadow.card}`
**States observed:** Default | Hover: not captured

#### Icon Surface
**Role:** Circular background for service icons.
**Pages observed:** Home
**Spec:** Background: #1bb1dc (cyan) or transparent | Radius: 50% | Padding: 0px
**States observed:** Default

### Tier 2: Patterns
#### Service Grid Item
**Role:** Standardized block for technology listings.
**Pages observed:** Home
**Spec:** Background: #ffffff | Radius: 10px | Padding: 20px | Shadow: `{shadow.soft}`
**States observed:** Default

#### Team Member Plate
**Role:** Displaying executive profiles.
**Pages observed:** About
**Spec:** Background: #000000 (overlay) | Text: #ffffff | Padding: 15px 0px | Typography: Montserrat
**States observed:** Default

### Tier 3: Surface-specific
#### Pricing Card
**Role:** Highlighting service tiers.
**Pages observed:** Pricing
**Spec:** Background: rgba(255, 255, 255, 0.8) | Border: 1px #dddddd | Shadow: `rgb(210, 211, 211) 3px 3px 17px`
**States observed:** Default

#### Section Header (Technologies)
**Role:** Title for major page sections.
**Pages observed:** Home, About
**Spec:** Text: #444444 | Typography: Montserrat 700 18px | Padding: 60px 0px 40px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (standard container) |
| Section Padding | 100px vertical |
| Card Gap | 20px-30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Cards stack vertically; padding reduced to 15px |
| Desktop | 1440px | 3-up or 4-up card grids |

## Do's
- Use Montserrat for all titles to maintain geometric consistency.
- Apply `{shadow.card}` to white surfaces to denote interactivity.
- Use #881280 for primary text emphasis on white backgrounds.
- Maintain 24px line height for all 16px body copy.
- Use 50% border-radius for decorative icon backdrops.

## Don'ts
- **Wrong:** Using #007bff (standard blue) for primary CTAs. **Right:** Use #881280. **Reason:** #007bff is a generic browser token; #881280 is the brand's resolved primary.
- Do not use sharp corners (0px) for content cards; always use 10px or 18px.
- Do not use Montserrat for long-form body text; stick to Open Sans.
- Avoid using #ff5723 (orange) for large background areas; keep it for accents.

## Quick start
```css
:root {
  --witty-plum: #881280;
  --witty-cyan: #1bb1dc;
  --witty-gray: #444444;
  --witty-white: #ffffff;
  --witty-shadow-card: rgba(68, 88, 144, 0.1) 0px 10px 29px 0px;
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://wittybrains.com | 1440x900 | 2026-06-06 |
| Pricing | https://wittybrains.com/pricing | 1440x900 | 2026-06-06 |
| About | https://wittybrains.com/about | 1440x900 | 2026-06-06 |