Design system
Brand
on-dark · ground #171216
on-light · paper #FFFFFF
in motion · the treads land bottom first, one tread-pitch each, 110ms apart · loop for a loading state, once for an entrance
loop · once
loop · once
clear space · 1/6 of the mark's height on every side
| Minimum | Screen | |
|---|---|---|
| Mark alone | 20px | 6mm |
| Lockup | 24px | 8mm |
#FFB162 @ 0%#E88C69 @ 22%#A4237F @ 60%#5B054F @ 100%| markOnDark | /brand/mark-on-dark.svg |
| markOnLight | /brand/mark-on-light.svg |
| wordmarkOnDark | /brand/wordmark-on-dark.svg |
| wordmarkOnLight | /brand/wordmark-on-light.svg |
| logo512 | /brand/logo-512.png |
| logo192 | /brand/logo-192.png |
| markEmail | /brand/mark-email.png |
| lockupOnDark2x | /brand/lockup-on-dark@2x.png |
| lockupOnLight2x | /brand/lockup-on-light@2x.png |
| favicon16 | /brand/favicon-16.png |
| favicon32 | /brand/favicon-32.png |
| pattern | /brand/patterns/stone-course.svg |
| pattern | /brand/patterns/sunlit-course.svg |
| pattern | /brand/patterns/dry-joint.svg |
| pattern | /brand/patterns/tracery.svg |
| pattern | /brand/patterns/scalework.svg |
| pattern | /brand/patterns/arcade.svg |
| pattern | /brand/patterns/rib-line.svg |
Rules
- Which variant:
mark-on-dark/wordmark-on-darkhave white treads and a white wordmark, and sit on the purple (plum.9) or any dark surface.-on-lighthas#0F1113treads and a#121212wordmark, and sits on the white page or any light surface. The sidebar is purple in both modes, so it always takes the on-dark pair. Never place an on-dark mark on a light surface, or the reverse. - Lockup:
heightis the wordmark box. The mark spans from the top of the t (BRAND.lockupMarkTop, 7.7% down the box) to the baseline (BRAND.lockupBaseline, 78.1%), then sitsBRAND.lockupMarkDrop(3.3%, a pixel at nav size) lower, so the p's descender hangs below the mark: a 21.1px mark beside a 30px wordmark in the nav. Gap 2.5 units. - Clear space: the fraction above comes from
BRAND.markintokens/brand.json, and the dashed frame shows it at 48px. Nothing enters that zone: no text, no rule, no edge of a frame. - Minimum sizes: also from
BRAND.mark. Below the lockup minimum,BrandLockupdrops the wordmark and renders the mark alone, carrying the accessible name with it. Favicons at 16px are the one exception and ship only through the generatedicon.tsxroutes. - Misuse: never generate, redraw, recolour, stretch, mirror or glow the mark. The marks are designer-made; a missing rendition is a request to the designer, not a prompt to a model.
- Files: the table above, including the kit's 1200px lockups for email headers, its two favicons, and the seven pattern swatches under
patterns/(Patterns). Apps receive copies viapnpm --filter @tempio/ui sync:brand; email clients getmark-email.pngor a lockup PNG (no SVG).
The kit gives no clear space or minimum sizes, so both are read off the mark's own geometry. Softriver's numbers land in the same keys, and this page follows.