Brand guidelines

View your files.

Text, source code, images, PDFs, and office documents.

Colour

Identity accent

Hue 96.2 in OKLCH. 56.8 degrees clear of the nearest sibling identity accent.

primary
#FFD900
brand-accent-deep
#CBAD00
brand-emphasis
#FF5300
destructive
#E9505F

Product surface

background
#0B0C0D
card
#121416
secondary
#151719
border
#262626
muted-foreground
#9A9A9A
Light surfaces

The bright accent #FFD900 measures 1.3:1 on the light reading surface and is never text there. The light block substitutes #867100 at 4.51:1. The legal foreground on an accent fill is #000000 at 15.18:1.

Colour

Chart colors

Chart colors serve data visualization. Brand applications use the identity accent and the neutral surfaces. Each chart color is derived from the accent, clears 4.5:1 on its surface, and remains separate from warning and failure states.

Type and components

Space Grotesk, Geist, Geist Mono

Display
Heading

Body in Geist at 400. Geist ships 400 and 500 only; asking for 700 makes the renderer synthesise a faux bold.

0O 1lI 8B 5S 2Z
Components
ok warn fail
tokenvalue
radius6 / 8 / 12 / 16
spacing4 8 12 16 24 32 48 64
focus2px ring, 2px offset
Logo

Mark and lockup

Canvas 800 × 1000 units, clear space 70 units (9.7 percent of artwork width). Below 32 px the reduced master takes over.

Fixed lockup proportions

lockupmark heightgapalignment
horizontal160 units34 unitsoptical center
stacked1.80C0.45Ccentered on wordmark ink width

The horizontal row records its approved master composition. C is the outlined wordmark cap height used by the stacked lockup. X is the 70-unit G channel. Keep one X clear around every master. Never resize the mark and wordmark independently.

A ShruggieTech project