C+CInside the brand

Round on the outside, square on the inside.

Every piece of the system comes back to the name. Try them here: the mark, the motion, the palette, the type and the rules that keep it all recognizable.

01Curve to Corner

Pick a side.

The mark holds both halves of the name. On the site it changes shape when you choose one. The outline, stroke and cross never move. Only the corner radius does, from 81 to 0.

Curve

02Pill mark system

One mark, one motion.

On the site the mark turns as you scroll: the dots slide up, the squares slide down, and the whole pill makes a half turn. Shape and movement stay fixed. Only five colors change between versions.

turn 40°
13.5pattern grid
6.75outline and cross stroke
405slide, 30 tiles
180°clockwise turn
2.8sbuild sequence

03Color

Warm grays carry the page.

One yellow carries the energy. No gradients, no textures, no shadows: depth comes from a change of ground, and nothing is ever pure white or pure black. Tap a swatch to copy it.

58%Canvas, Paper
14%Stone
18%Charcoal, Graphite
10%

How a page usually splits: mostly calm, then one loud yellow field when it counts.

04Type

Two faces. One for feeling.

Archivo does almost all of the work. Vollkorn Italic shows up one word at a time, at the same size as the line around it, when a line needs a little warmth.

Archivo · primary Aa
100
700

Headlines are 700, body is 400. It's a variable font, so it gets wider and bolder without changing family. Width 125 is reserved for one word: Corner.

Vollkorn Italic · accent Aa

One word inside a headline. Never a whole sentence, never body copy. The only time it stands alone is the word Curve.

Then tap the one word that should carry the curve.

05Shape

Every shape is a curve or a corner.

Two families. Pick one per object and commit to it. Fields are corners, choices are curves.

Curve

Full pills at a 999px radius. Buttons, badges, toggles, separators and the ends of the logo.

Start a project →See the work01

Corner

Zero radius. Rules, bands, table rows, text fields, swatches and color blocks.

you@company.com
CurveCorner

Same shape, two attitudes. It moves the brand way: long, soft, settled.

06The small rules

How it stays ours.

The details that keep the mark readable and the motion consistent, whoever is making the thing.

Clear space

xx

Keep a zone equal to x, the radius of the pill's round end, on every side. That's half the height of the mark.

Minimum size

150px wide, horizontal. 35 mm in print.
80px wide, stacked. 20 mm in print.
32px wide, mark alone. 9 mm in print.

Below these the cross starts to fill in.

Motion

Ease out.16, 1, .3, 1
Ease in and out.65, 0, .35, 1

Long and soft. Entrances take 1 to 1.2s, hovers 0.6s, ambient loops 8s. When someone asks for less motion, all of it stops.