Embrly

The brand kit

One brand, one light world. This page is the ratified design system — the “Opal” palette, the flame mark and its gradients, the type, and the rules that keep every surface feeling like Embrly.

Logo

The flame mark

Three nested rings — plum, violet, cyan — forming a flame around a gem, set on the black app-icon tile. The canonical mark is the raster brand-mark.png (the same tile as the app icon and the email header); the ring vectors are animation-grade companions (they power the onboarding nestle), traced from the master.

Embrly flame mark
Embrly flame mark on espresso

Wordmark

Embrly

Fraunces italic, boysenberry. Always lowercase-e Embrly— never all-caps, never recolored. Mark left, wordmark right, gap of half the mark’s width.

Clearspace & minimum size

Keep clearspace equal to the inner ring’s height on all sides. Minimum sizes: mark 24 px tall on screen (16 px favicon contexts excepted), lockup 20 px wordmark height. Below that, use the mark alone. Ratified 2026-08-11.

Logo gradients

The three rings

Each ring carries a vertical (top → bottom) gradient. These stops are exact — they live in the ring SVGs and must not be re-picked from screenshots.

Outer ring — plum

The boysenberry family, deepened.

  • 0% · #8F2066
  • 45% · #6D004A
  • 100% · #43002B

Mid ring — violet

Violet falling into ultramarine.

  • 0% · #B06BD8
  • 50% · #8A5FE8
  • 82% · #2E6BF0
  • 100% · #1D48B8

Inner ring — cyan

The gem at the heart of the mark.

  • 0% · #06DFBE
  • 45% · #00B5A0
  • 100% · #0082C6

Assembled vector: /brand/vector-mark.svg— 330×400 canvas, rings registered outer → mid → inner. Animation-grade; for static print work, start from the raster master.

Signature gradient

The fire-opal flash

Lyra → Luna → boysenberry at 135°. The flash is a glow, not a wall: one flash moment per surface (hero moments, rings, the capture affordance) and never behind photography.

linear-gradient(135deg, #A8C3BC 0%, #AFA8C3 55%, #873260 130%)

Color

The Opal palette

Light surfaces use boysenberry for anything readable; Lyra and Luna are decorative only — their contrast is 1.5–2.1:1, measured, don’t argue.

Canvas

Opal white

#F2F6F4 · cream

Page background.

Paper

#FCFBFA · paper

Cards and inputs. Photos always sit here — near-neutral, no cast on hair.

Mist

#D4E2DE · shell

Section bands, tint cards, pressed states.

Line

#DDE7E3 · line

Hairline borders, soft fills.

Ink

Ink

#26201C · ink

Primary text.

Slate

#5D6B66 · clay

Secondary text.

Haze

#8D9C96 · fawn

Captions, placeholders, eyebrows.

Accent

Boysenberry

#873260 · copper

The primary. Everything readable — buttons, links, active states. 7.25:1 on opal white.

Lyra (sage)

#A8C3BC · sage

The flash’s green end. Decorative only — never text (1.55:1).

Luna (lavender)

#AFA8C3 · ember

The flash’s purple end. Same rules (2.09:1).

Espresso

#1A1412 · espresso

Reserved dark — OG cards, contrast strips.

Error

#C2402A · error

Errors only.

Typography

Two voices

Display — Fraunces

Your work, working for you

Headlines, screen titles, the wordmark (italic). Weight 500–600; italic is reserved for the wordmark and pull-quotes.

Sans — Inter

Body, UI, forms — everything that works for a living.

Regular for body, medium for emphasis, semibold for buttons.

The eyebrow style

10–12 px, uppercase, 0.2em+ tracking, haze.

Ratified 2026-08-11

Shape, depth, motion

These were consistent practice across the app and web; they’re now the rule.

Radii

  • 9999px — pills: buttons, chips, tags
  • 16px (rounded-2xl) — cards, tiles, banners
  • 12px (rounded-xl) — inputs, inner media

Depth

Borders, not shadows. Elevation is paper-on-opal-white plus a hairline line border. Drop shadows only on overlays (sheets, modals) — never on resting cards.

Spacing

4 px base grid. Card padding 20–24 px, section gaps 32 px on mobile and 80 px between landing sections.

Iconography

Line icons, 1.5–2 px stroke, round caps, drawn on a 24 px grid. Emoji are voice, not chrome: they may appear in copy the app “says,” never as UI affordances.

Motion

Calm and opacity-first: 200–300 ms ease-out for UI, slow breathing (8–10 s) for ambient glows. Always honor reduced-motion. Celebration moments (gems, kudos) are the only place motion gets theatrical.

Photography

Client work sits on near-neutral paper — never on sage, lavender, or mist, which shift perceived hair color. Portrait 4:5 is the default crop. Overlays on photos are scrims, not tints.

Rules of thumb

How it stays Embrly