# Everyware Design System

> High-contrast utility anchored by a vibrant safety-yellow signal and geometric Apertura typography.

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

## TL;DR
Everyware utilizes a high-voltage monochrome foundation punctuated by a signature "Everyware Yellow" (`#fdb813`). The system relies on a stark white canvas (`#ffffff`) and deep charcoal text (`#212529`) to maintain a professional, fintech-adjacent utility. Brand authority is established through the **Apertura** font family, used in bold weights for display and medium weights for interactive elements. Components feature a mix of sharp 0px corners for structural sections and ultra-rounded "pill" geometry (`800px` or `999px`) for primary calls to action. The interface maintains a generous 16px base spacing unit, ensuring high legibility across dense pricing tables and feature grids.

## Signature DNA
1. **The Warning Signal Palette** (The aggressive use of `#fdb813` and `#ffc107` against `#000000` creates an immediate "action-oriented" environment, seen on the Homepage and Pricing pages).
2. **Pill-to-Sharp Contrast** (Primary buttons use an extreme `800px` radius while layout containers and section blocks remain strictly `0px` sharp, creating a clear distinction between content and action).
3. **Apertura Display** (The use of Apertura at 40px/45px with heavy weights defines the brand's geometric, modern-industrial voice).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surface | 79 | 1.0 | `--bs-body-bg` |
| `{color.ink}` | `#212529` | Primary body text | 210 | 1.0 | `--bs-body-color` |
| `{color.ink.deep}` | `#000000` | Headings, button text, borders | 134 | 0.8 | Computed Style |
| `{color.neutral.soft}` | `#f2f1f1` | "Coming Soon" section backgrounds | 2 | 1.0 | Brand Page |
| `{color.neutral.muted}` | `#6c757d` | De-emphasized secondary text | 5 | 1.0 | `--bs-secondary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#fdb813` | Primary CTA bg, active borders | 20 | 0.8 | Computed Style |
| `{color.primary.alt}` | `#ffc107` | Secondary CTA bg, warning states | 3 | 1.0 | `--bs-yellow` |
| `{color.accent.brown}` | `#78350e` | High-contrast text on yellow | 3 | 0.6 | Computed Style |
| `{color.decorative.blue}` | `#0d6efd` | Decorative only | 1 | 1.0 | `--bs-primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| **Apertura** | 400, 500, 700 | Heading, Display, UI | Montserrat | Licensed |
| **Segoe UI** | 400, 500, 700 | System Fallback / UI | N/A | System |
| **Arial** | 400 | Body Fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 45px | 45px | normal | 400 | Hero Display | `div.head` |
| `{type.display.md}` | 40px | 48px | normal | 700 | Page Titles | `h1.fw-bolder` |
| `{type.heading.md}` | 28px | 33.6px | normal | 500 | Section Heads | `h3.p-4.m-0` |
| `{type.heading.sm}` | 24px | 36px | normal | 700 | Sub-section Heads | `b` |
| `{type.body.lg}` | 18px | 25.2px | normal | 500 | Accordion / Big Links | `div.accordion-top` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body / Cards | `div.card.h-100` |
| `{type.body.strong}` | 16px | 24px | normal | 700 | Bold Emphasis | `b` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Captions / Small | `small` |

### Principles
- **Geometric Headers:** All major headings use Apertura with tight or matching line-heights for a compact, impactful look.
- **Interactive Weight:** Buttons and navigation items consistently use weight 500 or 700 to distinguish from weight 400 body prose.
- **High Contrast Labels:** Text on yellow backgrounds often shifts to `#000000` or `#78350e` to ensure legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 78 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 102 |
| `{space.lg}` | 24px | 18 |
| `{space.xl}` | 48px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, main cards | Pricing surfaces |
| `{radius.sm}` | 4px | Pricing cards, feature icons | Feature cards |
| `{radius.md}` | 12px | Specialized UI panels | Observed on Pricing |
| `{radius.pill}` | 800px | Primary CTA Buttons | `a.get-started` |
| `{radius.full}` | 999px | Secondary UI Pills | Pricing badges |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Standard cards and sections | Homepage cards |
| `{shadow.raised}` | `rgba(0, 0, 0, 0.11) 0px 24px 45px 0px` | Elevated feature sections | Homepage |

## Components

### Tier 1: Foundational
#### Primary Button
**Role:** Main site conversion (Activate, Get Started)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.primary}` (#fdb813) | Text: `{color.ink.deep}` (#000000) | Radius: `{radius.pill}` (800px) | Padding: 8px 16px | Type: `{type.body.md}` (16px/700)
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Alternative actions (Select Plan)
**Pages observed:** Pricing
**Spec:** Background: `{color.primary.alt}` (#ffc107) | Text: `{color.ink}` (#212529) | Radius: `{radius.pill}` (800px) | Padding: 6px 12px | Type: `{type.body.md}` (16px/400)
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product benefits or industry solutions
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.canvas}` (#ffffff) | Border: 1px `rgba(0, 0, 0, 0.125)` | Radius: `{radius.sm}` (4px) | Padding: `{space.md}` (16px)
**States observed:** Default: Captured

#### Solution Accordion
**Role:** Industry-specific vertical navigation
**Pages observed:** Homepage
**Spec:** Background: `{color.primary}` (#fdb813) | Text: `{color.ink.deep}` (#000000) | Border: 1px `#000000` (bottom only) | Radius: `{radius.none}` (0px)
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Pricing Tier Card
**Role:** Plan comparison
**Pages observed:** Pricing
**Spec:** Background: `{color.canvas}` (#ffffff) | Border: 1px `rgba(0, 0, 0, 0.125)` | Radius: `{radius.md}` (12px) | Shadow: none
**States observed:** Default: Captured

#### Comparison Table Row
**Role:** Detailed feature breakdown
**Pages observed:** Pricing
**Spec:** Background: `{color.canvas}` (#ffffff) | Text: `{color.ink}` (#212529) | Border-bottom: 1px `#e6e7eb` | Padding: 12px 16px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Grid Gutter | 24px |
| Section Padding | 60px - 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Hero text aligns center; Buttons become full-width. |
| Desktop | 1440px | Horizontal navigation; Multi-column pricing tiers (3-up). |

## Do's
- Use `#fdb813` for the highest priority action on any page.
- Apply `800px` border-radius to all interactive buttons.
- Keep section containers at `0px` radius to maintain structural rigidity.
- Use Apertura weight 700 for all primary headings.
- Ensure text on yellow backgrounds uses `#000000` for WCAG compliance where possible.

## Don'ts
- **Wrong:** Using `#0d6efd` (Blue) for a primary CTA. **Right:** Use `#fdb813`. **Reason:** Blue is decorative/secondary in the Everyware parent brand.
- **Wrong:** Applying rounded corners to main layout sections. **Right:** Use sharp `0px` corners. **Reason:** The brand identity relies on the contrast between sharp containers and pill buttons.
- **Wrong:** Using weight 400 for button labels. **Right:** Use weight 500 or 700.

## Similar brands
- Caterpillar (CAT)
- DeWalt
- Wise (formerly TransferWise)
- Stripe (Utility/Fintech aspects)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #fdb813;
  --color-primary-alt: #ffc107;
  --color-ink: #212529;
  --color-ink-deep: #000000;
  --color-canvas: #ffffff;
  --font-heading: "apertura", sans-serif;
  --radius-pill: 800px;
  --space-base: 16px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Everyware Yellow #fdb813, black text #000000, and an 800px border radius."
- "Create a feature card with a 1px #e6e7eb border, 4px corner radius, and Apertura weight 700 for the title."
- "Design a hero section with a white background, #212529 body text, and a large 45px Apertura heading."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Exact mobile breakpoint pixel values (e.g., 768px vs 992px) were not in the provided CSS tokens.

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