BrandBrand book

SENSIUM identity on a single page

Logos, color palette, typography, buttons and merch , everything that defines the SENSIUM brand.

SENSIUM hoodie merch mockup

SENSIUM merch · official hoodie

New01 · Logo

Logos

The S-mark (yin-yang) is the primary logo. The wordmark is used in the footer and in full signatures.

S-mark · light

S-mark · light

Primary · for dark surfaces

S-mark · dark

S-mark · dark

For light/cream surfaces

New02 · Colors

Brand palette

The primary orange #FF6207 (brand-500) is the signature color. Used for CTA, glow, and text highlights.

Brand orange

Brand 400
#FF852Fbrand-400light orange (gradient stop)
Brand 500PRIMARY
#FF6207brand-500PRIMARY · CTA, glow, badge
Brand 600
#E26B08brand-600medium · hover
Brand 700
#CE3000brand-700dark · gradient end
Brand 800
#9A2400brand-800deep

Surface · backgrounds

Bg
#0A0A0Abgprimary dark surface
Bg Elevated
#0F0F0Fbg-elevatedsecondary dark
Bg Subtle
#171717bg-subtlesubtle elevation
Bg Card
#262626bg-cardcard background

Ink · text

Ink
#FFFFFFinkprimary text
Ink Subtle
#D4D4D4ink-subtlesecondary
Ink Muted
#A1A1A1ink-mutedmuted
Ink Faint
#737373ink-faintfaintest

Accents

Olive
#465907olive
Olive Light
#7A8826olive-light
Gold
#FAAF01goldratings, accents
Cream Base
#F8F6F1cream-baselight surface
Cream Warm
#FFEAD2cream-warmwarm cream

EarthMeta gradient (for EMT visuals)

EM Blue
#006BB3em-blueEarthMeta brand blue
EM Teal
#3B8FA8em-tealtransition
EM Green
#ADD587em-greenEarthMeta brand green
New03 · Typography

Fonts

2 fonts · Switzer (display) for headings, Inter (sans) for body.

SwitzerDisplay · font-display

Headings, hero title, feature cards. Fontshare CDN.

Aa Šš Žž

Weights: 400, 500, 600, 700, 800, 900

InterBody · font-sans

Paragraphs, navbar, buttons, bullets. Google Fonts.

Aa Šš Žž

Weights: 400, 500, 600, 700, 800

New04 · Buttons

Button variants

4 variants · primary (orange), dark (Accretion duo-layer), ghost, outline.

Primary

variant="primary"

Dark · Accretion

variant="dark"

Ghost

variant="ghost"

Outline

variant="outline"

Primary CTA · gradient (as in the navbar)