Primary logo / stacked
Stacked 12 PM.
Use when the space is square, narrow or identity-led.
Best for app sidebar, avatar-like placements and brand cards.--12pm-comp-brand-mark-min-height-stackedLogo usage
How to use the stacked primary logo, horizontal primary logo, secondary clock mark and tagline lockup consistently across 12PM surfaces.
Identity usage guide
Logo family
12PM currently has two primary logo forms: stacked and horizontal. The clock is the secondary mark, used only when the brand name is already clear.
Primary logo / horizontal
Horizontal 12PM.
Use when the layout has room to read the name in one line.
Best for website headers, partner decks and wide navigation.--12pm-comp-brand-mark-min-width-horizontalSecondary mark
Clock icon
Use only after the 12PM name is already visible nearby.
Best for favicon-style cues, small empty states and supportive badges.--12pm-comp-brand-mark-min-size-clockBrand lockup
Logo + tagline
Use when the page is introducing the brand, not just navigating.
Best for landing hero, brand overview and presentation opening slides.--12pm-comp-brand-mark-height-lockupColor modes
Full-color and reversed white
White logo artwork is accepted as a reversed color mode for contrast-heavy contexts, not as a separate third primary logo.
Default full-color
Red + Sun
Use on Cream, white and quiet neutral surfaces. This is the preferred brand-recognition mode.
colorMode="full-color"Reversed white
Single-color white
Use on Brand Red, Ink or dark photography when the full-color logo loses contrast or production needs one-color artwork.
colorMode="reversed"Implementation contract
Use the shared BrandMark primitive
Consumer apps should select a variant from @12pm/design instead of keeping local logo copies, local colors or local sizing rules.
Usage rules
CanonicalPull logo art through BrandMark. Do not copy the SVG into consumer repos unless a platform specifically requires a static exported asset.
Keep the primary mark in Brand Red with the Sun dot. Use tokens, not local hex values, so updates stay centralized.
Prefer Cream, white or quiet neutral surfaces. Avoid red, yellow, patterned or low-contrast backgrounds behind the full-color mark.
Use one primary logo per composition. The clock mark can support wayfinding only when the full 12PM name is already present.
Frontend examples
Reactimport { BrandMark } from "@12pm/design";
<BrandMark variant="horizontal" showTagline={false} aria-label="12PM" />
<BrandMark variant="wordmark" showTagline={false} aria-label="12PM" />
<BrandMark variant="clock" aria-label="12PM clock mark" />
<BrandMark variant="horizontal" colorMode="reversed" aria-label="12PM" />Spacing and size
Clear space and minimum size
Keep the mark calm and recognizable by protecting space around it and using the tokenized sizes before inventing local dimensions.
Sun-dot clear space
The protected area should be at least the diameter of the Sun dot on every side. More space is encouraged for hero and packaging moments.
Stacked primary≥ 3.25rem
Default compact/product size should not go below the BrandMark compact token. --12pm-comp-brand-mark-min-height-stacked
Horizontal primary≥ 8rem
Keep the full 12PM. name readable in headers and deck covers. --12pm-comp-brand-mark-min-width-horizontal
Clock mark≥ 1.75rem
Below this size the fork/clock detail gets decorative rather than communicative. --12pm-comp-brand-mark-min-size-clock
Tagline lockuplarge 7.4rem
Use only when the tagline remains legible; otherwise switch to primary logo without tagline. --12pm-comp-brand-mark-height-lockup
Guardrails
Do / Don't
These rules keep the new red, cream and sun identity consistent across website, order, partner and admin surfaces.
Let the logo sit naturally on Cream or white surfaces; the SVG should not ship with a white rectangle.
Leave breathing room equal to at least the Sun dot around the mark before placing text, borders or icons.
Scale proportionally only. Do not force the stacked logo into a horizontal slot or vice versa.
The logo is custom artwork. Do not recreate it with Mitr, Prompt, SF Pro or any system typeface.