logocene

Sunday Current brand guidelines

Sunday Current
TypeAI pick
Fraunces / Inter
ColourAI pick
sunday-current-2.
people inside cafe
Brand guidelinesVersion 1.0

Coffee and breakfast, unhurried

Food & Drink
Sunday CurrentChapter 01

Brand

The name, the line, and how to use this guide.

01.1 Overview

About Sunday Current

This guide sets out how the Sunday Current identity works: the logo, colour, typography and how they come together.

Follow it and everything, from a business card to a website, looks like it came from the same place.

Start with the logo, then colour and type, before any layout.

Coffee and breakfast, unhurried

Name
Sunday Current
Category
Food & Drink
Typefaces
Fraunces and Inter
Palette
Sunday current 2
Sunday CurrentChapter 03

Colour

The palette, the values, and which combinations to set type in.

03.1 Colour

Palette

Five colours, used in roughly these proportions. Surface sets the page, primary carries the brand, ink is for text, and secondary and accent support and highlight.

Surface
#F1F3F5
38%
Primary
#1A3351
24%
Ink
#1A3351
14%
Secondary
#D6DAE0
13%
Accent
#7A899A
11%
03.2 Colour

Colour values

Use HEX or RGB on screen. CMYK values are approximate conversions: print colour depends on the press and the paper, so ask your printer for a proof.
  • Primary
    HEX
    #1A3351
    RGB
    26, 51, 81
    HSL
    213, 51%, 21%
    CMYK
    68, 37, 0, 68
    On surface 11.5:1 · AAA
  • Secondary
    HEX
    #D6DAE0
    RGB
    214, 218, 224
    HSL
    216, 14%, 86%
    CMYK
    4, 3, 0, 12
    On surface 1.3:1 · shapes only
  • Accent
    HEX
    #7A899A
    RGB
    122, 137, 154
    HSL
    212, 14%, 54%
    CMYK
    21, 11, 0, 40
    On surface 3.2:1 · large text only
  • Surface
    HEX
    #F1F3F5
    RGB
    241, 243, 245
    HSL
    210, 17%, 95%
    CMYK
    2, 1, 0, 4
    Ink on it 11.5:1 · AAA
  • Ink
    HEX
    #1A3351
    RGB
    26, 51, 81
    HSL
    213, 51%, 21%
    CMYK
    68, 37, 0, 68
    On surface 11.5:1 · AAA

03.3 Colour

Tints

Tints mix each colour toward white, for backgrounds, borders and charts. Shades, on the rows below, mix toward black and stop short of it. Keep text on a step that passes contrast.
Primary
100#1A3351
80#435872
60#6E7F94
40#9CA8B7
20#CDD3DA
10#E6E9ED
Secondary
100#D6DAE0
80#DEE1E6
60#E6E9EC
40#EEF0F3
20#F7F8F9
10#FBFBFC
Accent
100#7A899A
80#93A0AE
60#ADB7C1
40#C8CED6
20#E3E6EA
10#F1F3F5
Surface
100#F1F3F5
80#F4F5F7
60#F7F8F9
40#F9FAFB
20#FCFDFD
10#FEFEFE
Ink
100#1A3351
80#435872
60#6E7F94
40#9CA8B7
20#CDD3DA
10#E6E9ED
Ink shade
100#1A3351
80#19314F
60#18304D
40#172E4A
20#172D49
10#152C46
Primary shade
100#1A3351
80#19314F
60#18304D
40#172E4A
20#172D49
10#152C46
03.4 Colour

Colour pairings

Body text needs a contrast of at least 4.5:1 (AA). Large headings, 24 px and up, can go down to 3:1.

Pairs marked ✕ are for shapes and decoration only, never for text.

Contrast of each palette colour as text (columns) on each palette colour as background (rows)
BackgroundPrimarySecondaryAccentSurfaceInk
OnPrimarySame colour
Secondary on primary: 9.1
Accent on primary: 3.6
Surface on primary: 11.5
Ink on primary: 1.0 , fails
OnSecondary
Primary on secondary: 9.1
Same colour
Accent on secondary: 2.5 , fails
Surface on secondary: 1.3 , fails
Ink on secondary: 9.1
OnAccent
Primary on accent: 3.6
Secondary on accent: 2.5 , fails
Same colour
Surface on accent: 3.2
Ink on accent: 3.6
OnSurface
Primary on surface: 11.5
Secondary on surface: 1.3 , fails
Accent on surface: 3.2
Same colour
Ink on surface: 11.5
OnInk
Primary on ink: 1.0 , fails
Secondary on ink: 9.1
Accent on ink: 3.6
Surface on ink: 11.5
Same colour

Swipe for more

Sunday CurrentChapter 04

Typography

The two typefaces and the sizes they are set at.

04.1 Headings

Fraunces

Fraunces sets the name, headlines and short display lines. Use it at Semibold with tight line spacing.

Fraunces on Google Fonts (opens in a new tab)

SIL Open Font License 1.1. Free for commercial use, including in logos, apps and print.
Semibold 600
04.2 Text

Inter

Inter is for paragraphs, captions, buttons and anything people read at length. Use it at Regular, with generous line spacing.

Inter on Google Fonts (opens in a new tab)

SIL Open Font License 1.1. Free for commercial use, including in logos, apps and print.
Regular 400

Coffee and breakfast, unhurried. Sunday Current writes in Inter: clear, even and easy to read, from the first line of a website to the small print on a receipt.

04.3 Typography

Type scale

Five sizes cover almost everything. Each step is roughly 1.4 times the one below it; do not add sizes in between.
Display
Fraunces 600 · 56/67
Coffee and breakfast, unhurried
Heading
Fraunces 600 · 40/50
Welcome to Sunday Current
Subheading
Fraunces 600 · 28/32
A short section heading
Body
Inter 400 · 16/24
Body text at 16 px with 1.5 line spacing keeps long reads comfortable on any screen.
Caption
Inter 400 · 12/17
Captions, labels and small print
Sunday CurrentChapter 05

Graphic elements

Icons, a pattern, and the photography to aim for.

05.1 Graphic elements

App icon and avatar

Where space is small and square, use the symbol alone. On app icons it sits on primary at a little over half the icon width; on avatars and profile pictures, on surface.

iOS · 1024 px
Android · adaptive
Avatar · 400 px
Sunday Current
sundaycurrent.com
Favicon · 32 and 16 px

05.2 Pattern

Symbol upright on an offset grid, mirrored on alternate columns. For packaging, backgrounds and merchandise, never behind text.

05.3 Graphic elements

Imagery

Natural light, real places and real people. Keep rooms neutral and let brand colour appear on one object or a single overlay.

Photos here are samples from Unsplash, to show the direction.

Sunday CurrentChapter 06

Applications

The identity on a screen, on paper, and in a place.

Campaign

round brown wooden tables beside black leather sofa
Campaign · photography
06.2 Applications

Digital

On screen the logo sits in the corner, small, and the brand colour is reserved for one action.
Website · 1440 desktop
Instagram post · 1080 × 1350
06.3 Applications

Print

In print, keep the clear space and stay above the minimum size. The card is 85 × 55 mm; the letterhead is A4.
Business card · 85 × 55 mm
Letterhead · A4
06.4 Applications

In the world

Outdoors and on a product, the logo is one element among the photograph. The room stays neutral.
Poster · in situ
Label · packaging
Your turn

Make one like this

This is an example brand. Describe your business to explore nine logo concepts, each with colours, fonts and a guide like this one. Your first watermarked preview is free; download credits start at $9.99 for 10.

  • Logo symbolSVG in colour, black and white
  • Logo symbolPNG at 512, 1024 and 2048 px
  • palette.json, palette.cssThe five colours as code
  • FONTS.txtBoth typefaces, with links
  • LICENSE.txtCommercial use for your brand
Make mine like this

Sample photos by Petr Sevcovic, 99.films, Robert Bye, Caramel, Phil Desforges, OhTilly, Oguz Tombul on Unsplash. Not included in the download.