Brand guidelines · v1
Clone, by design.
Clean minimalism, ethereal light and plenty of white. Everything you need to make Clone look like Clone.
Space
for more.
Inter Tight
Aa Bb Cc
0123456789
A counterpart
for your
working day.
01 · Primary logo
The Balanced wordmark.
A custom geometric lowercase wordmark with squared, softened letterforms. It is drawn, never typeset. Use it in near-black on light backgrounds and in white on ink.
✓Use Graphite #262626 or Ink #0A0A0A on white and Fog. Use white on Ink.
✓Keep the logo solid and flat. The grain belongs to the aura, not the letters.
02 · Logo mark
The soft-square O.
The O from the wordmark stands alone as the mark: a single rounded-square ring. Use it for app icons, avatars, favicons and anywhere the wordmark would be too small.
03 · Clearspace
Give it room to breathe.
Keep a margin of at least x on every side, where x is the height of the wordmark's o. For the mark alone, x is the mark's stroke width doubled. Nothing else enters this space.
Don't
Stretch or squash it
Recolour it in brand accents
Rotate or tilt it
Outline or add effects
04 · Primary typeface
Inter Tight for voice. Inter for everything else.
Inter Tight sets headlines with a compact, confident rhythm. Inter Variable carries body copy and UI, tuned for legibility at small sizes. Both are open source.
Inter Tight
Titles and headings · 400 to 600
Aa Bb Cc
0123456789
Inter Variable
Body and UI · 400 to 600
A Clone works where its person works: documents, Slack, email, messaging and calls. The person directs it and can take over its computer.
Glyphs
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!?&@%(){}
05 · Typeface hierarchy
A short, clear scale.
Big, tight headlines. Calm, readable body. Use the tokens below rather than one-off sizes, and keep copy short.
06 · Colour palette
Mostly white. A breath of blue and violet.
White leads, around 70% of any composition. Neutrals carry type and structure. Blue is for action. Violet and blue meet in the aura. The dark blue and violet are supporting tokens, never large fields.
Neutral
Blue
Violet
Gradients
Balance
07 · Brand imagery
Light, materials and negative space.
Our signature image is a clean white rounded-square void inside a soft, finely grained aura. It suggests an opening: space handed back to you. Robots, faces and circuitry are inspiration only, never the picture.
Centred
The canonical form. Use for posters, covers and closing moments.
Edge crop
Let the void run off the frame, leaving space for a headline.
Aura only
No void. For small surfaces, card faces and backgrounds behind type.
Space
for more.
Poster
Headline top-left, wordmark bottom-left.
Your AI coworker.
Void as a frame
Place one message, product view or logo inside the white space.
✓Keep the void perfectly clean white, with a crisp edge and a wide, soft fade outward.
✓Keep grain fine, like dither or light through frosted glass.
×Cover the whole frame in noise or let the grain turn coarse and gritty.
×Show literal robots, android heads, hands, faces or circuitry.
08 · Graphic patterns
Repeatable devices.
Built from the mark's geometry and the aura's dither. Use one pattern per surface, at low contrast, with plenty of white around it.
Soft-square grid
The O's counter, repeated. One cell may hold the aura.
Dither ramp
A print-friendly halftone of the aura, fading into white.
Grained blush
The blush gradient with fine grain. For covers and merch.
Horizon
A void rising from the bottom edge. For banners and section breaks.
09 · Brand mockups
In the world.
The same restrained system on fabric, paper and glass: a small solid wordmark, a generous aura, and lots of white.
A counterpart
for your working day.
Your AI coworker.
Sam's Clone
AI coworker, Design
sam.clone@yourco.com
Clone
Approve a $1,200 deposit for the offsite venue?
10 · Components
The system, in code.
shadcn/ui components themed with the Clone tokens. Pill buttons, generous radii, hairline borders and blue reserved for the one action that matters.
Buttons
Badges and status
Inputs and controls
Inline feedback
Tabs and accordion