Fishing
Deep water, Tide, Spray, and Foam. Cool blues for type, and a light surface.
Deep water
#0E4D6C
CMYK 87 / 29 / 0 / 58
Tide
#1F7A8C
CMYK 78 / 13 / 0 / 45
Spray
#3DADA0
CMYK 65 / 0 / 8 / 32
Foam
#E5F3F1
CMYK 6 / 0 / 1 / 5
A design system for your business
We set the colours, the type, and the logo rules before the pages are built. The website then stays consistent, because those decisions are already made.
The example
The Yorkton Online system
This is the system behind this website. Headings are Open Sans. Body text is Poppins. The mark keeps the blue-to-green gradient.
Logo usage
Yorkton OnlineType
Headings use Open Sans
Body text uses Poppins, the same type you are reading now.
Spacing
Six steps. Nothing in between. Related items use 16 or 24. Groups use 40. A section uses 64. The hero uses 96.
- 8pxInside a control
- 16pxBetween related items
- 24pxUnder a heading, and in from the page edge
- 40pxBetween groups
- 64pxPadding on a section
- 96pxThe hero
Colour
The palettes
Each scheme on its own. Hex is for screen. CMYK is for print.
Sunset
Twilight, Ember, Dusk, and Afterglow. Deep purple, a hot orange-red, coral, and a warm pale.
Twilight
#6B2D5B
CMYK 0 / 58 / 15 / 58
Ember
#F15C2E
CMYK 0 / 62 / 81 / 5
Dusk
#E07A5F
CMYK 0 / 46 / 58 / 12
Afterglow
#F6D2C4
CMYK 0 / 15 / 20 / 4
Harvest
Soil, Straw, Canola, and Blood. Dark earth, dry straw, field yellow, and a deep burnt red.
Soil
#5C3A21
CMYK 0 / 37 / 64 / 64
Straw
#E8D4A2
CMYK 0 / 9 / 30 / 9
Canola
#F5D400
CMYK 0 / 13 / 100 / 4
Blood
#5C1E09
CMYK 0 / 67 / 90 / 64
Spring
Bud, Blossom, Primrose, and Petal. Warm blossom colours with a soft peach undertone, so the set sits apart from Sunset.
Bud
#824D52
CMYK 0 / 41 / 37 / 49
Blossom
#D9AAA6
CMYK 0 / 22 / 24 / 15
Primrose
#ECD2C2
CMYK 0 / 11 / 18 / 7
Petal
#F7E9E4
CMYK 0 / 6 / 8 / 3
Winter Neutrals
Midnight, Sky, Frost, and Ice. Type, edges, and light surfaces. These stay out of the way of a stronger scheme.
Midnight
#1C2830
CMYK 42 / 17 / 0 / 81
Sky
#9BB4C4
CMYK 21 / 8 / 0 / 23
Frost
#E7EEF2
CMYK 5 / 2 / 0 / 5
Ice
#F7F9FB
CMYK 2 / 1 / 0 / 2
Mixing
How they mix
Winter Neutrals mixes with every scheme. Spring mixes with Sunset. Harvest mixes with Fishing.
Winter Neutrals with Fishing
Ice is the page. Deep water is the heading. Foam is the panel, and Spray is the accent.
Tide on Ice
A heading in Deep water
Foam sits on Ice as a quiet panel. Sky can edge it. Spray is the one accent.
A Foam panel
Winter Neutrals with Sunset
Midnight type on Ice. Twilight for the heading, Ember for the small label, Dusk for the button.
Ember on Ice
A heading in Twilight
Afterglow is warm enough to be a panel without taking over the neutrals.
An Afterglow panel
Winter Neutrals with Harvest
Soil carries the heading. Straw is the panel. Canola is the button, and it stays the only bright colour.
Blood on Ice
A heading in Soil
Frost stays quiet underneath. Straw is the warm panel. Canola does the accent work.
A Straw panel
Winter Neutrals with Spring
Bud is the dark colour. Blossom is the panel. The neutrals keep the page from turning pink.
Bud on Ice
A heading in Bud
Blossom can sit behind a card. Petal is close to Ice, so it stays a surface, not an accent.
A Blossom panel
Spring with Sunset
Spring is the warm light. Sunset is the darker sky. The peach in Spring keeps it from turning into a second Sunset.
Ember on Petal
A heading in Twilight
Blossom and Primrose can sit behind a card. Afterglow is the warm light from Sunset when the page needs a second pale.
A Blossom panel
Harvest with Fishing
Soil and Deep water carry the type. Straw and Foam are the surfaces. Canola and Blood are the accents on the blues.
Blood on Foam
A heading in Deep water
A Straw panel can sit on Foam. Canola is the button. The blues stay cool so the yellow and the red stay readable.
A Straw panel