Beyond-Sleep

Design System

Color, typography, logos, and iconography in one reference. Covers primitive and semantic tokens, tint and shade ramps, accessibility guidance, and a curated icon set for every surface context.

Core brand colors

The foundation: use these most often

Five anchors derived from the brand palette. Electric Blue drives primary actions; Aqua provides high-energy highlights; Grit and Charcoal build the dark structural layer.

Blue Gradient
Primary
#3A6CF4 → #00CFFF
RGB 58,108,244 → 0,207,255
Hero sections, CTA buttons, primary interactive elements
Electric Blue
Primary Solid
#3A6CF4
RGB 58, 108, 244
Buttons, active states, brand accents, links
Aqua
Secondary
#00CFFF
RGB 0, 207, 255
Highlights, hover glows, data callouts, accent text
Deep Navy
Structure
#1E2259
RGB 30, 34, 89
Card backgrounds, section layers, structural depth
Grit
Dark Base
#0E1030
RGB 14, 16, 48
Page canvas, app backgrounds, full-bleed dark sections
Extended ramps

Ten-step scales, 50 → 900

Each hue anchored at step 500, interpolated toward white for tints and black for shades. These are the only places raw hex values live.

Electric BluePrimary brandbase 500 · #3A6CF4
50#EBF0FE
100#D6E1FD
200#ADC3FB
300#7FA0F8
400#5A86F6
500#3A6CF4
600#2E56C9
700#23419E
800#172B72
900#0C1647
AquaSecondary brandbase 500 · #00CFFF
50#E0F9FF
100#C0F4FF
200#80E8FF
300#40DCFF
400#20D6FF
500#00CFFF
600#00A8D1
700#0082A4
800#005C76
900#003649
Dark NeutralStructural scaledark system scale · backgrounds and surfaces
50#E8EAEF
100#C0C4D0
200#8A90A8
300#5A607A
400#3A3F5C
500#22253A
600#1B1E30
700#141728
800#0E1020
900#0B0D1A
Semantic tokens

Role-based aliases: build against these

Each token references a primitive step. Re-theming means editing a reference, never a component.

Backgrounds
background.canvas
dark.900 · #0B0D1A
background.sunken
dark.800 · #0E1020
background.surface
dark.700+ · #12152A
background.raised
dark.600 · #1B1E30
background.brand
blue.500 · #3A6CF4
background.brand-deep
navy · #1E2259
Text
text.primary
dark.50 · #E8EAEF
text.secondary
dark.200 · #8A90A8
text.muted
dark.300 · #5A607A
text.brand
blue.500 · #3A6CF4
text.accent
aqua.500 · #00CFFF
text.on-brand
dark.900 · #0B0D1A
Action
action.primary.default
blue.500 · #3A6CF4
action.primary.hover
blue.400 · #5A86F6
action.primary.active
blue.600 · #2E56C9
action.secondary.border
aqua.500 · #00CFFF
action.gradient
blue.500 → aqua.500
feedback.error
red.500 · #F04444
Accessibility

WCAG 2.1 contrast rules

Key pairings on the primary dark backgrounds. Electric Blue and Aqua are largely fill-only on Grit; use their step-700 variants for readable text.

Blue as text
#3A6CF4 on Grit (#0E1030) yields ~5.2:1 — AA passes. Use blue.400 #5A86F6 for body text. Never on mid-gray backgrounds.
Aqua as text
#00CFFF on Grit yields ~7.4:1 — AAA on dark. On white it fails at 1.8:1 — never use aqua text on light surfaces.
Amber alerts
#F5A840 passes on dark (6.8:1) but fails on white (2.7:1). Use amber.700 #A36C18 for text on light surfaces.
Safe body text
dark.50 (#E8EAEF) on all dark surfaces clears AAA. Default to #E8EAEF for all body copy on the dark canvas.
Identity

Logo & Mark

The Beyond-Sleep wordmark pairs a geometric letterform with the planet orbital icon. The blue dot is the brand's defining mark. Never stretch, recolor, or separate the wordmark from its orbital.

Beyond-Sleep primary logo, dark
Primary
Black wordmark on white or light backgrounds. Default for print and light digital contexts.
Beyond-Sleep logo, white reversed
Reversed
White wordmark for dark and photography backgrounds. Do not use on light surfaces.
Beyond-Sleep logo on navy
On Brand Navy
White version on Deep Navy — primary placement for hero sections and app headers.
Beyond-Sleep wordmark with blue planet
Blue Accent Wordmark
Variant with the blue planet dot prominent. Preferred for light-background digital placements.
Beyond-Sleep wordmark, black
Monochrome
Single-color black for embossing, stamps, and monochrome print. Light backgrounds only.
Beyond-Sleep planet icon mark
Icon Mark
Standalone planet orbital for app icons, favicons, and social avatars.
Typography

Type System

Two typefaces for two roles. Montserrat for all display, headlines, and brand copy. DM Sans for body text, UI labels, buttons, and captions.

Display / Headings
Montserrat
MontserratGoogle Fonts · weights 300–800
Page titles, section headings, hero display, marketing copy, navigation labels. Use weight 800 for display; 700 for H1; 600 for H2–H3.
H1Sleep Beyond Limits.
H2The Sleep Universe Platform.
H3Intelligent. Connected. Open.
LabelBrand Identity
UI / Body
DM Sans
DM SansGoogle Fonts · weights 400–700
Body copy, navigation, buttons, form labels, captions, and data content. Pairs with Montserrat for clean geometric contrast throughout the UI.
BodyThe Beyond-Sleep platform unifies hardware, software, and sleep science into a single open ecosystem for sleep optimization.
ButtonConnect Device →
CaptionClinically validated · Patent pending · Phase I complete
Iconography

Phosphor Icons

Single curated set covering all surfaces. Use Regular for UI; Fill for emphasis; Duotone in Electric Blue + Aqua for premium brand moments on dark backgrounds.

Phosphor Icons
MIT License9,000+ Icons6 Weights
@phosphor-icons/web  ·  @phosphor-icons/react  ·  phosphoricons.com
Brand touchpoints, marketing pages, product landing, hero sections, app UI. Do not mix with other icon libraries on the same surface.
Regular
Fill
Duotone
Also: Thin · Light · Bold
Sleep & Wellness
moon
sun
heartbeat
brain
activity
wave-sine
clock
shield-check
Tech & Platform
bluetooth
wifi
mobile
chart-line
database
cloud
lock
plug