# Careerjsm Design System

> A corporate sky-blue canvas anchored by heavy Open Sans headlines and high-contrast primary action pills.

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

## TL;DR
Careerjsm utilizes a high-energy "Sky Blue" (`#29abe2`) as its primary brand signal, often paired with a warm amber (`#faad51`) for secondary emphasis. The system relies on a clean white foundation (`#ffffff`) with deep gray text (`#444444`) to maintain professional readability. Typography is dominated by **Open Sans**, used at significant weights (600-700) and large scales (46px) for display moments, while **Lato** provides a softer touch for body links. Componentry is characterized by extreme pill-shaped buttons (`9999px` radius) and soft-shadowed cards that float over the white canvas.

## Signature DNA
1. **The Sky-Blue Primary Pill** (A high-contrast `#1aa9e4` or `#29abe2` button with a `9999px` radius and white text, used as the definitive call-to-action across all pages).
2. **Heavy Display Type** (Open Sans at 46px with tight `-1.41px` letter spacing and weights of 600 or 700, creating a bold, authoritative header style).
3. **Floating Card Surfaces** (White containers using a specific `rgba(0, 0, 0, 0.133)` shadow with 2.4px vertical offset to create depth without borders).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, card surface, button text | 50 | 1.0 | Computed Style |
| `{color.ink}` | `#444444` | Primary body text | 137 | 0.8 | Computed Style |
| `{color.dark}` | `#222222` | Navigation links, secondary headings | 24 | 0.8 | Computed Style |
| `{color.muted}` | `#999999` | De-emphasized text, footer text | 59 | 0.8 | Computed Style |
| `{color.border}` | `#dddddd` | Input borders, subtle dividers | 2 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#29abe2` | Brand identity, primary text accents, icons | 34 | 0.8 | Computed Style |
| `{color.action}` | `#1aa9e4` | Primary button background | 7 | 0.6 | Computed Style |
| `{color.secondary}` | `#faad51` | Secondary buttons, feature highlights | 18 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 400, 500, 600, 700 | Display, Headings, UI | N/A | Google Fonts |
| Lato | 400 | Body links, secondary text | N/A | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-xl}` | 46px | 54.85px | -1.41px | 600/700 | Hero headlines | `h2`, `span` |
| `{text.display-lg}` | 40px | 40px | -1.4px | 400 | Brand wordmark | `a.x-brand` |
| `{text.heading-md}` | 37px | 40.21px | normal | 600 | Section headers | `h2.h-custom-headline` |
| `{text.heading-sm}` | 24px | 33.6px | normal | 700 | Feature titles | `strong`, `h5` |
| `{text.body-lg}` | 20px | 31.6px | normal | 400 | Lead paragraphs | `p` |
| `{text.body}` | 16px | 24px | normal | 400 | Standard body | `header.masthead` |
| `{text.body-sm}` | 13px | 12.5px | 1.06px | 400/600 | Metadata, links | `a`, `li` |
| `{text.caption}` | 10px | 13px | 2px | 400 | Footer links, dates | `a`, `span` |

### Principles
1. **Tight Display Tracking:** Headlines above 40px use negative letter spacing (~ -1.4px) to maintain visual density.
2. **Weight-Based Hierarchy:** Primary importance is signaled by a jump from 400 to 700 weight rather than just size.
3. **Link Differentiation:** Body links often transition to Lato 400 to separate interactive text from static Open Sans prose.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 6 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 10 |
| `{space.lg}` | 20px | 34 |
| `{space.xl}` | 30px | 9 |
| `{space.section}` | 60px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default surfaces, main containers | 328 occurrences |
| `{radius.sm}` | 4px | Form inputs, pricing cards | Pricing page |
| `{radius.pill}` | 9999px | Primary and secondary CTA buttons | Homepage buttons |
| `{radius.circle}` | 80px | Large decorative icon containers | Homepage feature icons |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.133) 0px 2.4px 5.6px 0px` | Feature cards, pricing tiers | pricing, about pages |
| `{shadow.button}` | `rgba(0, 0, 0, 0.2) 0px 3.2px 8px 0px` | Primary action buttons | homepage |
| `{shadow.input}` | `rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset` | Text fields | pricing page |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary CTAs
**Pages observed:** https://careerjsm.com
**Spec:** Background: `{color.action}` (#1aa9e4) / Text: `{color.white}` (#ffffff) / Radius: `80px` (or `9999px`) / Padding: `9px 18px` / Shadow: `{shadow.button}`
**States observed:** Default: Captured | Hover: Not captured

#### Text Input
**Role:** Search and form entry
**Pages observed:** https://careerjsm.com/pricing
**Spec:** Background: `#ffffff` / Text: `#555555` / Border: `1px solid #dddddd` / Radius: `4px` / Shadow: `{shadow.input}` (inset)
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns
#### Card
**Role:** Content grouping for pricing and features
**Pages observed:** https://careerjsm.com/pricing, https://careerjsm.com/about
**Spec:** Background: `#ffffff` / Text: `#444444` / Radius: `4px` / Padding: `60px` / Shadow: `{shadow.card}`
**States observed:** Default: Captured

#### Footer
**Role:** Global site navigation and copyright
**Pages observed:** All
**Spec:** Background: `#ffffff` / Text: `{color.muted}` (#7a7a7a) / Padding: `10px 0px` / Font Size: `10px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Surface (Floating)
**Role:** Generic content section with depth
**Pages observed:** All
**Spec:** Background: `#ffffff` / Text: `#444444` / Radius: `0px` / Shadow: `{shadow.card}`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (estimated) |
| Section Padding | 60px - 86px |
| Grid | 3-column feature grids |

## Do's
- Use **Open Sans 700** for all major section headlines.
- Apply **negative letter spacing** (-1.4px) to display text over 40px.
- Ensure primary buttons use the **pill shape** (9999px radius).
- Use white surfaces with **soft shadows** (`rgba(0,0,0,0.133)`) instead of borders for cards.
- Maintain a **60px padding** for internal card content.

## Don'ts
- Do not use `#29abe2` for primary body text; reserve it for accents and headers.
- Avoid sharp corners on CTA buttons; always use the pill radius.
- Do not use pure black (#000000) for body text; use `{color.ink}` (#444444).
- Do not mix font families within a single headline.

## Similar brands
- Zendesk (Clean, blue-centric, rounded UI)
- LinkedIn (Professional, blue accents, heavy reliance on white surfaces)
- Salesforce (Corporate blue, high-contrast action buttons)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #29abe2;
  --color-action: #1aa9e4;
  --color-secondary: #faad51;
  --color-ink: #444444;
  --color-white: #ffffff;
  --font-display: 'Open Sans', sans-serif;
  --font-body: 'Lato', sans-serif;
  --shadow-card: 0px 2.4px 5.6px 0px rgba(0, 0, 0, 0.133);
  --radius-pill: 9999px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific breakpoint values were not declared in the CSS variables.
- Success and Error semantic colors were not present in the analyzed pages.

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