# 100degrees Design System

> High-contrast monochrome foundation punctuated by deep crimson accents and sharp, geometric layouts.

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

## TL;DR
100degrees utilizes a high-contrast monochrome palette dominated by pure white (#ffffff) and deep charcoal (#222222), with absolute black (#000000) reserved for high-impact surfaces and overlays. The system is anchored by **Open Sans**, utilizing a wide range of weights from 300 to 700 to establish hierarchy without switching families. Visual interest is driven by a deep red accent (#b52028) used for secondary headings and brand-specific callouts. Layouts are characterized by sharp 0px corners on primary buttons and containers, occasionally softened by 7px or 50px radii in specific card patterns.

## Signature DNA
1. **Sharp Geometricity** (The system defaults to `{radii.sharp}` (0px) for primary buttons and main section containers, creating a professional, architectural feel.)
2. **Achromatic Depth** (The use of three distinct dark tones—#000000, #222222, and #3a3a3a—allows for complex layering and legibility on dark-mode sections without losing contrast.)
3. **Crimson Punctuation** (The specific use of #b52028 for sub-headers and active text elements provides a "boiling point" accent that cuts through the monochrome base.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, primary surface, button text | 62 | 1 | `--wp--preset--color--white` |
| `{colors.charcoal}` | `#222222` | Primary text, dark section backgrounds | 21 | 1 | `--wp--preset--color--contrast` |
| `{colors.black}` | `#000000` | Overlays, footer backgrounds, primary borders | 9 | 1 | `--wp--preset--color--black` |
| `{colors.ink}` | `#3a3a3a` | Default body text, secondary button text | 78 | 0.8 | Computed Style |
| `{colors.base}` | `#f1f1f1` | Subtle section backgrounds | 1 | 1 | `--wp--preset--color--base` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.crimson}` | `#b52028` | Sub-headings, brand accents, active states | 8 | 0.6 | Computed Style |
| `{colors.ocean}` | `#1e73be` | Hyperlinks, inline accents | 9 | 1 | `--accent` |
| `{colors.slate}` | `#69727d` | Muted text, card descriptions | 6 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 400, 500, 600, 700 | Display, Headings, Buttons | N/A (Google Font) | Apache 2.0 |
| -apple-system | 300, 400 | Body, Navigation | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 65px | 65px | normal | 600 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display-md}` | 40px | 40px | normal | 500 | Section Headlines | `h1.elementor-heading-title` |
| `{type.heading-md}` | 30px | 36px | normal | 300 | Secondary Headers | `h2` |
| `{type.subhead}` | 18px | 18px | normal | 700 | Crimson Sub-heads | `span.sub-head` |
| `{type.body-lg}` | 17px | 25.5px | normal | 400 | Primary Body | `header.elementor-713` |
| `{type.button}` | 16px | 28.8px | 0.5px | 500 | Primary CTA | `a.elementor-button` |
| `{type.body-sm}` | 14px | 16.8px | 0.5px | 500 | Card Buttons | `a.elementor-flip-box__button` |
| `{type.caption}` | 12px | 12px | normal | 400 | Social Icons/Legal | `a.elementor-social-icon` |

### Principles
1. **Tight Display Leading:** Large display type (65px) uses a 1:1 line-height ratio for a compact, impactful look.
2. **Weight Contrast:** Headlines jump from 300 (light) to 600 (semi-bold) to create immediate visual hierarchy.
3. **Functional Tracking:** Buttons and small-caps labels use 0.5px letter spacing to maintain legibility against dark backgrounds.

## Spacing
**Base unit:** 5px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 11 |
| `{space.md}` | 20px | 3 |
| `{space.lg}` | 35px | 3 |
| `{space.xl}` | 50px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Primary Buttons, Main Surfaces | `elementor-button`, `Surface` |
| `{radius.md}` | 7px | Feature Cards | `Card` component |
| `{radius.full}` | 50% | Icon Containers, Avatars | `Card` (circular variant) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.1) 5px -5px 60px 0px` | Floating Feature Cards | Observed on 3 elements |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Contact, Try Free)
**Pages observed:** https://100degrees.com
**Spec:** Background: transparent / Text: #ffffff / Border: 2px solid #ffffff / Radius: 0px / Padding: 10px 0px 0px / Typography: `{type.button}`
**States observed:** Default | Hover: Not captured

#### Surface (Dark)
**Role:** High-contrast content sections
**Pages observed:** https://100degrees.com
**Spec:** Background: #222222 / Text: #3a3a3a (fallback) / Radius: 0px / Padding: 0px
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Service highlights
**Pages observed:** https://100degrees.com
**Spec:** Background: transparent / Text: #3a3a3a / Radius: 7px / Shadow: `{shadow.deep}` / Typography: `{type.body-lg}`
**States observed:** Default

#### Flip Box Button
**Role:** Secondary card-based actions
**Pages observed:** https://100degrees.com
**Spec:** Background: transparent / Text: #ffffff / Border: 1px solid #ffffff / Radius: 0px / Typography: `{type.body-sm}`
**States observed:** Default

### Tier 3: Surface-specific

#### Overlay Panel
**Role:** Cookie consent and modal backgrounds
**Pages observed:** https://100degrees.com
**Spec:** Background: rgba(0, 0, 0, 0.82) / Text: #ffffff / Padding: 35px / Radius: 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px (inferred from standard Elementor) |
| Section Padding | 75px (vertical) |
| Column Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; display type scales to 40px. |
| Desktop | 1440px | Multi-column grid (3-up or 4-up) for client logos and services. |

## Do's
- Use `{colors.crimson}` (#b52028) strictly for sub-headers and small UI accents.
- Maintain `{radius.sharp}` (0px) for all primary navigation and CTA elements.
- Pair `{type.display-lg}` (65px) with `{colors.white}` on dark backgrounds for maximum impact.
- Use `{colors.ink}` (#3a3a3a) for long-form body text to reduce eye strain on white backgrounds.
- Apply `{shadow.deep}` only to interactive cards sitting on `{colors.base}` or `{colors.white}`.

## Don'ts
- **Wrong:** Using `#1e73be` (Ocean Blue) as a primary button background. **Right:** Use transparent with a white border or solid black. **Reason:** Blue is a legacy accent, not a primary brand driver.
- **Wrong:** Rounding button corners. **Right:** Keep them at 0px. **Reason:** Sharp corners are a core brand identifier.
- **Wrong:** Setting display headers in weights below 500. **Right:** Use 500 or 600. **Reason:** The brand relies on heavy typographic presence.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-white: #ffffff;
  --color-charcoal: #222222;
  --color-black: #000000;
  --color-crimson: #b52028;
  --color-ink: #3a3a3a;
  --font-main: 'Open Sans', sans-serif;
  --radius-sharp: 0px;
  --shadow-deep: 5px -5px 60px 0px rgba(0, 0, 0, 0.1);
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #000000;
  --color-accent: #b52028;
  --color-surface: #222222;
  --font-sans: 'Open Sans';
  --radius-none: 0px;
  --shadow-brand: 5px -5px 60px 0px rgba(0, 0, 0, 0.1);
}
```

## Known gaps
- Hover and Active states for primary buttons were not captured in the source.
- Mobile-specific spacing tokens were not explicitly declared in the CSS variables.
- Success and Error semantic colors were not observed on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://100degrees.com | 1440x900 | 2026-06-06 |
| Homepage (Mobile) | https://100degrees.com | 390x844 | 2026-06-06 |