Brand

Logo

A Butter Yellow square and a lowercase wordmark. The square is a highlighter mark, the smallest sign that a passage is worth returning to. There is no pen, cursor, spark, or AI symbol, and there never will be.

Construction

The wordmark is Sora 750 with −0.055em tracking in Midnight; the marker is a perfect brand-500 square with no radius, border, or internal symbol. Scale the marker, gap, and type together, never one in isolation.

Inline horizontal lockup
Marker20u square · brand-500
Gap17u
WordmarkSora 750 · −0.055em · ink-900
Use the packaged assets.

The SVGs embed a Sora 750 subset, so they render correctly everywhere. Construct the lockup live only with logo/logo.css, which loads the full variable font.

Variants

The lockups carry the full name. For small surface identifiers, the app tab reduces Inline to the Butter Yellow marker and places it on a fully squared field. The same marker stays legible on Midnight and paper; the site tab keeps its separate Midnight marker so product and marketing remain distinct.

Primary horizontal lockup
HorizontalNavigation, documents, email
Inverse horizontal lockup
Horizontal inverseOn ink-900 or photography
Stacked lockup
StackedSquare formats, centered title pages
Butter Yellow app tab on a squared Midnight field
App tab on MidnightButter Yellow marker on a dark square field
Butter Yellow app tab on a squared paper field
App tab on paperButter Yellow marker on a light square field
Midnight site tab on a squared paper field
Site tabMidnight marker on a paper square field
Keep the field quiet.

Use the 512px square exports with a 224px marker, leaving 144px of breathing room on every side. The field stays fully squared for social profiles; let a platform apply its own crop or mask instead of baking a radius into the artwork.

App icon and favicons

The square profile field stays crisp from a 96px app icon down to a 16px tile, and platforms may mask the field into a circle. Browser tabs are the exception: the product tab carries the bare marker in Butter Yellow and the marketing site tab carries it in Midnight, swapping to paper under a dark browser theme, so the two surfaces stay distinct when pinned side by side. The documentation site uses the same Butter Yellow square on a paper field.

96
64
32
16
circle
paper
app tab
site tab

Clear space and minimum size

For lockups, let x equal the yellow marker width. Keep at least 0.75x of clear space on every side; prefer 1x in marketing layouts. For profile tiles, use the 512px square export with its 224px marker and full-bleed field.

Logo minimum sizes
AssetDigital minimumPrint minimum
Horizontal lockup96px wide25mm wide
Stacked lockup72px wide20mm wide
Tab marker16px4mm

Incorrect uses

The lockup ships finished. Anything that alters its geometry, color, or type is out.

Don't round the Butter Yellow marker or the exported profile field. Let a social platform apply any crop or mask outside the artwork.
Don't stretch, rotate, skew, or crop either element.
Don't recolor the marker with a status or question-type color.
Don't substitute another typeface or capitalize the wordmark.

Assets

Everything ships from design-system/logo/. Download the square profile tiles as SVG for vector use or JPG for platforms that require a raster image.