brand

Two marks carry our identity: the chevron and the lockup. The library draws both itself, in the brand blue on the dark canvas, so they stay sharp at any size. Outside the browser, the app icon carries them.

the chevron

The › is the brand's mark. It reads like the prompt of a terminal: this is where something starts, and the way in.

The library draws it in three places: before the title of the home page, before the title of each tile group, and after the title of a tile that is a link or a button, when the pointer rests on it or it has focus. It also opens the lockup. A heading can start with the same mark, drawn as a › in the heading's own typeface and in the same blue.

• One colour. Always the brand blue, on the dark canvas. Code can give it another colour, but the brand says don't.
• Any size. Its line grows in proportion, with rounded ends and a rounded corner, so the mark keeps its weight from very small to very large.

As a section mark, as the way into a tile, and as the prompt at the start of a field:

the lockup

The chevron, the name written as a wordmark, and a cursor block, in one fixed arrangement. You choose its height, and its width follows.

• With cursor, the usual one: a blue block after the name blinks, on for half of each beat and off for the other half.
• Without cursor: the chevron and the name alone.
• Filled: a rectangle in the canvas colour behind the mark, like the image file. It only makes a difference away from the canvas, where it puts the canvas colour behind the mark.

when to use

• The lockup, once on a surface, where people need to know whose it is: the top of a start page, a sign-in screen, a splash screen, the top bar.
• The chevron, to lead a title or a section, as the portal and the tile groups do; as the prompt at the start of a field where people type commands; and as the way into a destination.

when to use something else

• As an arrow in a control, for next, expand, sort or a submenu. Use an arrow or a chevron from the icon set instead (see iconography): the brand mark isn't an arrow for the interface.
• In another colour, or on a light background. The chevron says brand, not state. For a state, use status.
• More than one cursor on a screen. The brand has one cursor, so show any further lockup without it.
• A blinking cursor that stays in view. In a header or a sidebar, turn the cursor off; see accessibility.

anatomy

The chevron:

1. Mark. One line bent into a ›, in a square.
2. Line. Its thickness grows with the size, with rounded ends and a rounded corner.

The lockup:

1. Chevron. In the brand blue, rounded.
2. Name. The wordmark, in JetBrains Mono, bold, in the grey of body text.
3. Cursor (optional). A tall blue block after the name.
4. Fill (optional). A rectangle in the canvas colour behind everything.

the app icon

The chevron and the letter n on the canvas, in a square with rounded corners: with the line icons, the only rounded shape in the system. The app icon comes as image files from 16 to 512 pixels, with the corners already in the image. Don't round anything else to match it. The files are on resources.

accessibility

• The chevron is a picture named “chevron”. Next to a title it is decoration, so hide it from assistive technology, as every use inside the library does.
• The lockup is a picture named by its wordmark. Inside a link, it gives the link that name; give the link a name of its own when it needs other words.
• Neither mark takes focus or listens to keys.

Today:

• The cursor blinks without end. When people turn on reduced motion, the style meant to hold it still doesn't reach this kind of animation, so a browser can keep it blinking. Turn the cursor off wherever the lockup stays in view: blinking that lasts more than five seconds next to other content needs a way to stop it (WCAG 2.2.2). On this site, the examples with a cursor have a pause button.

do and don't

brand files

• The brand guide: the brand's rules for people. The canvas, text and signal colours, the two typefaces, the space scale, square frames and the voice. It names the token file as the source of truth.
• The brand for agents: the same rules, shortened for AI agents. What the system is, which files to read first, the rules that can't be broken, and a one-line test of whether a screen is on brand.
• The tokens: the source of every value. When a colour in a brand file disagrees with them, the tokens win; the dim text grey, for one, changed in version 0.3.0.
• The lockup as an image file, and the app icon as images from 16 to 512 pixels.

These pages and the files say the same thing. Where they differ, trust the tokens and the components. Resources links to every file.

related

• Iconography: the line icons next to the marks, and the one rounded shape.
• Home & tiles: the chevron before the home page's title and every group's title.
• Top bar: the lockup at the top of every surface.
• Content & voice: the words around the marks.

specs

chevron

• Where the library draws it. Before the portal title (18px), before each tile group legend (14px), and after the title of a link or button tile on hover and focus (14px). Heading's chevron prop draws the same mark as a text > in the heading's font, also in --cloud-blue.
• Colour. Always --cloud-blue. Chevron takes it from its own class; its color prop can override it, and the brand says don't.
• Size. 16px by default, any size works. The stroke is 14% of the size, never under 1.5px (strokeWidth sets it in px), with rounded ends and corner, so the mark keeps its weight from 14px to 128px.
• Mark. One path, M5 3 L11 8 L5 13, in a 16-unit square, drawn in currentColor; rounded caps and join.

lockup

• Box. The chevron, the wordmark in JetBrains Mono 700 and a cursor block, in a 300 × 160 box. height sets the size (40px by default, which makes it 75px wide); the width follows the ratio. It mirrors the SVG file in assets/terminal/.
• Chevron. A 9-unit --cloud-blue stroke from (46, 50) to (76, 80) to (46, 110), rounded.
• Wordmark. 44-unit JetBrains Mono 700 in --fg-2, starting at x 100 on a baseline at y 100.
• Cursor. A 14 × 48 --cloud-blue block at x 240, on for half of a 1.05s cycle (the default); showCursor={false} turns it off.
• Fill. filled paints a --bg rectangle behind everything.

app icon and files

• App icon. PNG files from 16 to 512px, with the rounded corners baked in.
• brand/brand.md: the brand guide. brand/llm.txt: the same rules, condensed for language-model agents. tokens/tokens.json: the source of truth (--fg-dim changed in 0.3.0). assets/terminal/: the lockup as SVG. assets/icons/: the app icon as PNG, 16 to 512px.

accessibility

• Chevron is an image named “chevron”; next to a title, pass aria-hidden.
• Lockup is an image named by its wordmark.
• Under prefers-reduced-motion, the stylesheet hides the cursor's <animate> element, but CSS display doesn't apply to SVG animation elements, so the blink can carry on. Pass showCursor={false} wherever the lockup stays in view.