You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat(ui): finish the move to Geist: numbers, 13px chrome, sentence-case labels - #2565
#2557 swapped the interface to Geist, but the type decisions around it were still the ones made for a monospace: lined-up numbers were forced back to Geist Mono, controls sat at 14px beside a 12px sidebar, and labels were uppercase overlines everywhere except table heads. This PR finishes the move. It is tokens, kit styles, one shell class and the label strings that relied on the old uppercase transform.
What changes
Numbers stay in Geist. The base rule that sent every tabular-nums element to Geist Mono is removed. A sentence with a number in it no longer changes face halfway, and tabular figures still line columns up. Log lines, ids and code keep mono because they ask for it (font-mono, mono on typography). The kit pieces that set a quantity in mono follow: the numeric table cell, latency and error rate values, filter chip counts, chart legends, the nav count.
Stat figures default to the display face.statFigure takes mono: true for a machine readout.
Chrome is 13px. Kit controls (buttons, inputs, selects, tabs, toggles, field labels) step down from 14px on desktop; sidebar rows and breadcrumbs step up from 12px. Phone sizes are unchanged.
Labels are sentence case. The eyebrow kit drops its uppercase overline and goes up one size step (10px to 11px, 11px to 12px). The sidebar group label, the key-value label and the command palette group label follow. Uppercase stays on machine tags: the mono eyebrow, badge tag, log levels. Service map node labels, the code block language and the where-autocomplete kind move to the mono eyebrow; five labels written in lowercase are capitalised.
The top bar is 48px, down from 64px (apps/web only; Maple Local has no desktop top bar). The service map's viewport height follows.
The where-clause highlight overlays take their textarea's 13px, so highlighted tokens stay under the caret.
docs/design-rules.md states the three rules. The isCardTitle option on statRailItem only added the uppercase, so it is removed.
Reversal to note
#2557 kept lined-up numbers in Geist Mono on purpose. This PR undoes that: the split-face sentences it caused read as a bug, and Geist's tabular figures give the same column alignment. apps/landing imports the same tokens, so its tabular-nums text goes back to the face it had before #2557.
Not in this PR
About 290 page-level call sites still ask for mono on a plain quantity (service map node figures, the deltas on Overview, the Top operations rows). Each needs a look to tell a quantity from machine text; a follow-up sweeps them.
Before and after
Lab pages over fixture data, dark theme, 1440 wide at 2x.
Tests: 916 in apps/web (shell, overview, services, traces, errors, page kit) and 401 in packages/views (ui, charts, service map) pass.
Seen on 13 lab pages in dark and 4 in light, and on the signed-in preview: 18 pages on the first build, 6 again after the fixes. Details and what was not covered are in the preview comment below.
…se labels
The Refine look swapped the face, but the type decisions around it were still
the ones made for a monospace.
- Numbers stay in Geist. The base rule that sent every `tabular-nums` element to
Geist Mono is gone, so a sentence with a number in it no longer changes face
halfway. Tabular figures still line columns up. Log lines, ids and code keep
mono because they ask for it.
- The stat figure defaults to the display face.
- Chrome is 13px: kit controls step down from 14px, sidebar rows and breadcrumbs
step up from 12px.
- Group, column and stat labels are sentence case. The eyebrow drops its
uppercase overline (the mono variant keeps it), and the sidebar group label,
the key-value label and the command palette group label follow.
- The top bar is 48px, down from 64px.
No actionable comments were generated in the recent review.
Walkthrough
Typography rules and shared UI styles are updated across controls, labels, and navigation. Eyebrow variants use revised case and sizing, and stat figures default to the display face. Application stat labels and top-bar height also change.
The design rules and token comments describe updated typography conventions. Eyebrow variants use revised sizes and case, and omitted mono now selects the stat display face. Heading descriptions use eyebrow terminology.
Shared controls, navigation, chart headers, and command-group labels use updated text-size, weight, case, or tracking classes.
Application stat labels and shell apps/web/src/page/kit/stat-rail.ts, apps/web/src/page/overview/view-usage.ts, apps/web/src/page/investigations/detail/view-verdict.ts, apps/web/src/page/settings/billing/view-cycle.ts, apps/web/src/shell/view-topbar.ts
The stat rail removes its card-title option and associated conditional label styles. Callers stop passing the option, a verdict figure relies on the default face, and the top bar height changes.
This is a visual typography update with smaller control text, sentence-case labels, and a shorter top bar. No functional or data risk was found, and the author reports typechecks, lint, and tests passing.
Pre-merge checks: 4
Check name
Status
Explanation
Title check
The title is 'feat(ui): finish the move to Geist: numbers, 13px chrome, sentence-case labels'. It matches the main changes in the changeset. The diff switches numeric figures to the Geist display face…
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Description Check
Check skipped - CodeRabbit’s high-level summary is enabled.
Full details: Title check
Explanation
The title is 'feat(ui): finish the move to Geist: numbers, 13px chrome, sentence-case labels'. It matches the main changes in the changeset. The diff switches numeric figures to the Geist display face and removes the mono base rule. It moves kit and chrome text from 14px and 12px to 13px (text-ui). It changes eyebrow and label styling to sentence case, with uppercase kept for machine tags. The title is specific and concise, and it names the primary change.
Finishing Touches
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 0 remain after this review.
- Kit controls take 13px without a hard line height (`sm:text-ui`, not
`sm:text-ui/5`), so a caller's `leading-*` on a textarea applies again. The
where-clause highlight overlays follow their textarea's size; at 14px over a
13px textarea the coloured tokens drifted from the caret.
- Kit pieces that set a quantity in mono no longer do: the numeric table cell,
latency and error rate values, filter chip counts, chart legends and the nav
count. A table row reads in one face.
- Machine tags that relied on the uppercase transform take the mono eyebrow:
service map node labels and runtime tags, the database panel badge, the code
block language, the where-autocomplete kind.
- Labels written in lowercase for the old transform are capitalised.
- The sidebar's large row (org switcher) is 13px like the rows under it, and
the eyebrow field label keeps 12px on desktop.
- The service map fills the viewport under the 48px top bar.
🟢 Confidence 10/10 · safe to merge. Token and kit-style edits only, with every impacted call site read at this head and the earlier size: "lg" sidebar defect now fixed. no findings · tests not needed · risk medium
Finishes the Geist type pass: drops the global tabular-nums→mono and text-figure→sans rules, moves chrome to 13px text-ui, and takes uppercase off the eyebrow kit while migrating the call sites that relied on it. Contained to tokens, kit styles and label copy; safe to merge.
tokens.css no longer forces font-mono on tabular-nums or font-sans on text-figure
Kit controls move to sm:text-ui (13px); sidebar rows and breadcrumbs go to text-ui
eyebrow overline/label become sentence case at 11px/12px; mono keeps the uppercase tag
statFigure defaults to the display face and statRailItem.isCardTitle is gone
Fixed since the last review
✅ F1 · size: "lg" keeps text-xs, so the org switcher row stays 12px beside 13px rows
34823ad · What was checked, coverage and telemetry details are on the Maple / review check. Reply "won't fix" to dismiss a finding, or mention @maple-review-bot to ask about one.
Signed in to app-pr-2565.maple.dev as the preview reviewer (Preview org, seeded demo telemetry), 1440 wide at 2x, headless.
First build (7a55c91): Overview, Services, Traces, Logs, Errors, Metrics, Dashboards, Service map, Alerts, Settings, Infrastructure, Analytics, Releases, Security, Agent sessions, Status pages, Users, Cost in dark; Overview, Traces, Services in light. Nothing was broken, but two things showed that the lab had not:
Rows read in two faces. Kit pieces still set a quantity in mono (the numeric table cell, latency and error rate values, chip counts, legends), so the Traces list had span counts in Geist and durations in Geist Mono.
Service map node labels (avg, err%, req/s) were 9px lowercase: they were written in lowercase and relied on the uppercase transform.
A review of the diff found the rest: the where-clause highlight overlay was still 14px over a 13px textarea, the org switcher row was still 12px, five labels were lowercase literals, and the service map left a 16px gap under the shorter top bar. All fixed in 34823ad.
Second build (34823ad): Overview, Services, Traces, Service map, Logs and a service detail page again.
Page
After 34823ad
Traces: durations and chip figures in Geist, trace ids and routes in mono
Services: latency and error rate in Geist
Service map: node labels are uppercase tags again, the map meets the panel's bottom edge
Overview
Service detail
Not covered
preview:web has no live sync, so the Alerts inbox and the Dashboards list stay on their loading skeleton. Those pages were seen only in the lab.
The Preview org has no data for Infrastructure, Web analytics, Releases, Agent sessions, Status pages, Users or Cost, so those seven showed their empty state. The pages seen with real data are Overview, Services, a service detail, Traces, Logs, Metrics, Service map, Errors, Settings and Security.
The where-clause overlay fix was checked by reading the classes (overlay and textarea now resolve to the same size and line height), not by typing into the editor.
The second build was re-checked on six pages, not all eighteen.
Left for a follow-up
About 290 page-level call sites still ask for mono on a plain quantity (mono: true, numeric: true, or font-mono tabular-nums): service map node figures, the throughput figure over the Services sparkline, the Top operations rows, the deltas on Overview. Each needs a look to tell a quantity from machine text, so they are not swept here.
No traces to report: the change is CSS classes and label strings, with no new request or code path.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
preview:webDeploy a Workers-only PR preview (no ingest/Electric); see docs/pr-previews.md
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Makisuo
added
the
preview:web
#2557 swapped the interface to Geist, but the type decisions around it were still the ones made for a monospace: lined-up numbers were forced back to Geist Mono, controls sat at 14px beside a 12px sidebar, and labels were uppercase overlines everywhere except table heads. This PR finishes the move. It is tokens, kit styles, one shell class and the label strings that relied on the old uppercase transform.
What changes
tabular-numselement to Geist Mono is removed. A sentence with a number in it no longer changes face halfway, and tabular figures still line columns up. Log lines, ids and code keep mono because they ask for it (font-mono,monoontypography). The kit pieces that set a quantity in mono follow: the numeric table cell, latency and error rate values, filter chip counts, chart legends, the nav count.statFiguretakesmono: truefor a machine readout.eyebrowkit drops its uppercase overline and goes up one size step (10px to 11px, 11px to 12px). The sidebar group label, the key-value label and the command palette group label follow. Uppercase stays on machine tags: themonoeyebrow, badgetag, log levels. Service map node labels, the code block language and the where-autocomplete kind move to themonoeyebrow; five labels written in lowercase are capitalised.apps/webonly; Maple Local has no desktop top bar). The service map's viewport height follows.docs/design-rules.mdstates the three rules. TheisCardTitleoption onstatRailItemonly added the uppercase, so it is removed.Reversal to note
#2557 kept lined-up numbers in Geist Mono on purpose. This PR undoes that: the split-face sentences it caused read as a bug, and Geist's tabular figures give the same column alignment.
apps/landingimports the same tokens, so itstabular-numstext goes back to the face it had before #2557.Not in this PR
About 290 page-level call sites still ask for mono on a plain quantity (service map node figures, the deltas on Overview, the Top operations rows). Each needs a look to tell a quantity from machine text; a follow-up sweeps them.
Before and after
Lab pages over fixture data, dark theme, 1440 wide at 2x.
Numbers in one face (
/lab/infra)Before
After
Stat figures and 13px controls (
/lab/cost)Before
After
Sidebar, filter rail and top bar (
/lab/cost)Before
After
Table heads and toolbar (
/lab/errors)Before
After
Chart cards (
/lab/bench/overview)Before
After
Light theme, after (
/lab/cost)Checks
packages/views,apps/web,apps/local-uipass..oxlintrc.jsonand.oxlintrc.effect.jsonon the changed files: clean.check:tokens,ui:patterns:check,lint:ui-baseline(687, unchanged),ui:index: pass.apps/web(shell, overview, services, traces, errors, page kit) and 401 inpackages/views(ui, charts, service map) pass.