Overview

Ember Brand Guidelines

The reference for the app and the site: foundations, components, page patterns, writing and accessibility. One reference value for each point.

Principles

Six rules that hold everything together.

One brand palette, two products
The ember palette, from 50 to 950, is the same in the app and on the site. The logo orange is ember-500; the neutrals are warm grays, and nothing else.
Text stays white on orange buttons
Large button ember-500, small button ember-700, white text. One primary button per screen, and the highlight effect is reserved for three site buttons.
Nothing floats without a reason
No shadow on buttons, cards, chips or segmented controls. Only three shadows, for floating panels: menu, dialog and footer.
Formal address and careful French
The app and the site use the formal "vous" in French, with no long dash, non-breaking spaces before ": ; ? !" and curly apostrophes.
44 px targets and visible focus
Every control is at least 44 px tall below 1,024 px. Focus is a 2 px ember-700 ring, offset by 2 px.
Shared tokens
Colors, shadows, durations and fonts come from a single preset, used by both the app and the site.

Each chapter is a page. The rail on the left lets you move from one to the other.

Brand files, ready to use.

Complete brand assets
ZIP: logos, colors (text, JSON, CSS), presentation texts, README (English) and LISEZMOI (French)
Download
Color symbol
PNG, transparent background, 622 × 571 px
Download
White symbol
PNG, transparent background, 622 × 571 px
Download
Complete palette in CSS
Variables --ember-50 to --ember-950 and --neutral-50 to --neutral-950
Download
Complete palette in JSON
Same values, for a tool or a script
Download

Fonts: Satoshi and Inter can be downloaded from their publishers.