Sign inStart building

The crisp brand

The mark, the colours and the type that make crisp look like crisp. Each one is here with the reasoning behind it, the files to download, and the few rules that keep it intact wherever it travels.

Download the mark Usage rules

SVG, 4 files, for light and dark grounds

The logotype

The whole word, drawn on the same grid as the mark. The first letter is the mark itself; r, i, s and p are built from its parts, lean at its angle, and share one band, so a single cut runs through the word as one object. Use the logotype wherever there is room for it, and the mark alone where there is not.

Ink on paper#14161a
Paper on ink#ecebe6

Files

The mark

The first letter of the logotype on its own: a squared C, leaning forward and cut clean through its spine. Use it where the word does not fit. It is one drawing in one colour at a time, shown here on the two grounds it has to be correct on, and as the app icon for square slots.

Ink on paper #14161a
Paper on ink #ecebe6
App icon #5fd8ea on #0d0f12

Files

  • Mark, ink The default. Ink on any light ground: paper, white, a printed page. crisp-mark-ink.svg
  • Mark, paper The same drawing in paper, for dark grounds, slides and terminals. crisp-mark-paper.svg
  • Mark, glacier The accent, for the rare moment the mark is the one thing in colour on a light ground. crisp-mark-ice.svg
  • App icon The mark in ice on its own dark tile, for favicons, avatars and home screens. crisp-app-icon.svg
  • Vector files on a 32-unit viewBox with the band cut out for real, so none of them needs a background of its own. For the whole word, use the logotype files above.

Construction

The crisp mark belongs to a family: WebJs is a forward-leaning W cut by a band, and pilots is a forward-leaning delta cut by a band. Crisp takes the same lean and the same band and gives them to a squared C. Its own idea is a crisp cut, the moment a description becomes a working app.

The crisp mark on its construction grid A squared C on a 32-unit grid, leaning forward 11 degrees, cut through the spine by a two-unit band of empty space between y 18 and y 20, with blade-cut arm tips.
The mark on its 32-unit grid. The dashed outline is the band. skewX(-11) · band y 18 to 20

  1. A squared C

    Straight sides and hard corners, drawn on the 32-unit favicon grid and checked small first. No curve to blur at 16 pixels.

  2. Leaning forward at 11°

    The same angle as pilots. The skew moves no point vertically, so the cut stays perfectly level while the letter leans.

  3. Sliced by the band

    Two units of empty space cut the spine: the band of negative space the whole family shares. It is a gap in the path, never a painted bar.

  4. Blade-cut tips

    The arm ends are cut on a blade angle, so the opening narrows as it leaves the spine and the lean still reads at 16 pixels.

Clear space and minimum size

Both rules are measured against the mark itself, so they hold at any scale without a table of pixel values.

Keep a quarter of the mark clear

If the mark's box is x wide, keep x/4 empty on every side. Nothing crosses the dashed line: no text, no rule, no other logo, no edge of a card.

64px
32px
24px
16px min

16px is the minimum

At 16 pixels the band is a single pixel tall. Any smaller and the cut closes, and the mark reads as a plain C. Where there is less room than that, write the name instead.

Colour

Warm neutrals carry every surface, and one accent is rationed to the places that ask for action. Each token is written once with light-dark(), so every swatch shows the light value on the left and the dark value on the right.

  • Paper --paper

    The page itself.

    light
    #f7f6f2
    dark
    #0d0f12
  • Paper, elevated --paper-elev

    Cards, panels and inputs.

    light
    #fffefb
    dark
    #15181d
  • Paper, sunken --paper-sunken

    Bands, the footer, wells.

    light
    #efede7
    dark
    #090b0d
  • Ink --ink

    Headings, body copy, the mark.

    light
    #14161a
    dark
    #ecebe6
  • Ink, muted --ink-muted

    Ledes and secondary text.

    light
    #55585e
    dark
    #a3a7ad
  • Rule --rule

    Hairlines and borders.

    light
    #e0ddd5
    dark
    #23272e
Glacier (accent) --ice
light
#0d7a8c
dark
#5fd8ea

One accent, spent where it counts

Glacier is a deep teal that brightens to ice in the dark. It fills the primary action, marks live state, draws a focus ring or a hairline, and that is all. It never colours running text, never tints a panel, and never appears as a gradient. The family keeps one accent per product so that each stays recognisable: WebJs owns amber, pilots owns acid green, and crisp owns glacier.

Where it may appear
Primary action Everything else live Focus ring hairline

Type

Three faces, each with one job. A tight grotesque for display, a neutral sans for reading, and a monospace for anything a machine would print.

Inter Tight, display

Headlines and section headings

Describe the app. Watch it get built.

weight
800
tracking
-0.045em
leading
0.98

Inter, body

Prose, ledes, interface

Every project runs in its own cloud machine. The app is live while it is built, so each change lands in the preview the moment the agent saves it.

weight
400 to 600
size
15px base
leading
1.6

JetBrains Mono

Code, values, tokens 
$ npm run db:migrate
--ice  #0d7a8c / #5fd8ea
ready  4 routes, 200 OK
weight
400, 500
size
11 to 13px
use
never prose

The name

The name is a plain word and it is written like one. Lowercase is the identity; the capital is only grammar.

In the logotype the name is drawn, not typed. In running text: crisp, or Crisp to start a sentence
crisp
Use. In the lockup beside the mark, always lowercase, and wherever it is typed: a domain, a package, a handle.
Crisp
Use. When the name starts a sentence or a title. Mid-sentence it stays lowercase: build it with crisp.
CRISP
Avoid. Never. It is a word, not an acronym, and it is never set in capitals.

Do and don’t

One drawing, one colour at a time, at its own angle. The first three tiles are right; the rest are the ways a mark gets broken in the wild, and none of them ship.

  • Ink on paper

    One colour, from the files.

  • Paper on ink

    The same drawing, inverted by file.

  • Glacier, alone

    When the mark is the only colour.

  • No gradients

    One flat colour, always.

  • No outlines

    The mark is a solid shape.

  • No shadows

    No drop shadow, glow or bevel.

  • No rotating

    The lean is the only angle.

  • No straightening

    Never undo the 11° lean.

  • No painted band

    The band stays empty.

  • No stretching

    Scale it evenly or not at all.

Use the mark and the name freely to refer to crisp: in an article, a talk, a comparison, or a note that an app was built with it. Ask first before using either as part of another product's name or logo, or in a way that suggests crisp endorses something.