BRYTE LIGHT DESIGN SYSTEM V1.0

Modern. Tech. Trusted.

The single source of truth for Bryte Light 2.0 — colors, type, components, and the rules for using them. Light-first: white surfaces dominate, brand blue provides energy, deep navy grounds feature moments.

Color

Blue-600 is the primary action color. Ink-900 for headings, Ink-700 for body, Ink-500 for secondary text. Line-300 for hairlines. Never use the old yellow.

Blue 50 — #F3F6FF
Tinted section backgrounds, table headers
Blue 100 — #E7ECFE
Selected states, input focus halo
Blue 600 — #0446F5
Primary buttons, links, accents
Blue 700 — #0335C4
Hover states
Blue 800 — #022A9B
Active / pressed states
Ink 900 — #060A0E
Headings, primary text
Ink 700 — #222222
Body text
Ink 500 — #4D4D4D
Secondary / muted text
Line 300 — #DBDBDB
Borders, dividers, field outlines
Error — #B32218
Validation errors (tint #F9EBE9)
Success — #04794A
Success messages (tint #EAF5F0)
Warning — #9A6104
Warnings

Gradient

linear-gradient(115deg, #0446F5, #000313) — feature moments only. In Webflow use the utility classes: u-gradient-brand, u-gradient-deep, u-gradient-soft, u-gradient-glow, u-gradient-fade-white. For image slots use asset brytelight_gradient_background_blue.

u-gradient-brand — white text is automatic

Typography

Archivo for headings and UI. PT Sans for body (16px/1.6). IBM Plex Mono for labels and badges.

Heading One
Archivo 600 — 56px / 1.05 / -0.025em
Heading Two
Archivo 600 — 32px / 1.15 / -0.02em
Heading Three
Archivo 600 — 28px / 1.25 / -0.015em
Body text set in PT Sans — clear, workmanlike, readable at 16px with 1.6 line height. Links are Blue 600 and darken to Blue 700 on hover.
PT Sans 400 — 16px / 1.6
SECTION LABEL — IBM PLEX MONO
IBM Plex Mono 500 — 13px / caps / +0.02em

Buttons

4px radius, Archivo 600 15px, padding 12px 20px. Primary: Blue 600 fill, white text, Blue 700 hover, Blue 800 active. Secondary: white fill, Blue 600 text and border. Focus ring: 0 0 0 2px #FFF, 0 0 0 4px #0446F5.

Primary Button
Hover State
Secondary Button

Cards

8px radius, white surface, shadow 0 8px 24px rgba(6,10,14,0.10). Interior padding 40px. Blue Scheme 3 cards get white text automatically via tokens.

Light Card
Default surface for content on white or Blue 50 sections.
Scheme 3 Card
Brand blue surface for emphasis — text resolves white via the Text token.

Forms

Fields: 4px radius, #DBDBDB border, placeholder #8C8C93. Focus: Blue 600 border plus 0 0 0 3px #E7ECFE halo.

Input field (default)
Input field (focused)

Spacing Scale

Tokens: XSmall 0.5rem, Small 1rem, Medium 2rem, Large 3rem, XLarge 4.5rem, XXLarge 6rem. Utilities: u-margin-top/bottom-small…xlarge, u-padding-top/bottom-medium|large, u-section-padding (40px), u-section-padding-large (144px), u-section-padding-small (38px).

XSmall — 0.5rem
Small — 1rem
Medium — 2rem
Large — 3rem
XLarge — 4.5rem
XXLarge — 6rem

Usage Rules

1. White-dominant layouts; blue for energy, navy gradient for feature moments only. 2. Bind colors to the Color Scheme tokens — never hard-code. 3. Use scheme utility classes (u-color-scheme-1/2/3) to flip a section's palette. 4. Cards and images share the 8px radius token. 5. Labels and badges are always IBM Plex Mono caps. 6. Focus states are mandatory on interactive elements.