Brand and press
The Clauhub brand kit.
Logos, colors and type to show Clauhub as it is. Copy from here: don't redraw the logo or pick a color by eye.
Logo
In color, negative, black and white. On the web, always SVG; in Word or PowerPoint, PNG.
How to use it
- 01On a light background, the color logo. On a dark background, the negative.
- 02In small spaces, such as an avatar or an icon, the symbol.
- 03On the web, always SVG. In Word or PowerPoint, PNG. In print, SVG with the CMYK values and a color proof.
- 04Don't redraw the logo or set it in the typeface: use these files.
- 05The Clauhub logo never takes an app's color.
- 06The logo always reads “clauhub”, lowercase. In running text it's Clauhub, with an initial capital; never “ClauHub”, “Clau Hub” or “CLAUHUB”.
The Bloquis
Clauhub's characters: cubes made of the symbol's squares. The red one, in the brand's color, is the leader; each of the others wears its app's color and will be the face of its expert agent.
- Always with a happy face; the «-.-» face is only for the «really?» look.
- Each Bloqui in its app's color, never inside another app.
- The red one stands in the middle when they appear together.
- In clay-like 3D, on bone, with no text or logos inside the picture.
Apps
Every app uses the same symbol and changes only the center tile. Its color lives in that tile and inside the app.
Clauhub Fiscal
- On light
- #2F55D4
- On dark
- #4C70EE
Clauhub Accounting
- On light
- #13805C
- On dark
- #1FA577
Clauhub Bookings
- On light
- #6E3FA3
- On dark
- #9466D1
Clauhub Point of sale
- On light
- #0B7285
- On dark
- #22A2B8
Clauhub Gyms
- On light
- #A3307A
- On dark
- #D461A8
Clauhub Finance
- On light
- #9A6200
- On dark
- #D99A1E
Clauhub Channels
- On light
- #B8480F
- On dark
- #EE7A3A
Color
About 70% neutrals (Bone, Paper, Mist), 25% Ink and 5% Oxblood: one accent and plenty of space.
- Ink
- HEX
- #0E1013
- RGB
- 14, 16, 19
- CMYK
- 26/16/0/93
- CSS
- --clau-ink
Logo, primary text and dark backgrounds
- Bone
- HEX
- #F4F1EA
- RGB
- 244, 241, 234
- CMYK
- 0/1/4/4
- CSS
- --clau-bone
Page background. Warm; never pure white
- Oxblood
- HEX
- #8C1D2F
- RGB
- 140, 29, 47
- CMYK
- 0/79/66/45
- CSS
- --clau-oxblood
Signature color: center tile, primary button, key word
- Paper
- HEX
- #FBFAF7
- RGB
- 251, 250, 247
- CMYK
- 0/0/2/2
- CSS
- --clau-paper
Surfaces: cards, tables and panels
- Mist
- HEX
- #D9D5CC
- RGB
- 217, 213, 204
- CMYK
- 0/2/6/15
- CSS
- --clau-mist
Lines, borders and dividers
- Slate
- HEX
- #5B616B
- RGB
- 91, 97, 107
- CMYK
- 15/9/0/58
- CSS
- --clau-slate
Secondary text and labels
- Graphite
- HEX
- #2A2E35
- RGB
- 42, 46, 53
- CMYK
- 21/13/0/79
- CSS
- --clau-graphite
Body text
- Oxblood deep
- HEX
- #6E1424
- RGB
- 110, 20, 36
- CMYK
- 0/82/67/57
- CSS
- --clau-oxblood-deep
Links and accent text on light backgrounds
- Oxblood light
- HEX
- #E0687B
- RGB
- 224, 104, 123
- CMYK
- 0/54/45/12
- CSS
- --clau-oxblood-light
Center tile and links on dark backgrounds
CMYK values are automatic conversions: ask the printer for a color proof before a run. On dark backgrounds use Oxblood light, not Oxblood.
Typography
Geist and Geist Mono, open source under the SIL Open Font License, for web, print and apps.
Todo lo del SAT, en un solo lugar.
Geist
Headlines, interface and text
400 text · 500 emphasis · 600 headings
- No serif and no italics. A headline's key word goes in Oxblood, at the same weight.
- Amounts always use fixed-width digits.
Press, or a use that isn't here?
Write to us and we'll help.