Brand
Design guide
The Fitness Haus logo, colors, typefaces and the rules for using them, with downloads.
The mark
The Fitness Haus mark
Use the version that fits the surface. Every file is the same drawing with its colors changed; nothing here is redrawn.
Mark and name together
Lockups
The name is set from the typeface, not typed: the spacing between the letters is part of the logo. Use these files rather than placing the mark beside text of your own.
Room to breathe
Clear space and size
Keep clear space around the logo equal to 25% of the mark's height on every side. Nothing else goes inside that: no text, no edge, no other logo. The gap between the mark and the name in the lockups is 18% of the mark's height, and the files already include it.
Minimum sizes: 24px tall for the mark, 120px wide for the side-by-side lockup, 90px wide for the stacked one. Below those, use the mark alone.
The mark at the sizes a favicon and an app icon get. If it stops reading at 24px, the icon needs its own simpler variant.
Please do not
What not to do
- Change the colors
- The colors are most of what makes it ours. If you need a different one, take one of the versions on this page.
- Stretch or squash it
- Hold shift. Width and height always move together.
- Retype the name
- Setting it yourself will not match, however close the font looks. Use the files.
- Put it on a busy photo
- Put it on a plain panel, or clear some space behind it first.
- Repeat it as a background
- A logo tiled as wallpaper wears out. Use a plain colour or a pattern instead.
- Add effects
- No shadows, outlines, gradients or bevels. The files are finished.
Palette
Colors
Each ramp has a job. The number beside a step is its contrast against the paper, measured from the value the swatch is painted with; nothing on this page is typed.
Chalk to Black neutral
Paper and ink. Chalk is the page, Iron is a raised surface on a dark band, and Haus Black is the ink and the ground of every dark band.
50
#F2F1EE
100
#E8E6E2
200
#D7D4CF
300
#B9B6B0
400
#918E88
500
#6E6B66
600
#55524E
6.88:1 Body text
700
#3B3B3A
9.93:1 Body text
800
#2A2D2E
12.29:1 Body text
900
#0E0E0E
17.09:1 Body text
Volt accent
Volt, the one colour in the brand. It carries links and every button, and at step 400 it is the green on the mark.
50
#F0FAE9
100
#DCF3CC
200
#B7E69C
300
#7ED957
400
#6CC04A
500
#51A034
600
#3C7527
4.94:1 Body text
700
#2E5A1E
7.16:1 Body text
800
#224216
10.00:1 Body text
900
#172C0F
13.25:1 Body text
The pairs the site relies on
Body text needs 4.5:1; large text, icons and control boundaries need 3:1. Every pair below is asserted by the build, so a palette change that breaks one cannot be published.
| Use | Pair | Ratio | Cleared for |
|---|---|---|---|
| Body text | ink on surface | 17.09:1 | Body text |
| Body text on a card | ink on surface-raised | 19.30:1 | Body text |
| Muted text | ink-muted on surface | 6.88:1 | Body text |
| Muted text on a sunken panel | ink-muted on surface-sunken | 6.23:1 | Body text |
| Faint text | ink-faint on surface | 4.70:1 | Body text |
| Links | link on surface | 7.16:1 | Body text |
| Primary button label | ink on accent.400 | 8.53:1 | Body text |
| Primary button label, hovered | ink on accent.300 | 10.99:1 | Body text |
| Text on the dark band | on-dark on surface-dark | 17.09:1 | Body text |
| Muted text on the dark band | on-dark-muted on surface-dark | 9.54:1 | Body text |
| Faint text on the dark band | on-dark-faint on surface-dark | 5.91:1 | Body text |
| Text on a card in a dark band | on-dark on surface-dark-raised | 12.29:1 | Body text |
| Muted text on a card in a dark band | on-dark-muted on surface-dark-raised | 6.86:1 | Body text |
| Volt on the dark band | accent.400 on surface-dark | 8.53:1 | Body text |
| Headline emphasis | accent.700 on surface | 7.16:1 | Body text |
| Headline emphasis on a sunken panel | accent.700 on surface-sunken | 6.49:1 | Body text |
| Headline emphasis on the dark band | accent.400 on surface-dark | 8.53:1 | Body text |
| Field error | danger on surface | 5.79:1 | Body text |
| Field and button boundary | line-strong on surface-raised | 5.31:1 | Body text |
| Focus ring | ring on surface | 4.94:1 | Body text |
| Focus ring on a card | ring on surface-raised | 5.58:1 | Body text |
| Focus ring on the dark band | accent.400 on surface-dark | 8.53:1 | Body text |
Typefaces
Type
Both faces are open source and free to use. The site loads them itself; a document made elsewhere should install them rather than substitute.
Headings
Archivo Variable
Archivo at 800, uppercase, tracking pulled slightly tight.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Body
Archivo Variable
The same family at regular weight, 16px or larger. Never lighter than 400.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Display
Archivo Variable
Also Archivo. The hero line only, set larger and tighter than a heading. One per page.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Numbers
ui-monospace
Prices and timetables use tabular figures rather than a second family, so columns line up.
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Interface
The pieces the pages are built from
Buttons, cards and fields, as they ship. Anything built to sit beside the site should use these shapes.
Buttons
One primary button per view. The corner radius is 0.75rem; the pill is for chips.
A field
A hint sits under the field, in the muted tier.
An error is bold and in the signal ramp.
Chips and rules
Rules use line; control boundaries use line-strong, which is dark enough to find.
The dark band
Three text tiers on the dark surface: on-dark, on-dark-muted, on-dark-faint.
Breakpoints: sm 40rem, md 48rem, lg 64rem, xl 80rem. Page column 72rem; reading measure 68ch.
How we sound
Voice
We are
- direct
- specific
- unfussy
We are not
- hyped
- punishing
- corporate
Plain words, short sentences, and nothing that reads as though a machine wrote it. Say the specific thing.
Using these
What you may do
- Use the logo files as they are
- On menus, signs, listings, articles, event posters and social posts about us.
- Use the colors and typefaces
- To make something that sits beside our name look like it belongs to us.
- Resize the files
- Proportionally, and not below the minimum sizes stated above.
- Ask
- For anything not covered here, or for a version this page does not have.
Questions: sid@fitnesshaus.com
Everything
Take the whole set
Every file on this page plus a short usage note.