# Firsthand Design System

> High-contrast professional canvas punctuated by electric blue actions and bold, extended sans-serif headlines.

**Source:** [https://firsthand.co](https://firsthand.co) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Firsthand utilizes a monochrome foundation of pure white (#ffffff) and deep charcoals (#222222, #212529) to create a structured, career-focused environment. The system's primary energy is derived from an electric blue accent (#005dfe) used exclusively for high-priority interactive elements. Typography is the primary brand carrier, pairing the aggressive, wide-set **akzidGroCFFBolExFont** for display headlines with the highly legible **abcFavoriteRegularFont** for body content. Layouts are spacious with significant vertical rhythm, often utilizing 24px rounded panels to soften the otherwise rigid, professional grid.

## Signature DNA
1. **Extended Display Typography** (The use of **akzidGroCFFBolExFont** at large scales (42px+) with extended widths creates a "ranking" or "editorial" authority seen on the homepage and about pages.)
2. **Electric Blue Punctuation** (The specific hex #005dfe is reserved for primary CTAs and dashboard indicators, providing a singular chromatic focus against the grayscale canvas.)
3. **Softened Professionalism** (The juxtaposition of sharp 0px edges for standard buttons and 24px radii for feature cards and secondary "pill" buttons.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 26 | 1 | `--bs-body-bg` |
| `{color.ink.primary}` | `#222222` | Primary text, high-contrast borders | 84 | 1 | `--brand-contrast-color` |
| `{color.ink.secondary}` | `#212529` | Body text, secondary UI labels | 72 | 1 | `--bs-body-color` |
| `{color.ink.emphasis}` | `#080707` | Headings, emphasis text, shadows | 4 | 1 | `--bs-emphasis-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent.primary}` | `#005dfe` | Primary button background, accent | 22 | 1 | `--wl-accent-color` |
| `{color.accent.warm}` | `#fcb034` | Decorative surfaces (decorative_only) | 2 | 1 | `--branding-primary-color-accent` |
| `{color.accent.cool}` | `#3b86c4` | Link color (decorative_only) | 1 | 1 | `--wl-link-color` |
| `{color.accent.alert}` | `#ff455e` | Surface backgrounds, alerts | 4 | 0.6 | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `akzidGroCFFBolExFont` | 400, 700 | Display, Headings | Akzidenz-Grotesk Extended | Custom/Licensed |
| `abcFavoriteRegularFont` | 400 | Body, UI labels | Inter | Custom/Licensed |
| `abcFavoriteMonoBoldFont` | 700 | Technical, Labels | JetBrains Mono | Custom/Licensed |
| `Open Sans` | 400, 600, 700 | Secondary Headings | Open Sans (Google) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 58px | 63.8px | normal | 700 | Hero headlines | `div.col-10.col-sm-10` |
| `{type.display.lg}` | 42px | 50.4px | 0.42px | 700 | Section titles | `label.PublicLanding_rankingHeadingText___3Dv5` |
| `{type.heading.md}` | 32px | 32px | normal | 700 | Sub-section heads | `div.col-12.PublicLanding_wwfHeader__HUHmB` |
| `{type.heading.sm}` | 22px | 28.08px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Primary body text | `div.col-md-12.col-lg-11` |
| `{type.body.md}` | 16px | 22.4px | normal | 400 | Default body text | `p` |
| `{type.label.mono}` | 16px | 16px | 0.8px | 700 | UI Labels | `div.col-12.container` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Captions, small UI | `div.PublicLanding_rectangle__etzdM` |

### Principles
1. **Headlines use extended widths.** Display type consistently uses the "BolEx" variant to occupy horizontal space.
2. **Tight line heights for display.** Large headings (32px+) use line-heights between 1.0 and 1.2 to maintain visual density.
3. **Generous body tracking.** Monospace labels use 0.8px tracking to ensure legibility at small sizes.

## Spacing
**Base unit:** Custom (Variable)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 22 |
| `{space.sm}` | 14px | 28 |
| `{space.md}` | 30px | 10 |
| `{space.lg}` | 40px | 8 |
| `{space.xl}` | 65px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary buttons, standard containers | 170 occurrences |
| `{radius.input}` | 4px | Form inputs, small surfaces | 4 occurrences |
| `{radius.pill}` | 24px | Rounded buttons, feature cards | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(113, 113, 113, 0.25) 0px 2px 4px 0px` | Feature cards, floating surfaces | Observed on 4 components |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background `#005dfe` / Text `#212529` / Radius `0px` / Font `14px`
**States observed:** Default | Hover: Not captured

#### Rounded Button (Pill)
**Role:** Secondary or "Soft" CTA
**Pages observed:** Homepage, About
**Spec:** Background `#005dfe` / Text `#ffffff` / Radius `24px` / Padding `1px 25px` / Font `16px`
**States observed:** Default | Active: Captured

### Tier 2: Patterns
#### Outline Button
**Role:** Tertiary actions
**Pages observed:** Homepage
**Spec:** Background `transparent` / Text `#38454a` / Border `3px solid #38454a` / Radius `24px`
**States observed:** Default | Focus: Not captured

#### Feature Card
**Role:** Content grouping
**Pages observed:** Homepage
**Spec:** Background `#fcb034` / Text `#222222` / Radius `24px` / Shadow `none`
**States observed:** Default

### Tier 3: Surface-specific
#### Hero Surface
**Role:** Section background
**Pages observed:** Homepage, About
**Spec:** Background `#e7ebff` / Padding `114px 0px 142.5px` / Radius `0px`
**States observed:** Default

#### Alert Surface
**Role:** High-visibility messaging
**Pages observed:** Homepage
**Spec:** Background `#ff455e` / Text `#212529` / Padding `14px` / Radius `0px`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | ~1200px (Container-fluid) |
| Grid | Bootstrap-based 12-column |
| Section Gap | 114px to 142px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked columns, font-size reduction for display (58px -> 42px) |
| Desktop | 1440px | Multi-column layouts (col-10, col-12) |

## Imagery & decoration
Firsthand uses organic, hand-drawn "scribble" motifs in neon yellow and red to point toward key information, contrasting with the rigid UI. Photography features high-quality, diverse professional portraits with clean backgrounds.

## Do's
- Use `#005dfe` for all primary interactive triggers.
- Apply `akzidGroCFFBolExFont` for any text larger than 32px.
- Use `24px` border radius for secondary "soft" UI patterns.
- Maintain a minimum section padding of `40px` to preserve whitespace.
- Pair monospace labels (`abcFavoriteMonoBoldFont`) with 0.8px letter spacing.

## Don'ts
- **Wrong:** Using `#fcb034` (Orange) for a primary CTA button. **Right:** Use `#005dfe`. **Reason:** Orange is a decorative surface color only.
- **Wrong:** Applying rounded corners to the main "Register" button. **Right:** Keep at `0px`. **Reason:** Primary utility buttons are sharp-edged.
- **Wrong:** Mixing `Open Sans` into primary display headlines. **Right:** Use `akzidGroCFFBolExFont`. **Reason:** Open Sans is reserved for secondary headings and body fallbacks.
- Do not use shadows on primary buttons; keep them flat.
- Do not exceed 700 weight for body copy.

## Similar brands
- LinkedIn (Professional networking, blue accents)
- Glassdoor (Career data, high-contrast typography)
- Medium (Editorial spacing, strong serif/sans pairing)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --firsthand-blue: #005dfe;
  --firsthand-black: #222222;
  --firsthand-gray: #212529;
  --firsthand-white: #ffffff;
  --font-display: "akzidGroCFFBolExFont", sans-serif;
  --font-body: "abcFavoriteRegularFont", sans-serif;
  --radius-pill: 24px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Firsthand's sharp 0px radius, #005dfe background, and 14px abcFavoriteRegularFont."
- "Create a section headline using Firsthand's akzidGroCFFBolExFont at 42px with a line height of 50.4px."
- "Design a feature card with a #fcb034 background and 24px border radius."

## Known gaps
- Hover and focus states for buttons were not fully captured in the rendered evidence.
- Mobile-specific navigation transitions were not analyzed.
- Semantic colors for "Success" and "Error" were present in tokens but not observed in UI components.

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