DVLP Studio · Design system

Lab Paper

DVLP is a pharmaceutical drug-development platform, which means its screens are mostly tables, statuses, and citations. I built the system that keeps all of that calm: a warm bone-paper canvas, exactly one accent, a single grotesk, and a type scale sized around the data rather than the marketing page. Twenty-six boards, light and dark, from color tokens down to the sign-in screen.

Role: Design engineer
Years: 2025–26
Stack: Figma · Tailwind · Storybook
Scope: 26 boards, 2 themes

Fig. 01The cover board. Bone paper, one oxidized orange, and the grotesk that carries everything else.

Foundations

The canvas is a warm bone paper rather than white, so a day of staring at tables feels closer to reading a printed protocol than a spreadsheet. On top of it sits one accent, an oxidized orange, reserved for the primary action and the current selection. Everything else that needs color gets it from a small semantic set for states and domains, kept muted so a page full of statuses never turns into a fruit salad.

Underneath, the boring tokens do the real work: a 4px spacing grid, three radii, and shadows soft enough to read as paper lifting off paper instead of cards floating in space.

Core palette board: bone-paper surface tones, an ink ramp for text, and the single oxidized orange accent with usage notes — Fig. 02The core palette. Paper tones, an ink ramp, and one orange with strict rules about where it may appear.

Semantic accents board: muted greens, ambers, reds, and blues mapped to verification states and scientific domains — Fig. 03Semantic accents. Status and domain colors, desaturated so they inform without shouting.

Spacing, radius, and shadow board: a 4px spacing scale, three corner radii, and a small set of soft elevation shadows — Fig. 04Spacing, radius, and shadow tokens. The 4px grid everything on the platform snaps to.

Type that carries data

One typeface does all the talking: ABC Diatype, in the product at every size. A drug program page can hold a heading, a dense table, a citation, and a timestamp within one viewport, so the scale was tuned from the small end up. The 12 and 13px steps had to survive a forty-row table before anything else was decided, and tabular figures are on by default anywhere a number can appear.

The steps are fewer than most scales I have shipped. When every size earns its place, a screen with six data densities still reads as one voice.

Typeface board introducing ABC Diatype: character set, weights, and notes on tabular figures for data-heavy screens — Fig. 05ABC Diatype, the only typeface in the product. Weights, character set, and the tabular-figures rule.

Type scale board: the full run of sizes from 12px table text up to page titles, each step shown with line height and usage — Fig. 06The scale, built from the table text upward. Every step names the surface it exists for.

Portrait typographic poster set entirely in ABC Diatype on bone paper, mixing display sizes with fine specimen text — Fig. 07A specimen poster from the same tokens. If the system can hold a poster, it can hold a table.

Components

The component set is deliberately small and deliberately documented. Buttons, cards, forms, badges, feedback, and a family of domain icons cover almost every screen in the platform, and each one exists in Storybook with the same names it has in Figma. I wrote anatomy notes for the pieces engineers touch most, so a button is a spec you can build from, not a picture you have to interpret.

Cards board: asset cards, summary cards, and list cards with headers, metadata rows, and verification badges — Fig. 11Cards. The asset card pattern that most of the platform is assembled from.

Forms board: text inputs, selects, textareas, checkboxes, and radio groups with label, helper, error, and disabled states — Fig. 12Forms. Every field state written out, because regulatory data entry has no room for guesswork.

Feedback board: toasts, banners, empty states, and loading patterns using the semantic accent colors — Fig. 15Feedback. Toasts, banners, and empty states that stay quiet unless something actually needs you.

Applied

A system is only proven on a real screen, so the boards end where the product begins. The asset home and the development plan are the two densest surfaces in DVLP, and both are assembled entirely from the components above. Nothing custom, nothing off-grid. The sign-in screen is the small test I hold every system to: with only two fields and a button, it should still be unmistakably this product.

The asset home screen built from the design system: sidebar navigation, phase progress, activity feed, and inquiry panel, all on bone paper — Fig. 16The asset home, assembled from system parts. The one orange on screen is the primary action.

The development plan screen built from the design system: six workstream swimlanes with stage gates and deliverable cards carrying verification badges — Fig. 17The development plan. Badges, cards, and the semantic set doing their job across six workstreams.

Sign-in screen: two fields and one oxidized orange button on the bone-paper canvas — Fig. 18Sign in. Two fields, one button, and it still could not belong to any other product.

Dark mode

Dark mode is not the palette inverted. Paper becomes a warm near-black, ink becomes bone, and the oxidized orange stays put, re-checked for contrast against the new ground. The semantic accents were re-mixed by hand, because status colors that pass on paper can vanish or scream on dark. Both themes ship from the same tokens, so a component never knows which one it is in.

A stack of dark-mode components: cards, badges, and buttons layered on the near-black surface — Fig. 20A dark component stack. Same tokens, same parts, different ground.

System notes

Bone paper canvasOne accent only26 boardsLight + dark