SVG trial
logo.png
A white C (#fafafa) on a square of primary blue (#1f42d0).
Brand
Crisper.io Brand Guidelines
Logo, mark and color files for press and partners.
Here for Crisper itself? See how it gets Lead and Purchase counting again after a Meta restriction.Crisper.io
#171717 on #fafafa
Crisper.io
#ededed on #000000
Crisper.io
The name is “Crisper.io”. Capital C, then “risper.io”. One word with a dot. Not “Crisper app”, not “CRISPER”, not “CrisperIO”.
Give the mark room.
Big or small, never cramped, never on a busy photo.
Do not recolor, stretch, rotate, add a shadow, or put the mark in a new container.
Do not use the mark to imply Crisper.io endorses another product.
The files are proprietary. Do not alter them or combine them with other marks without written consent. Contact marketing@crisper.io with questions.
Geist across the website.
Website headings, body copy, product UI, snippets, IDs, and event names use Geist. Use size and weight to create hierarchy.
Aa
Geist
Marketing headings use weight 700 and the shared global heading scale.
Aa
Geist
UI, body, and product. Weights 400–600. Tight tracking on headings.
Aa
Geist
Code, IDs, and event names. Weights 400–600.
Headings follow the shared H1–H6 scale. Body 16px. Caption 12px. All in Geist.
One palette. Two modes.
Primary stays #1f42d0. Surfaces, accent, charts, and status shift with the mode. Do not add a second palette. Do not use #7275f3.
#1f42d0
Primary
Logo tile, primary actions, and the focus ring. The same blue in light and dark.
#dbe4ff
Accent
Light accent wash, and the pale end of the chart ramp.
#0d1633
Deep navy
Text on the accent wash. Darkest chart step on a light page.
#8caaff
Light cobalt
Mid chart step. Warning on a dark page. Not body text.
#26449d
Muted navy
Chart step, and warning on a light page. Not body text.
#fafafa
On primary
The mark, and text on the primary square.
#0d1633#1f42d0#8caaff#dbe4ff
Light and dark.
Success, warning, and danger are status colors. Warning uses muted navy on light pages and light cobalt on dark pages. The chart ramp reverses in dark mode. Step 3 stays primary.
Light
Primary #1f42d0
Text #171717 on page #fafafa. Cards are #ffffff.
Card
#ffffff · border #e4e4e4
Muted
#525252 on #f5f5f5
Secondary
#ebebeb · text #222222
Accent
#dbe4ff · text #0d1633
Success
#16a34aon #fafafa
Warning
#26449don #fafafa
Danger
#e54b4fon #fafafa
Chart ramp
#dbe4ff#8caaff#1f42d0#26449d#0d1633
Dark
Primary #1f42d0
Text #ededed on page #000000. Cards are #0a0a0a.
Card
#0a0a0a · border #242424
Muted
#a4a4a4 on #1d1d1d
Secondary
#222222 · text #ebebeb
Accent
#333333 · text #dbe4ff
Success
#4ade80on #052e16
Warning
#8caaffon #0d1633
Danger
#ff5b5bon #fafafa
Chart ramp
#0d1633#26449d#1f42d0#8caaff#dbe4ff