Afterglow Brand Guide

Afterglow

One fragrance in four stages, from the last of the sun until it is dark.

The wordmark

There is no drawn logotype. The wordmark is Instrument Serif, widened to 150%.

Afterglow

Instrument Serif 400 at 150% width, tracking 0. Clear space is the cap height of the A on every side. Minimum 96 px on screen, 24 mm in print.

Use it like this

DoAfterglow

On black

#EEECEA, the default. Gold of last light also passes.

DoAfterglow

On gold

#080808 only. Nothing light sits on gold.

DoAfterglow

On rose

#EEECEA. Gold and #C0C0C0 pass at wordmark size.

DoAfterglow

On deep violet

#EEECEA or gold of last light.

DoAfterglow

On the fall

#EEECEA at full size, over after gold or deeper.

The fall

The brand’s four colours, called stages, run from sunset into night, each darker than the last at the same intensity. In order, falling to black and ending on a sliver of magenta, they make the fall, the brand’s gradient. Build it from these values, never by eye.

Gold to violet. Never reversed.

#D8B2600%#BC6F4C30%#893A5060%#341D5E84%#BF15B7100%

The four stages

Gold of last light

#D8B260 · L 0.781

Text, logo, lines

After gold

#BC6F4C · L 0.619

Text, logo, lines

Rose

#893A50 · L 0.461

Backgrounds only

Deep violet

#341D5E · L 0.301

Backgrounds only

Neutrals and surfaces

Ground

#080808 · L 0.134

Surface, recessed

#141414 · L 0.191

Surface, raised

#2B2B2B · L 0.289

Muted

#C0C0C0 · L 0.808

Text

#EEECEA · L 0.944

Borders are a hairline of #C0C0C0 at 22% opacity. A stage colour never stands in for a neutral, and a neutral never stands in for a stage.

Art direction

One light source, and it is falling.

The palette describes light at one hour of one evening. Shoot to match it; never grade toward it afterwards.

Across a set, warm to cool, never back

Two faces, one scale

Instrument Serif for headings and the wordmark, Space Grotesk for everything else. Both are free in Shopify’s font library. Each size is 1.25 times the one below it.

Display · Instrument Serif 400 · headings and the wordmark

Afterglow

Body · Space Grotesk 400 · everything else

The light only ever deepens.

Role	Screen	Print	Leading	Tracking
Display	39.06–61.04 px	36–72 pt	1.02	−0.015 em
Heading	31.25 px	18–24 pt	1.1	−0.01 em
Body	16 px	9.5–11 pt	1.55	0
Caption	12.8 px	7–8 pt	1.45	0.08 em
Label	12.8 px uppercase	7 pt uppercase	1.3	0.12 em

Grid and the one rule

Twelve columns on screen and in print. Every space is one of eight steps from 4 to 64 px.

The one rule

The light only brightens where the ember is.

Everywhere else it only deepens. Hover, focus and active states darken, never lighten. In print and film, no panel or frame is lighter than the one before it. In code, no state is lighter than its resting state, so a developer can check it.

Radius

0

Square corners on everything.

Shadow

none

Depth comes from the two surface colours, never from a shadow.

Motion

450 ms

Eases in and out and stops where it lands, with no bounce. cubic-bezier(0.2, 0, 0.2, 1).

19:12

Gold of last light

#D8B260 · L 0.781

The last direct sun: warm, low and close to the skin. A set opens here.

19:40

After gold

#BC6F4C · L 0.619

Copper and terracotta just after the sun drops. Skin, walls and sand still hold the heat.

20:15

Rose

#893A50 · L 0.461

Wine-rose as the warmth fades, the light bouncing off walls and skin.

21:30

Deep violet

#341D5E · L 0.301

Blue-violet night with one warm source at most. A set ends here.

The ember

The one accent of contrast. It follows the cursor in the colour of the page beneath it, and goes out when the cursor stops.

Type, panels, colour and photographs catch its light on the side facing it. Nothing is cast.

Never a shadow, a dark pattern, a piece that breaks off, a stepped edge, or a page that needs it to render.

Afterglow

LiveMove, and it lights. Stop, and in 0.7 seconds it goes out.#321C5B → #5304E4

A frame cut from the set — A frame rejected from the set. Cold where the brand is warm, lit from everywhere through water, blue from edge to edge. Nothing in it falls, and nothing in it deepens.

Use and misuse

Five rules from the art direction, each shown right and wrong. The full rules are on page 17. The tiles are diagrams. The photograph is a real frame rejected from the set.

Do

Don’t

One source

One low, warm source. Not a second light.

Do

Don’t

Light that falls

Light rakes across and falls away. Not flat and even.

Do

Don’t

Brightness limit

The brightest quarter stops at gold. Not white highlights.

Do

Don’t

Graded to the stages

Shadows and highlights land on stage colours. Not on grey.

Do

Don’t

Exposed at capture

Shadows stay deep, exposed right in camera. Not lifted in post.

Digital and print

What a storefront is mostly made of. Press notes are on page 18.

Product card

Photographer unknown

Afterglow

$180

Card, 85 × 55 mm

Afterglow

Label face

Afterglow

Eau de parfum · 50 ml

Poster, 2:3

Afterglow

Voice

Unhurried and physical. It names heat, light, breath and skin.

It describes a sequence, because the product is a sequence. Certain without pushing: the brand does not argue for itself, and assumes you will understand it if you are shown it in the right order.

#D8B2600%#BC6F4C30%#893A5060%#341D5E84%#BF15B7100%

Gold of last light

OKLCH: 0.781 0.110 84.9
CMYK: 0 18 56 15
On #080808: 9.97:1
On #141414: 9.17:1
On #2B2B2B: 7.05:1
#EEECEA on it: 1.70:1

After gold

OKLCH: 0.619 0.110 44.7
CMYK: 0 41 60 26
On #080808: 5.26:1
On #141414: 4.84:1
On #2B2B2B: 3.72:1
#EEECEA on it: 3.23:1

Rose

OKLCH: 0.461 0.110 5.0
CMYK: 0 58 42 46
On #080808: 2.66:1
On #141414: 2.44:1
On #2B2B2B: 1.88:1
#EEECEA on it: 6.40:1

Deep violet

OKLCH: 0.301 0.110 295.2
CMYK: 45 69 0 63
On #080808: 1.41:1
On #141414: 1.30:1
On #2B2B2B: 1.00:1
#EEECEA on it: 12.01:1

Chroma is flat at 0.110 on every stage. The ember is the one exception, an accent of contrast that raises the chroma of the colour it sits on.

Each ratio is the contrast against that background. Body text needs 4.5:1 and large text 3:1. CMYK is for proofing only. Pantone matches will be added after the first print proof.

Gold to violet, top to bottom or left to right. Never reversed, because the one thing the ramp says is that the light deepens.
On screen, blend it in sRGB; any other colour space shifts the middle colours. For print, build the file from the same stops.
The four stages fall to black, #080808, at 95%, then to a sliver of magenta, #BF15B7, over the last 3%. No stop may be added, moved or removed.
No type under 24 px sits directly on it. Larger type must reach 3:1 against the darkest point it crosses.

4xl Deepening 61.04 px · 3.815 rem

3xl Deepening 48.83 px · 3.052 rem

2xl Deepening 39.06 px · 2.441 rem

xl Deepening 31.25 px · 1.953 rem

lg Deepening 25 px · 1.562 rem

md Deepening 20 px · 1.25 rem

base Deepening 16 px · 1 rem

xs Deepening 12.8 px · 0.8 rem

Measure	Screen	Print
Columns	12	12
Gutter	24 px	4 mm
Margin	32–64 px	12 mm
Baseline	8 px	4 mm
Max measure	58 ch	58 ch

2xs4 pxxs8 pxsm12 pxmd16 pxlg24 pxxl32 px2xl48 px3xl64 px

One light source, and it is falling.
Images are made between 19:12 and 21:30, or lit to look as though they were.
No more than a quarter of an image is brighter than gold of last light, L 0.781.
Check it on the file: in a lightness histogram, the brightest quarter sits at or below L 0.781.
Warm to cool across a set, never back.
In a set, each image runs cooler than the one before it, gold first and violet last.
Grade toward the stages rather than to neutral.
Shadows and highlights land on the stage colours, not on grey.
Nothing is brightened in post.
Exposure is set in camera. A frame that needs lifting afterwards is not used.

Parts: Three equilateral triangles of side S, and a cap
Gap: 0.16 S, square to the slope
Cap: 0.23 S wide, 0.27 S high, 0.26 S above the peak
Stroke: 0.04 S, mitred, no fills
A serifs: 0.31 of the side, inward from each foot
G: turns in at 0.42 from the point; serif 0.2 of the side
Opening: 0.38 of the side, the same in the A and the G
Minimum: 48 px wide on screen
Clear space: the bottle cap’s height, 0.27 S, on every side

Five ways to break it

Don’tAfterglow

Recolour

Only in the colour pairs that pass on page 15.

Don’tAfterglow

Narrow it

Always 150% wide. Never the face’s own width, never wider.

Don’tAfterglow

Outline

No stroke, shadow or glow.

Don’tAfter
glow

Stack

One line. The word never breaks.

Don’tAfterglow

Substitute

No other typeface. If the font is missing, place it as an image.

Button, rest and hover

Add to cart Add to cart

On hover the button darkens, from L 0.781 to 0.630. It never lightens. The light only brightens where the ember is.

Surface steps

Recessed #141414

Raised #2B2B2B

Production

The fall prints as a four-colour build or a gradient mesh. Two spot inks cannot hold the middle of the ramp.
Uncoated stock shifts the ramp cooler and flattens the violet end. Proof on the stock it will print on, not the printer’s standard paper.
Banding is how a long gradient fails on paper. At print size, no flat band may be wider than 25 mm.
No placed image has more than a quarter of its frame brighter than gold, L 0.781. Checked on the file, not on the proof.
No varnish or foil on the fall. A glossy finish brightens wherever the light catches it, which breaks the one rule.

Where the rules stop

Product copy uses this voice. Cart, checkout, shipping notices, legal and safety copy are plain and fast. The atmosphere stops there on purpose: on a payment form or a warning label, it would only get in the way.

Elsewhere

The full voice guide, with word lists and the tone for each page, is a separate document available from the brand owner: voice-tone.md. Art direction for the launch event is in the brief and applies to that night only. Nothing in it binds the brand.