Data UI kit

Tokens and recipes behind the Fellow Directory and the Applications queue. One grey page, white plates, six tones that each mean one thing.

light only · 1 animation · 2 materials
COLOR · NEUTRALSThree inks carry 95% of the text. Three lines carry every division.
TOKENHEXROLEUSES
COLOR · SEMANTIC TONESOne foreground, one soft background, no ramp. Each tone names a fact.
COLOR · DATA-DERIVEDCohort season colors live in the data layer, never in the theme.
TYPE · SCALETops out at 20px, used once. Weights 400 and 500. Leading equals size.
TYPE · SANS · MONO SPLITEvery numeral is Geist Mono. Prose is Geist Sans. No exceptions.
GEIST SANSPriya OkaforTessel Labs · Researcher · Pittsburgh, PANames, companies, roles, locations, labels and the one paragraph of prose per surface.
GEIST MONO684 fellowsFA26   @pokafor   55%   ≈212   1–40Counts, percentages, cohort codes, handles, page numbers, dates, keys.
-0.1pxBody and UI text
-0.2pxPage title
+0.72pxFELLOW · BACKGROUND
MATERIAL · PRIMITIVESTwo surfaces and one floating variant. If a third appears, it is a layout problem.
.yc-card
Plate. No border, a 1px spread ring in the shadow stack. Buttons, chips, search, cards.
border-radius: 12px;
box-shadow: var(--yc-shadow-card);
.yc-panel
Container. A real 1px border plus the softest lift. Owns scroll, contains rows.
border: 1px solid #e4e5e8;
border-radius: 16px;
Popover
Same ring, real depth. 340px wide, 6px from its trigger, the only thing that animates.
box-shadow: var(--yc-shadow-popover);
animation: yc-fade-in .12s;
MATERIAL · RADIUSFour values, each tied to a nesting depth.
8pxInside a plate. Segment items, kbd, checkboxes, badges.
12pxA plate. Controls, chips, popovers, cards.
16pxA panel. Two per page.
9999pxCircles only. Avatars, scrollbar thumb.
CONTROLS · SIZE LADDERFive heights. Nothing in between.
40pxToolbar toggle chip
36pxOuter control, search, segmented track
28pxItem inside a segmented control
24pxKbd key, inline mono badge
⌘KWI26
20pxCheckbox
CONTROLS · INTERACTIVEHover swaps the background and nothing else. Focus is an inset ring.
TOGGLE CHIPS
An active chip adopts the tone of what it filters. Hiring is green because it is an availability fact. Dedupe is not a fact, so it stays ink.
SEGMENTED CONTROL
Selection is a white plate rising out of a grey recess. No underline, no sliding pill.
THREE-STATE TOGGLE
A checkbox conflates off with does not matter. Three states keep Any separate from No, each with its count underneath.
SEARCH FIELD
The wrapper is the control. The input has no border, background or radius of its own.
SORT POPOVER
Each option carries a one-line mechanic, lowercase, no punctuation. It states what the sort does, not why it is good.
BORDERED BUTTONS
12px, 400, ink on white. Hover changes the background only. No lift, no border change.
DATA · TABLE48px header, 64px rows. Fixed columns for enumerable values, minmax for free text.
FELLOWROLECOHORTFIELDTEAMGH_url

Headers are literal uppercase strings, including the raw field name GH_url. Missing values render as Unknown or none in tertiary ink, never blank and never as No. Rows two and three show the focused and checked states.

DATA · BADGES · AVATARSColor only where a fact is encoded.
Avatar, initials on a tone
Status badge
Cohort pill (plate) and codeFA26SU26SP26WI26
Handle, count, approximation@pokafor1,182≈437
Field cell, one tone per vertical
DATA · COVERAGE METERThe dataset states its own completeness before anyone discovers it.

Recomputed against the current result set. Each pair opens an explanation of the data: where the field comes from, how much of it exists, when the gap happened, and what a missing value means.

DATA · PAGINATIONMono page numbers. The current page is a plate.
DATA · EMPTY STATEName the state, explain the AND/OR, offer counted escape hatches, then the blunt reset.

Type a name or clear the field to bring rows back.

BEHAVIOUR · MOTION · HOVER120ms, 2px, ease-out, popovers only. Hover is an instant swap.
@keyframes yc-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
.yc-fade-in { animation: .12s ease-out yc-fade-in; }
Sweep across these rows
No crossfade, no lift
Background to #f3f4f6 and back

At 64px rows a 150ms transition on every row you pass reads as lag. Hover is gated behind @media (hover: hover) so nothing sticks on touch.