Brand guidelines · v0.5.6 · August 2026

Lore, for people making things about Lore.

Everything a launch video needs: what Lore is, how it looks, how it moves, how it talks, and the files. Every value on this page is lifted from the shipped app — nothing here is aspirational. If the app and this page ever disagree, the app is right; tell us.

Download the kit · zip Meet the companion

The creatures on this page are alive: they blink, breathe, look around, glance at your cursor, and notice when you click them. Nothing is a video.

The idea

It notices the stuff you'd forget, and lives in your notch.

Lore is a proactive assistant for the Mac. It reads what's already there — iMessages, calendar, mail, Slack — and speaks up on its own, a few times a day, before something slips: the reply you meant to send, the dinner that moved, the budget you promised by Friday.

What it is, in one breath

A small card in the MacBook notch that opens when Lore has something real, and a chat-first assistant underneath with one memory across conversations, notes, reminders and calendar. Hold ⌃⌥ anywhere — even in a full-screen app — and talk to it; it answers out loud, from the notch, in its own voice. Hold fn and it takes dictation and cleans it up.

Why it's different — four beats, in this order

Proactive, not summoned. Every other assistant waits for a prompt. Lore interrupts — at most a handful of times a day, hard cap — and only with something that would otherwise slip.
It lives where you already look. The notch, not a window. Present without being a destination. Nothing to open, nothing to check.
Your life is the input. It reads the same copy of your messages the Messages app does — on your Mac. The index lives there. Nothing is used for training.
It's someone, not something. Lore has a body: a small soft creature with two eyes and no mouth that looks at what you're doing, listens when you talk, and points at things. Setting it up is meeting it, not installing it.

The essence, three words

quietNear-black surfaces, hairline structure, one accent. Lore earns attention; it never grabs it. Stillness is part of the character.

personalFaces and first names everywhere. The founder greets you himself. Reminders are spoken the way a person leans in.

aliveNothing decorative moves, but what moves is genuinely alive: springs with mass, a mark that never repeats a shape, a creature that looks around.

The four rules — locked, not preferences

Your iMessages stay on your Mac. The index lives here. Only what's needed to answer a question ever travels — never used for training.
Quiet by design. It speaks up when something would slip, and shuts up the rest of the time. No feed, no badges.
You approve every send. Lore drafts; you say send. Nothing leaves in your name without your yes.
Free during the beta. No card, no trial clock. Twenty dollars a month once the beta ends — said up front.

The arc a first meeting should follow

“This feels premium.” → “Wait, that's adorable.” → “Oh wow, this can actually do things for me.”

That is the onboarding's emotional arc, and it's the launch video's too. Premium first (black, the mark, the music), then the creature, then proof — a real notice, a real reply, a real calendar fix.

The mark

Four circles melted into one liquid silhouette.

Not a logo animation — a creature's first form. Four circles on a 32-unit canvas, merged by a goo filter (blur, then an alpha threshold). White on dark, carrying its own soft halo. It drifts; it is never rotated, spun, bounced, or tweened between keyframes.

Geometry

circle	cx	cy	r
1	13	12	7.0
2	20	14	6.5
3	15	20	6.8
4	20.5	19	5.5

Canvas 0–32 on both axes; centre (16, 16); nominal reach 10.5 units. Goo filter: Gaussian blur σ 2.2, then alpha × 20 − 9. The path SVG in the kit is the same silhouette pre-computed (the union of the circles, radii smoothed), for tools that can't run a filter.

How it moves

Each circle's x, y and radius ride two sines — the second at the golden ratio of the first — so the four never come back into phase and the silhouette is a different shape every time you look. Amplitudes are large on purpose: ±2.9 units on a 32-unit mark is a lobe visibly swelling and retreating, not a shape jiggling in place.

At rest it is simply still. In motion it drifts. There is no third state — no spin, no pulse, no bounce, no wipe. If you animate it by hand, use slow overlapping sines with irrational ratios; better, record the living mark from the stage above on true black.

Colour, glow, clearspace

White on dark. The app icon is the mark white on black in the macOS squircle — never re-tinted.
The halo is the mark's own: a soft white shadow that tracks the silhouette. On the web: drop-shadow(0 0 10px rgba(255,255,255,.28)) drop-shadow(0 0 26px rgba(255,255,255,.18)). Composite with screen / add (plusLighter) — never paste it as an opaque box.
Clearspace half the mark's width on all sides. Minimum 16 px at 1× (32 px at 4K); below that use the mark alone, no wordmark.
The periwinkle mark exists (see lockups) and is the only recolour. No gradients inside it.

Don't

Put it on a light background — invert the page to dark instead. The brand is dark-first; there is no light mode.
Give it a face. The mark never has eyes; that's the companion's job. They are the same light in two forms — the cold open turns one into the other.
Rotate, spin, stretch, or keyframe it. Turning a shape is something done to it; the drift is what it does by itself.
Use it as a bullet, a pattern, or a watermark tile.

The shipped markup

<svg viewBox="0 0 32 32" width="64" height="64">
  <defs>
    <filter id="goo" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2.2" result="b"/>
      <feColorMatrix in="b" type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"/>
    </filter>
  </defs>
  <g filter="url(#goo)" fill="#fff">
    <circle cx="13"   cy="12" r="7"/>
    <circle cx="20"   cy="14" r="6.5"/>
    <circle cx="15"   cy="20" r="6.8"/>
    <circle cx="20.5" cy="19" r="5.5"/>
  </g>
</svg>

// one circle, one axis — two sines, the second at the golden ratio of the first
drift(t, rate, phase, amount) =
  amount * ( 0.62 * sin(t * rate + phase)
           + 0.38 * sin(t * rate * 1.618 + phase * 2.3 + 0.7) )

// the four tracks (rate · phase · amount), in 32-unit mark space
x1 = 13   + drift(t, 0.53, 0.0, 2.9)   y1 = 12 + drift(t, 0.61, 1.9, 2.6)   r1 = 7   + drift(t, 0.44, 3.4, 1.25)
x2 = 20   + drift(t, 0.67, 2.6, 2.7)   y2 = 14 + drift(t, 0.49, 0.8, 2.9)   r2 = 6.5 + drift(t, 0.58, 4.1, 1.3)
x3 = 15   + drift(t, 0.46, 5.0, 2.8)   y3 = 20 + drift(t, 0.72, 3.1, 2.5)   r3 = 6.8 + drift(t, 0.51, 1.2, 1.25)
x4 = 20.5 + drift(t, 0.75, 4.4, 2.6)   y4 = 19 + drift(t, 0.56, 2.2, 2.8)   r4 = 5.5 + drift(t, 0.63, 5.6, 1.15)

Wordmark & lockups

“Lore”, set beside the mark, in SF Pro Bold.

One lockup: horizontal, the wordmark at roughly 60% of the mark's height, with a gap of about a quarter of the mark's width. Sentence case, weight 700, tracking −0.02em. Never letterspaced, never outlined, never light.

Primary — white on groundThe default everywhere. Ground #0A0A0B or true black.Download 4K PNG

Accent — periwinkle markThe mark alone takes the accent; the wordmark stays white. One per piece.Download 4K PNG

Inverted — black on lightOnly when the context forces a light surface (a partner's white page). Not a brand choice.Download 4K PNG

End card — white on periwinkleA marketing end card. Never a UI surface, never behind text.Download 4K PNG

Proportions

Mark 72 → wordmark 44 px (≈ 60%), gap 18 px (≈ 25%). The footer of the site sets it 52 / 34 / 13. Align the wordmark's x-height to the mark's optical centre.

Where the mark goes alone

Anywhere under 16 px (app chrome, the menu bar item, the notch).
Centred compositions — an end card can be the mark alone, large, with the wordmark on its own line beneath at the same 60%. Ask before inventing a new lockup.
The site's footer runs “Lore” at 25vw as a cropped wall-painting — the wordmark as texture is allowed once, at the very end.

Don't

Letterspace, outline, or italicise the wordmark.
Set it in Inter on a Mac — SF Pro is on every Mac. Inter (−0.02em) is only for deliverables that must render off Apple hardware.
Use title case (“Lore For Mac”) or all caps anywhere outside eyebrow labels.
Put the wordmark on the iridescence or the beam.

Colour

Dark-first is not a theme. It's the identity.

Near-black surfaces, pure white type, one accent. Hairline borders carry structure; white glow carries state. Full colour exists in exactly two places, and both are moving light — never paint.

Surfaces — the stage

#0A0A0B

Ground--lore-bgrgb(10, 10, 11)

The page. Every screen's bottom layer. Not #000 — true black is reserved for the cold open's veil.

#131316

Sheet--lore-sheetrgb(19, 19, 22)

The content sheet the active tab welds into; screenshots and demos sit on it.

#141416

Surface--lore-surfacergb(20, 20, 22)

Cards, controls, the composer.

#1C1C1F

Raised--lore-raisedrgb(28, 28, 31)

Hover tier, elevated chips, menus.

Text

#FFFFFF

Text--lore-textrgb(255, 255, 255)

Headings and body. Pure white by ruling — #F5F5F7 read as dim on the sheet.

#86868B

Muted--lore-mutedrgb(134, 134, 139)

Secondary copy, captions, dates.

#5B5B60

Faint--lore-faintrgb(91, 91, 96)

Tertiary, disabled. Under AA for body text — chrome only.

The one accent

#8F9FF5

Periwinkle--lore-accentrgb(143, 159, 245)

The only non-monochrome UI colour. Links, the one primary CTA, NEW tags, progress, the unread dot. A scarce resource: once per viewport.

#5C70DB

Periwinkle, deep--lore-accent-deeprgb(92, 112, 219)

The same voice on unknown backgrounds — marks drawn over the user's own screen, where light-on-light disappears.

rgba(143,159,245,0.13)

Wash--lore-accent-washrgb(13% over ground)

Tinted fills behind accent elements; the active row; the icon tile.

The rule that keeps the whole thing coherent: periwinkle is a scarce resource. One accent element per viewport, per frame. If two things are periwinkle at once, one of them is wrong.

Structure vs. state — the two-material rule

1 · Hairline borders carry structure.rgba(255,255,255,0.09) — strong 0.14 — focus 0.55. Cards, dividers, pills. Always 1 px.

strongmediumfaint

2 · Glow carries state, on a 4 : 2 : 1 ladder.Strong 0.28 (something waiting for you — the notch, the listening orb) · medium 0.14 (focus) · faint 0.07 (hover). Never add a tier; never use glow as decoration.

Radii, spacing, shape

radius sm8

radius md10

radius lg14cards, sheets

pill999buttons, inputs, chips

notch corners13the real notch

panel corners20the expanded notch

Spacing runs 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64. Chrome tight, content spacious; sections breathe at 48/64. Nothing sharper than 8, nothing rounder than a pill.

Chroma is light in motion — the beam and the iridescence

Ask Lore anything…⌃⌥ to talk · fn to dictate

The beam is the border-light that runs the composer and the notch — the one chromatic surface. Its nine colours are positioned soft blobs hugging a border path, never a flat gradient fill. One beam per viewport. The app renders it natively on the notch from the same spec.

crimson#FF3264azure#288CFFgreen#32C850teal#1EB9AAviolet#6446FForange#FF7828magenta#F032B4purple#B428F0amber#FFA01E

135° · blue → lilac → pink → mint · 6–10% alpha

The iridescence — --lore-iridescence — is a 135° wash at 6–10% alpha: blue → lilac → pink → mint. Key surfaces only (the orb, the composer's ground), never section backgrounds.

The notch light. When the notch has something, it casts periwinkle down the screen: radial rgba(143,159,245,.46) at top-centre, screen blend, breathing on a 9 s clock. It only ever lightens what's under it.

Never use these palettes for buttons, text, charts, or section backgrounds. A flat rainbow anything is off-brand. If a scene needs energy, it gets the beam or the mark — not coloured paint.

The profile palette — six, tuned to one lightness

#8F9FF5

Periwinkle--lore-profile-periwinklergb(143, 159, 245)

The default — a profile nobody recoloured looks like the rest of Lore.

#7FC4A3

Sage--lore-profile-sagergb(127, 196, 163)

#E0B072

Amber--lore-profile-amberrgb(224, 176, 114)

#F0918C

Coral--lore-profile-coralrgb(240, 145, 140)

#6FBCD6

Teal--lore-profile-tealrgb(111, 188, 214)

#C297E8

Lilac--lore-profile-lilacrgb(194, 151, 232)

A profile's colour comes from this fixed set rather than a picker: each is tuned to the accent's perceived lightness, so no profile shouts louder than another at 13 px. Names, not hexes, are what the app stores. Each ships with a 13% wash.

Typography

SF Pro, sentence case, white.

In product and on the web: the system stack — SF Pro renders for Apple visitors, who are the audience. Headlines and the wordmark are 700; UI emphasis 600; body 400. Tracking −0.02em at display sizes, 0 otherwise. Sentence case everywhere, including headlines.

display52px · 700 · 1.1 · -0.02em

Hi. I'm Lore.

Hero headline only. Marketing and first-run — never inside the working app.

3xl38px · 700 · 1.15 · -0.02em