BrandMark

SVG logo primitive for app chrome, catalog identity and package-safe 12PM lockup use.

Component

SVG logo primitive for 12PM identity surfaces, exported from @12pm/design with tokenized size, color and accessible labeling.

Accepted baseline

SVG primitive

Wordmark

Horizontal

Clock

Lockup

Usage variants

WordmarkStacked

Readable stacked 12 / PM. mark for tighter product chrome and narrow spaces.

HorizontalWebsite header

Owner-provided horizontal 12PM. artwork for wider headers and brand-led navigation.

ClockSecondary mark

Use as a compact support mark where the 12PM name is already present.

LockupGood Food. Good Focus.

Use with tagline and optional clock support on identity-first surfaces.

Accessibilityrole=img

Provide an aria-label for the SVG and do not add duplicate hidden text around it.

tokens.css

Clear space1.5rem--12pm-comp-brand-mark-clear-space

Compact height3.25rem--12pm-comp-brand-mark-height-compact

Lockup height7.4rem--12pm-comp-brand-mark-height-lockup

Stacked minimum3.25rem--12pm-comp-brand-mark-min-height-stacked

Horizontal minimum8rem--12pm-comp-brand-mark-min-width-horizontal

Clock minimum1.75rem--12pm-comp-brand-mark-min-size-clock

Brand red#E94B35--12pm-sys-color-brand-red

Sun dot#F5C85B--12pm-sys-color-brand-sun