logocene

Sunday Current brand guidelines

Sunday Current
TypeAI pick
Fraunces / Inter
ColourAI pick
sunday-current-4.
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 4
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
#F1F4F6
38%
Primary
#1D4261
24%
Ink
#1D4261
14%
Secondary
#D6DDE3
13%
Accent
#7C91A3
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
    #1D4261
    RGB
    29, 66, 97
    HSL
    207, 54%, 25%
    CMYK
    70, 32, 0, 62
    On surface 9.5:1 · AAA
  • Secondary
    HEX
    #D6DDE3
    RGB
    214, 221, 227
    HSL
    208, 19%, 86%
    CMYK
    6, 3, 0, 11
    On surface 1.2:1 · shapes only
  • Accent
    HEX
    #7C91A3
    RGB
    124, 145, 163
    HSL
    208, 17%, 56%
    CMYK
    24, 11, 0, 36
    On surface 3.0:1 · shapes only
  • Surface
    HEX
    #F1F4F6
    RGB
    241, 244, 246
    HSL
    204, 22%, 95%
    CMYK
    2, 1, 0, 4
    Ink on it 9.5:1 · AAA
  • Ink
    HEX
    #1D4261
    RGB
    29, 66, 97
    HSL
    207, 54%, 25%
    CMYK
    70, 32, 0, 62
    On surface 9.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#1D4261
80#48657F
60#73899E
40#A0AFBE
20#CED6DE
10#E6EBEE
Secondary
100#D6DDE3
80#DEE4E9
60#E6EAEE
40#EEF1F4
20#F7F8F9
10#FBFCFC
Accent
100#7C91A3
80#95A6B5
60#AFBCC7
40#C9D2DA
20#E4E8EC
10#F1F4F6
Surface
100#F1F4F6
80#F4F6F8
60#F7F8FA
40#F9FBFB
20#FCFDFD
10#FEFEFE
Ink
100#1D4261
80#48657F
60#73899E
40#A0AFBE
20#CED6DE
10#E6EBEE
Ink shade
100#1D4261
80#1A3B58
60#163550
40#132E46
20#0E273C
10#0A1F30
Primary shade
100#1D4261
80#1A3B58
60#163550
40#132E46
20#0E273C
10#0A1F30
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: 7.6
Accent on primary: 3.2
Surface on primary: 9.5
Ink on primary: 1.0 , fails
OnSecondary
Primary on secondary: 7.6
Same colour
Accent on secondary: 2.4 , fails
Surface on secondary: 1.2 , fails
Ink on secondary: 7.6
OnAccent
Primary on accent: 3.2
Secondary on accent: 2.4 , fails
Same colour
Surface on accent: 3.0 , fails
Ink on accent: 3.2
OnSurface
Primary on surface: 9.5
Secondary on surface: 1.2 , fails
Accent on surface: 3.0 , fails
Same colour
Ink on surface: 9.5
OnInk
Primary on ink: 1.0 , fails
Secondary on ink: 7.6
Accent on ink: 3.2
Surface on ink: 9.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.