Hi!
Style Guide
The colours, type, buttons, fields and textures this site is built from. Every piece shown here is the real one, so this page changes when the design does.
Muse & Co., piece by piece
Colour
- slate
#253031Text, dark bandson paper 13:1 AAAon slate 1:1 Decoration - slate-deep
#1b2425Footeron paper 15.2:1 AAAon slate 1.2:1 Decoration - olive-btn
#646a4cButtonson paper 5.4:1 AAon slate 2.4:1 Decoration - olive-ink
#5e6347Headings and links on paperon paper 6:1 AAon slate 2.2:1 Decoration - olive
#989d7eRules and decoration onlyon paper 2.7:1 Decorationon slate 4.8:1 AA - sage
#b4b79aSage bandson paper 2:1 Decorationon slate 6.6:1 AA - sage-pale
#c8cfc8Cards, tapeon paper 1.5:1 Decorationon slate 8.5:1 AAA - candle
#e9d9a6Accents on slateon paper 1.3:1 Decorationon slate 9.7:1 AAA - paper
#fbfaf5Pageon paper 1:1 Decorationon slate 13:1 AAA - paper-2
#f3f1e8Warm paper bandson paper 1.1:1 Decorationon slate 12:1 AAA - on-dark-2
#dce0cfSecondary text on slateon paper 1.3:1 Decorationon slate 10.1:1 AAA
Type
Headings and body · Prata
Aa Bb Cc · The voice beneath the brand
Labels and buttons · Noto Sans
Story · Strategy · Soul
Accents · Pinyon Script
are you listening?
- Page title (h1)34–50px
- Quiet strategy, clearly said
- Section title (h2)30–42px
- Quiet strategy, clearly said
- Small heading (h3)22px
- Quiet strategy, clearly said
- Body17px / 1.9
- Quiet strategy, clearly said
- Label13px, 3px tracking
- Quiet strategy, clearly said
You're doing great.
Never stop believing.
Strength lies within you.
Miracles are everywhere.
If you can dream it,
You can do it.
Buttons and links
Form fields
Tones
- Paper
- Warm paper
- White
- Sage
- Slate
Texture
- Paper grain over every page
- Torn edge where a band changes tone
- Arches and a ghost line behind pictures
- Taped, ruled index cards
- Candlelight on slate
- The wax seal
- Margin notes in script
- The circled check