Design system

Brand

The colour, type, and shape tokens Rafael Angarita ships, and what each one is safe to carry.

The accent is derived

The brand colour and the accent the site renders are not the same value. The accent is the brand colour darkened until it can safely carry text, which is why the two swatches below differ. Anything at or above 4.5:1 clears AA for body text.

Brand source (--orange-red)

#FF6123

--orange-red

#FF6123

white on it: 3.01:1 low
ink on it: 5.75:1 AA

Rendered accent, light mode

#C24001

--primary / --accent

on #FFF7ED: 4.91:1 AA

floor for this direction: 4.9:1

Rendered accent, dark mode

#9C3100

--primary / --accent

on #FFF7ED: 6.93:1 AA

floor for this direction: 6.9:1

Palette

Every token in the theme, with contrast measured both ways. A colour with no passing ink is a surface or a chart hue, not somewhere to put a label.

Core Brand

#FF6123

--orange-red

#FF6123

white on it: 3.01:1 low
ink on it: 5.75:1 AA

#FF986F

--orange-red-cream

#FF986F

white on it: 2.11:1 low
ink on it: 8.20:1 AA

#BA3513

--orange-red-dark

#BA3513

white on it: 5.82:1 AA
ink on it: 2.97:1 low

--orange-red-v3

#DB541F

white on it: 3.96:1 low
ink on it: 4.36:1 low

Neutrals

#191B1D

--dark-grey

#191B1D

white on it: 17.27:1 AA
ink on it: 1.00:1 low

#2E3236

--dark-grey-v2

#2E3236

white on it: 12.92:1 AA
ink on it: 1.34:1 low

#86919C

--dark-grey-v3

#86919C

white on it: 3.21:1 low
ink on it: 5.38:1 AA

#D9D9D9

--light-grey

#D9D9D9

white on it: 1.41:1 low
ink on it: 12.24:1 AA

#AEAEAE

--light-grey-v2

#AEAEAE

white on it: 2.22:1 low
ink on it: 7.78:1 AA

#EEEEEE

--light-grey-v3

#EEEEEE

white on it: 1.16:1 low
ink on it: 14.89:1 AA

Content Pillars

#FF6123

--pillar-real-estate

#FF6123

white on it: 3.01:1 low
ink on it: 5.75:1 AA

#24DAFF

--pillar-systems

#24DAFF

white on it: 1.67:1 low
ink on it: 10.32:1 AA

#3DFF71

--pillar-ai

#3DFF71

white on it: 1.33:1 low
ink on it: 12.95:1 AA

#701FDB

--pillar-brand

#701FDB

white on it: 7.22:1 AA
ink on it: 2.39:1 low

Extended Palette

#24DAFF

--light-blue

#24DAFF

white on it: 1.67:1 low
ink on it: 10.32:1 AA

#24FFDA

--aqua

#24FFDA

white on it: 1.28:1 low
ink on it: 13.48:1 AA

#F4B400

--yellow

#F4B400

white on it: 1.85:1 low
ink on it: 9.36:1 AA

#243AFF

--electric-blue

#243AFF

white on it: 6.72:1 AA
ink on it: 2.57:1 low

#3DFF71

--active-green

#3DFF71

white on it: 1.33:1 low
ink on it: 12.95:1 AA

#FF2456

--fuxia

#FF2456

white on it: 3.72:1 low
ink on it: 4.64:1 AA

#701FDB

--purple

#701FDB

white on it: 7.22:1 AA
ink on it: 2.39:1 low

1 colour carries no ink at AA: --orange-red-v3. Use these as surfaces or accents, never behind body text.

Type and shape

Direction: Operator Bold.

Heading face: Anton
Body face: DM Sans
Heading casing: uppercase
Heading tracking: normal
Heading weight: 400
Base radius: 0.875rem

shadow-sm

shadow-md