uier
uier

uier brand

How uier looks and sounds. This page renders from the @uier/brand package and the UI kit with the brand tokens applied, so it always shows the brand as it ships. The written rules are in BRAND.md; the code is in packages/brand.

Quiet, precise, rounded, and a little pointed.

The brand follows the product. Three principles decide most questions.

MinimalOne typeface, one accent, borders instead of shadows. Nothing on screen that is not doing work.
RoundedEvery corner is soft: 8 px on controls, 12 on cards, 16 on panels, full pills for the toolbar and pins.
PointedThe mark keeps one sharp corner so it can point at what you are reviewing. Copy is short and direct.

Name and voice

Say it on the page.

Review any live website by leaving comments directly on it. Every comment stays pinned to the element it is about, with the browser and viewport it was left from.

tagline · short description · long description, all in src/brand.ts
  • Always lowercase. uier, even at the start of a sentence. Never “Uier”, never “UIER”. Read “you-eye-er”.
  • Sentence case everywhere. No Title Case headings, no ALL CAPS labels, no exclamation marks.
  • Say what happens. “The comment stays attached to that element”, not “seamless” or “powerful”.
  • Only claim what the product does. No invented stats, customers or features.
  • Plain in running text. The name gets the same weight and colour as the words around it.

Ink on paper. One accent, kept for the review layer.

Neutral greys with no blue cast; dark mode is true black, like the toolbar. The values below are read from the stylesheet in the current theme, so switch the theme above to see both sets.

Background--backgroundpage
Muted--mutedmuted surface, hover rows
Border--borderborder, divider
Muted text--muted-foregroundcaptions, meta (≥ 4.5:1)
Secondary text--secondary-foregroundsupporting copy
Text--foregroundtext, icons
Primary--primarysolid buttons, pins
Blue--brand-accentthe accent (white text on it: 5.2:1)
Green--brand-successresolved
Amber--brand-warningwarning
Red--destructivedestructive
Selection--brand-selectioncommented text range
Where blue shows up:a selected text rangea focused controlan 3 unread countand a link.Primary buttons and pins stay ink. Blue is never a background.

Geist for everything. Geist Mono for what a machine wrote.

Loaded with next/font from the geist package. Three weights: 400 for reading, 500 for labels and buttons, 600 for headings. Sentence case, tabular figures for counts.

Say it on the page.display · 64 / 64 · −4% · 600
Comments, pinned to the elementh1 · 40 / 44 · −3% · 600
Review any live websiteh2 · 28 / 34 · −2% · 600
Resolved threads stay in the inboxh3 · 20 / 26 · −1.5% · 600

Open any page with review on, click the element you mean, and write. The comment stays attached to that element, with the viewport, browser and device it was left from, so the fix is never a guess.

body · 16 / 26 · 0 · 400
Shown in the sidebar, thread items and menus.small · 14 / 21 · 0 · 400
2 comments · 1 resolved · 4 min agocaption · 12 / 17 · 0 · 500 · tnum
uier.io/app?review=truemono · 13 / 20 · 0 · 400

Rounded, bordered, barely animated.

Radius grows with the surface. Borders separate, shadows float. Two levels of elevation only.

4checkbox, tag
6small button, menu item
8button, input
10large button (--radius)
12card, menu, popover
16sidebar, dialog, tile
24browser frame, hero media
fulltoolbar, pin, avatar, badge
Space4 px grid
  • 4icon to label
  • 8inside a pill, between buttons
  • 12list rows, menu padding
  • 16card and popover padding
  • 24between cards, dialog padding
  • 32section inner padding
  • 64between marketing sections
Controls are 32 (sm), 36 (md) or 44 (lg) tall. Touch targets never below 44.
Borders and elevationtwo levels
Resting1 px border, no shadow. Cards, inputs, sections, tables.
FloatingBorder plus 0 1px 2px 4% and 0 8px 24px 8%. Toolbar, popovers, menus, dialogs.
Focus: 2 px blue ring at 2 px offset, keyboard only.
Icons and motionLucide · 1.75 stroke
16 inline with text, 20 in buttons, 24 in the toolbar. Outlined only; the pin is the one filled shape.
  • 150ms ease-out enter and exit: fade plus 8 px slide.
  • 120ms hover and press: colour only, no scale.
  • none on page load. No bounces, parallax or gradient movement.

The signalco UI kit, with the tokens applied.

Real components from @signalco/ui-primitives. Solid is ink, outlined is the border, plain is nothing until hovered. Do not build parallel components.

Comments are stored per domain.
Open
Resolved
3
A
M

The review layer is always ink.

The toolbar, pins and inbox are what the product is. They stay black on any site they land on and never try to match it. Threads follow the system theme, because people read and type in them.

The pin: the mark on a 32 grid, ink fill, 2 px white ring, thread count inside.

Run the web app and the toolbar locally (pnpm dev) and open this page with ?review=true to see the real thing on top of it.

Guest 3F2A2h
on the page.

Will first-time visitors get what “the page” means before they scroll? “on the site” might land faster.

You35m

The line right under it says “live website”. Keeping it, it is the whole point.

Leave a comment…

A thread, open right where the comment was left. This one is on the headline.

Assets and where things live

Everything is generated from the mark and the constants; nothing is drawn twice.

  1. Change the value in packages/brand: tokens.css for colour and radius, src/brand.ts for names and copy, src/Mark.tsx for the shape.
  2. Update BRAND.md so the rule matches the value.
  3. Re-render the icons if the mark changed: pnpm -C packages/brand icons.
  4. Check this page. It renders from the same code, so it shows the change as it ships.

Original design exploration: a Claude Design canvas, October 2026 (private). Everything that matters from it is in BRAND.md.