Brand guidelines

Build the frame. Check the result.

A synthetic brand fixture for end-to-end pipeline testing.

Colour

Identity accent

Hue 153.0 in OKLCH. 0.0 degrees clear of the nearest sibling identity accent.

primary
#2BCC73
brand-accent-deep
#00AB21
brand-emphasis
#FF5300
destructive
#E9505F

Product surface

background
#000000
card
#111111
secondary
#0D0F12
border
#262626
muted-foreground
#9A9A9A
Light surfaces

The bright accent #2BCC73 measures 1.98:1 on the light reading surface and is never text there. The light block substitutes #037B40 at 5.05:1. The legal foreground on an accent fill is #000000 at 9.99: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 1000 × 1000 units, clear space 100 units (10.0 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