primary
Logo · dark grounds
Blush letters and one pink cell. For void and other dark grounds.
> o1tean.com/brand
brand
o1tean is one person: a graphic designer and an IT developer. The logo is the name with one character switched, oltean with its l turned into a 1. Below: the logo, colours, type and motion, every file ready to copy or download.
logo
Use the full logo by default. The mark (the o and its cell) is for square or tiny slots where the name is already known. Keep the clear space. Never redraw, recolour or retype it.
light
Logo · light grounds
One colour, void. Pink is too faint on paper (2.33:1), so the light logo carries no pink.
mark
Mark · dark grounds
Avatars, app icons and square slots. Minimum 40 px; at 32 px and below, use the favicon.
mark
Mark · light grounds
The same mark in void, with the 1 knocked out of the cell.
One colour: white SVG for photos and third-party dark grounds, black SVG for print, stamps and stickers.
The idea
o1tean is oltean with one character switched. The switched character sits on a pink split-flap cell, the developer's character cell, beside the o, the designer's circle. In the logo, l and 1 share one stem and one foot and differ only by the flag, so one flap of the top card turns oltean into o1tean.
construction details
construction · units of 1/100 x-height
- letters
- circles and bars: stem 22, bar 19, bowl R 51.5
- the 1
- 140 tall, flag 42°, foot 62 × 19, on the baseline
- cell
- 100 × 160, radius 12, walls 10 (16 beside the foot)
- split
- hinge at −70; gap 6 in the logo, 8 in the mark
- spacing
- o → cell 24 (never touching), cell → t 16
- on dark
- letters 3% thinner, so both grounds look the same weight
Clear space and minimum size
X is half the x-height. Keep X clear on every side; it is already inside every file, so place them as they are and never crop.
minimum sizes
- logo
- 68 px ink width on screen (cell 16 px) · 25 mm in print
- mark
- 40 px on screen · 6 mm in print
- 32 px and below
- the pixel-drawn favicon, never the scaled vector
- idle cell
- the hollow (idle) cell only from 48 px
Favicon: link only the ICO, which holds the 16 and 32 px drawings.
Don't
Each misuse below is rendered from the real logo. The fix is underneath.
DON'T
Stretch or squash it
Scale proportionally. If it doesn't fit, use the mark or change the slot.
DON'T
Recolour the cell
The cell is pink on dark grounds and void in the light logo. No other colours.
DON'T
Make the letters pink too
Pink marks only the one switched character. Letters are blush on dark.
DON'T
Show the cell without the o
Alone it reads as a badge or a keycap. Always pair it with its o.
DON'T
Add glow, shadow or gradient
Flat fills only. Glass and glow belong to the site, never to the logo.
DON'T
Freeze the "oltean" state
The l lives only in motion. Every static use rests on the 1.
4 more
DON'T
Rotate or tilt it
Keep it upright on its baseline. Only the flap moves the cell, and only in motion.
DON'T
Type the name in a font
Use the drawn logo files. HACKED and Hack set the words around it.
DON'T
Crowd the clear space
Keep X (half the x-height) clear on every side.
DON'T
Use the colour logo on light grounds
Blush on paper is 1.04:1. Use the light logo (17.6:1).
colour
Void leads. In the logo, pink is only the cell; in an interface it stays rare, one pink element per view. Orchid carries the liquid; violet and plum carry depth. CMYK values are ICC conversions (GRACoL 2006); proof before print.
canvas · 60%
Void
17.6:1 with paper
letters on dark
Blush
17.0:1 on void
the cell · one per view
Pink
7.55:1 on void · 2.33:1 on paper
the liquid · links, progress
Orchid
8.0:1 on void
secondary · idle
Violet
4.8:1 on void
depth · decorative
Plum
1.2:1 on void · never for text
light canvas
Paper
void on paper 17.6:1
files
Tokens and worksheet
Every colour, radius and motion value as CSS custom properties, plus the colour worksheet with HSB, HSL and Lab.
Proportion
A typical layout is mostly void, with plum for depth, orchid for the liquid and a single pink accent.
void 60181264
Colour rules
DON'T
Use pink twice in one view
One switched character, one pink. Use orchid or blush for everything else.
DON'T
Layer pink on orchid
They are 1.06:1 apart. Set them side by side, never one on the other.
DON'T
Fill large areas with accents
Void is the canvas. Accents mark one thing at a time.
DON'T
Set pink or orchid text on paper
Both fall under 3:1. On light grounds, text and logo go void.
DON'T
Blend the brand into gradients
Gradients and glow are light in the site's glass and motion, never fills on the logo.
DON'T
Use pure black or white
Use void and paper for large areas. Keep #000 and #fff for one-colour print files.
type
The logo is drawn, never typed. HACKED speaks in headlines; Hack does everything else.
display typeface
HACKED
Headlines and section titles, 32 px and up, one weight. Never for body text, never for the logo.
display / 400
I design in pixels
section title / 400
two sides
HACKED © David Libeau · CC BY · credit required
get the font
text, ui and code
Hack
Reading text, labels, metrics and code. Regular 400 and Bold 700.
bold 700 / labels and metrics
LABEL · TOKEN · 0123456789
regular 400 / reading text
I design in pixels and build in characters.
regular 400 / code
--o1-pink: #ff5fd2;
Hack © Source Foundry · MIT + Bitstream Vera
get the font
motion
The logo moves the way it was named: one character changes. One flap, a click, a long hold. Everything else enters quietly, and the liquid is the only thing that flows.
intro · 5.2 s, plays once
The switch
The o pops, the cell opens on an l, the liquid rule lifts t-e-a-n and drains, then one flap turns the l into a 1.
idle · loop
At rest
The mark rests on the 1. The cell ticks to the l and back; the l is never on screen for more than 0.4 s.
loading · links
The liquid rule
The rule wells out of the cell's foot, spreads both ways and drains back. The same curve fills link underlines and progress bars.
motion tokens: the same numbers drive the renders and the interface
| token | value | use |
|---|---|---|
--o1-ease-enter | entrances: the cell opening, panels arriving | |
--o1-ease-pop | the o and t-e-a-n popping in: one 3% overshoot | |
--o1-ease-spread | the liquid spreading: underlines, progress | |
--o1-ease-retract | the liquid drawing back | |
--o1-ease-fall | the flap falling (gravity) as a rotateX angle | |
--o1-dur-flap-hero | the intro's one flap | |
--o1-dur-flap | one card in loops and loaders | |
--o1-dur-click | the click after a flap lands: light only, nothing moves | |
--o1-dur-pop | one pop: the o, each letter | |
--o1-dur-read | "oltean" holds before the flap | |
--o1-dur-hover | nav logo hover: 1 → l → 1 | |
--o1-dur-spread | link underline fill |
Rules
- One flap per moment. The flap is reserved for the character that changes.
- Pink stays on the cell. The liquid is orchid; nothing else turns pink.
- End on the exact logo and hold it for at least 1.5 s.
- Play the intro once per session. Never loop it in a product; loops use the idle state.
- Rest on the 1. The l never shows for more than 0.4 s.
- Reduced motion shows the static logo at once. The nav logo CSS does this by itself; for video, GIF and the animated SVG in an
<img>, serve the end-frame PNG instead. - Web: a
<video>with no poster for the intro (a poster would give away the ending; the void box is frame 0), the inline nav logo with nav-logo.css for hover (try the logo in the bar above), and the animated SVG where scripts can't run, like READMEs.
kit
Icons, social images and UI pieces built from the logo's own geometry.
Avatar
400 px, circle-safe.
Favicon
Pixel-drawn at 16 and 32 px, on its own void tile so it shows on light and dark tabs.
States
A filled cell means active or changed; a hollow cell means idle.
Components
Section-number cells, the liquid underline and the progress rule.
explore
Ten directions were built, animated, critiqued and scored before this one was chosen. They are kept, not deleted.
01
Two Shapes
02
Baseline Flow
03
Cursor
04
Pixel o1
05
Rendered in Characters
06
Liquid o1
07
Half Vector, Half Pixel
08
Glass over Code
09
Monoline + Anchors
10 · chosen
l ↔ 1