Brand Guidelines

UI

Surfaces and colour

Product interfaces use the same palette as everything else, but the roles change. Off white is the app ground, not cream: cream belongs to the marketing site and reads too warm behind dense information. White carries the cards, a warm grey groups them into panels, and the accents earn their place rather than decorate. Orange is the primary action and the live state, nothing else. Tan marks what is selected. Charcoal takes secondary actions and icon buttons.

Off white #f7f6f2 — the app ground
White #ffffff — cards and inputs
Warm grey #f1efea — panels that group cards
Orange #ff5200 — primary action, live state
Tan #f3c892 — selected state
Charcoal #1a1c20 — secondary action, icon buttons

Dashboard

A working reference, not a screenshot. Everything below is built from the brand tokens, so the type, colour and pictograms are the real thing at real sizes.

Preview
Thomas Gravesen TG

Building the agency of the future.

I want to start writing a blog I need to optimise some keywords I need to breakdown a report into a one page document
V 1.0
Start a new project

Apps

Content
Social, Ads, Blogs
SEO
Keywords, Re-write, Op…
Report advisor
Define, Analyze, Export
Growth
Forecast

Projects

View all
Lorem campaign 2024

Creating brand awareness for the Lorem brand for the yearly Q1 event.

Last active: 12:06 | 12/01/24
Ipsum

Creating February content for Ipsums daily blogs.

Last active: Live
Dolor report

Breaking down Dolors yearly report on social performance.

Last active: 22:43 | 09/01/24

Sessions

View all
business mentorships
Content TG AR
Lorem social posts
Content JM
Setup chat
Chat TG AR JM SP
seo tracker
SEO SP
The dark palette is derived, not designed. Every product screen so far is light. The dark set above is worked back from the brand palette, charcoal grounds and cream text with orange and tan unchanged, so it is a sound starting point rather than an agreed spec. Two things it exposes: the wordmark and brand mark need their reversed variants, and the pictograms have no reversed colourway at all, so they keep a light plate behind them. Both want deciding properly before dark ships.

Usage

Do

  • Keep orange for the primary action and the live state only
  • Use the tighter product radii, not the marketing ones
  • Sit the app on off white, and cards on white
  • Give pictograms room, at 48px or more
  • Swap to the reversed mark and keep pictograms on a light plate in dark
  • Use initials on brand colours for avatars

Don't

  • Use cream as the app ground
  • Put orange on more than one control in a view
  • Carry marketing pill buttons into the product
  • Shrink pictograms below 32px to serve as interface icons
  • Treat the derived dark palette as signed off