The design system

Resources

Generated from the same source the product reads.

01 — Logo

Logo

Thirty files: five arrangements, three size bands, positive and reversed. The wordmark in every one is outlined, so none of them needs Sentient to render correctly.

Each band is previewed at a size inside its own range, so the three read as three sizes rather than three identical pictures with different captions.

48px and upMedium · large mark cutpositive
48px and upMedium · large mark cutreversed
24 to 48pxMedium · small mark cutpositive
24 to 48pxMedium · small mark cutreversed
under 24pxMedium · small mark cutpositive
under 24pxMedium · small mark cutreversed
02 — Looking

Looking

Twenty-five variants sharing the outer contour exactly. Nine glances, eight turns and eight profiles. For the places a product can afford a little life; none of them replaces the primary mark.

Straight on
03 — Colour

Colour

Two files. Take the primitives if you are building something from scratch, the tokens if you are building an interface — a component should be asking for a surface, not for step 400.

Colour primitivesodin-colour-primitives.css
Eight scales, thirteen steps, solid and translucent, sRGB and display-p3, both themes.
41 KB
Semantic tokensodin-colour-tokens.css
The names a component asks for — surface, border, text — mapped to the steps.
8 KB
04 — One family at a time

One family at a time

The same scales, split up. For a surface that needs one family and not the other seven — a marketing page, an email, a slide.

Siennasienna.css
The primary. Burnt earth.
5 KB
Amberamber.css
Warning.
5 KB
Crimsoncrimson.css
Danger.
5 KB
Sagesage.css
Success.
5 KB
Duskdusk.css
Information.
5 KB
Midnightmidnight.css
The first accent.
5 KB
Roserose.css
The second accent.
5 KB
Stonestone.css
Neutral. The ground everything else sits on.
5 KB
05 — Fonts

Fonts

Three faces, all free to use. None is bundled here — take them from the source so you get the licence with them.

AaOdin Intelligence 0123456789
SentientDisplay
Headings, the wordmark, anything at 24px and up.
Fontshare
AaOdin Intelligence 0123456789
NunitoBody
Everything a person reads at length.
Google Fonts
AaOdin Intelligence 0123456789
JetBrains MonoMono
Values, codes, identifiers. Anything you might copy.
JetBrains
06 — Type

Type

The thirteen-step ladder as custom properties: size, leading and tracking for every step, and the density setting that moves all of them together.

Aa
Type scaleodin-type.css
Thirteen steps, each with its face, leading and tracking.
6 KB
07 — The shape

The shape

The mark’s outer contour on its own, as a clip path. For masking an image or a field of colour into the shape without redrawing it.

Outer contourodin-shape.svg
The squircle at k 0.660, as a reusable clip path.
542 B
08 — The living lockup

The living lockup

The same lockups, in one file each, with the mark following the pointer. Open one directly or inline it in a page and it looks at your cursor; put it in an <img>, where scripts do not run, and what is left is the correct static lockup.

One file rather than two, because the wordmark is positioned arithmetically against the mark inside it. Two files in a row have to be aligned by whoever places them, and the thing they get wrong is centring the wordmark’s ink box — ascender to descender — instead of its cap box, which drops the type by about two pixels at bar size.

The markodin-live-mark.svg
On its own.
4 KB
Odinodin-live-odin.svg
Beside the mark.
6 KB
Odin Intelligenceodin-live-full.svg
Beside the mark.
12 KB
Odin Intelligence, stackedodin-live-full-stack.svg
Under the mark.
13 KB