Two Design Systems

One had the system. The other had the look.

Company

GLKB · YOW.tv

My Role

UX/UI Designer · Product Design Intern

Tools

Figma · Claude Code · Claude Design · HTML/CSS/JSON

Timeline

2026

Description

A biomedical research platform and an indie-film streaming service, six months apart, needing the opposite halves of the same thing.

Context

A design system is more than a set of tokens. It is the answer to what the product is about. I got that question from both ends: a research platform with Figma variables and no visual language, and a streaming brand with a visual language and no steps between. I invented one and derived the other. On the second I agreed to no shadow or corner radius, and have drawn everything since with two fewer tools. Its face, yellow and corner are in a live stylesheet today.

GLKB on Web

YOW.tv on the App Store

One product had a system with no taste; the other had taste with no system

I was the sole designer on both: the type, color, spacing and radius decisions, the Figma setup, the token files and the documentation. Greg, YOW’s branding director, owns the brand I derived from and made the final typeface call. GLKB’s product manager built the initial structure and sent me out to find the rest.

Two products, broken in opposite directions


GLKB already had a design system, built by its PM, and it lived in one file, with lo-fi, hi-fi, text styles and components together, so starting a feature meant copying the design-system page across. I rebuilt the Figma structure. What it lacked was a visual language: the radius and the shadow read as software from 2010, and a percentage type scale put headings on decimals. The PM knew before I did, and sent me out to explore.


YOW had the opposite problem. A brand book and a type guide: a real identity, just not one made for an interface. One black, one white, one gray and three accent colors, and no steps in any of them. Nothing in it could put one surface above another.

Headed: What I was given. On the left, GLKB’s own type-style table on white, with a Text Style column listing seven DM Sans styles from bold h1 down to bold tiny, a Font Size column reading 36, 24, 16, 16, 14, 14 and 12 pixels, and a Line Height column reading 120, 130, 135, 150, 150, 150 and 150 percent, under one line noting that every line height is a percentage, so 36 pixels at 120% lands on 43.2. On the right, standing exactly as tall as that table, six color swatches in two rows of three, each labeled with its value — #000000, #FFFFFF, #FFC800, #C80032, #FF640A and #646362 — under one line noting that YOW’s brand book carries six colors and no steps under any of them. One line along the foot records that the type sheet is reproduced unretouched and is not the designer’s own work, and that the swatches are redrawn from the brand book’s own RGB values.

GLKB: The blue was the only thing I had to keep


I explored wide with Claude Design, with one thing fixed: the brand blue. Four directions for the home page, each holding a complete set of values rather than a mood: a typeface, a shadow rule, a chip shape, a radius. They were drawn far enough that they could be pointed at and argued with rather than described.


What shipped is a mixture of A and C, designed further from there. Flat surfaces and almost no shadow carried all the way through: the eye should land on the answer the agent produced, not on the furniture around it. The face changed too, and that decision is further down.

Headed: Four directions for the same home page. Four captures stacked at full width, each the same GLKB home page at 1440 carrying a left icon rail, the headline Ask. Analyze. Cite., the line Weeks of research, done in minutes., a search field reading Ask a question about the biomedical literature with a Paper Type control, and four chips reading Entity Insights, Research Trend, Mechanisms and Relationships, and Literature Discovery. Labeled beneath in order: A Precision, on white with squared outlined chips; B Flow, on pale blue with a soft-shadowed search card and pill chips; C Signal, with a dark sidebar and a dot grid behind monospaced detail type; D Scholar, with a serif italic in the headline over an elevated search field.

Nobody had priced the typeface the brand book mandates


The brand book is unambiguous: the typography is almost entirely one family, and no other typefaces are to be used. Nobody had checked the price first. Greg told me the license was too expensive, so the team had fallen back to a default font. A rule that strict had ended in no typeface at all.


The replacement had three conditions: free, close enough to keep the identity, and variable on the width axis, because a mixture of widths inside a phrase is how the brand reads. So the test is one splash and one paragraph set four times, the mandated family among them. Greg made the call from it.

Headed: The family the brand book names, and three that cost nothing. Four columns at one size. Each holds the same YOW.tv splash, the words Stream indie. Free. set large over a collage of film posters with the YOW.tv wordmark beneath and the word Free. in yellow, above the same lorem ipsum paragraph, and is labeled above it. In order: Acumin Pro, marked mandated; Archivo; Encode Sans; Barlow. Only the typeface changes between the four.

The Outcome: Two Products That Now Look Like Themselves


One system had to be invented and one had to be extracted. What each turned out to be is the face, the scale, the corner and the silhouette.

The Research Interface: Quiet Layout So the Evidence Is Loudest


The platform is two things at once. Half is an AI agent and wants the forefront; half is biomedical evidence and wants a library. I went quiet rather than choose, because the interface is mostly reading and the reading should be the hero.


The text scale is 24 styles and every line height is a whole pixel, answering the 43.2 the old sheet produced. And the face keeps the detail that won it: Geist turns a quarter-round at the foot of the l where DM Sans and Open Sans end flat, which is what keeps I, l and 1 three objects in a product whose body text is gene symbols and variant ids. That detail, among others, is why the face reads as balanced between the agent and the library rather than siding with either.

Headed: Geist ends the l with a tail. The others end it flat. Two white blocks side by side. In the left block, three lowercase l’s set very large and normalized to the same cap height, sitting on one shared baseline rule: the first curves a quarter-round to the right at its foot, the second and third end square. Beneath, the string Il1x — capital I, lowercase l, figure one and lowercase x — set three times between a shared cap rule and the same shared baseline, with a short dashed x-height rule inside each column at that face’s own value. Beneath each, the same line of product copy, Filter IL1B and Il1b; rs1801133 is a variant. The three columns are labeled Geist, DM Sans and Open Sans, and no rule is labeled. In the right block, under the label The scale, 24 styles, the scale is drawn rather than listed: 12 rows of the word Handgloves set at its true size, from 48 over 56 down to 8 over 10, each tagged at the left with its size and line height aligned on the slash. Below both blocks, a capture of the GLKB reading surface: a left navigation rail carrying New Chat, API, Literature Review, Library and History over a list of recent questions; a center column holding the question, an Investigated for 6:12 line, and a Direct Answer and Investigation findings under the heading Pancreatic Cancer Single-Cell TME Trends at a Glance, with a search field at the foot; and a References panel on the right headed 21 Citations and sortable by Citation or Year, in which the five visible entries are the same record repeated — one title, one set of authors, one journal and one PubMed identifier — each under a placeholder snippet. One line along the foot records that the surface is captured from the design file, that the reference snippets are placeholder text, and that the three faces are cap-normalized.

Shape as Type: What the Silhouette Had to Carry


On a streaming home page nearly every surface is a poster of somebody else’s work. The team argued for weeks about keeping every card portrait against mixing the shapes, and I was on the mixture side: they are all posters, so at one shape and one size nothing is emphasized over anything else, and the page is tiring to look at.


Then the social layer arrived on home and the question changed. Films were no longer the only content — a person to follow, a collection to open — and the outline of a card became the one thing left to say what kind of thing it is. An outline can be spent once, so it went on telling them apart rather than on rhythm, and the rhythm I had argued for is what it can no longer pay for. It had looked like an argument about how the page looks. It was one about how it works.

Headed: Five things on one page, and only the outline to tell them apart. Five outlines on a dark ground, each centered in a cell of the same height so the row aligns, with a two-line label beneath. A solid-outline portrait rectangle, labeled One title, portrait, shipped. A dashed square divided into three equal vertical panels, labeled A collection, square, waiting on social. A dashed circle, labeled A person, circle, waiting on social. A solid-outline landscape rectangle carrying a short yellow progress bar along its lower edge, labeled Continue watching, landscape, shipped. A second solid-outline landscape rectangle carrying a large figure 1 at its left, labeled Trending, landscape, shipped. One line along the foot records that these are outlines only, that the built frames sit on licensed film artwork with none of it reproduced here, and that the two unbuilt shapes are drawn at 1:1.

Two of the four shapes are built. The collection and the person are social objects, and the social layer’s own shape is not settled yet, so both silhouettes wait on it rather than ship ahead of it.



Two Systems, Opposite Ends: One Name, One Value


Spacing on YOW went out first as three platform modes: one name, space/10, resolving to 40 pixels on mobile, 48 on web and 72 on television. Nothing in a handoff told a developer which of the three they were reading, so a name that promised sameness delivered difference. I took the abstraction back out. Both scales ended as one flat run where the name is the value.


Typography did not converge, and that asymmetry is the argument: 24 pixels of body at arm’s length and 24 at 10 feet are not the same decision, while 24 pixels of gap is a gap.

A single sheet split down the middle, light on the left and black on the right, carrying the same six rows on each side so the two systems can be read against each other. Left, headed Research: a display specimen at 48 over 56 and a body specimen at 14 over 22, both set in Geist and reading Handgloves and Handgloves 0123; a blue color swatch with the value #155DFC; two corner chips, one squared and one fully round, over the line 4 to 48, no shadow; a row of six Material Symbols icons — arrow right, caret up, magnifying glass, plus, list and cross — under the label Icons, Material Symbols, 24; and a chart of 14 blue ticks rising left to right under the label Spacing, 14 steps, space/N = N times 4px. Right, headed Streaming: the same rows set in Archivo, a display specimen at 48 over 56 at width 90 and a body specimen at 16 over 24 at width 100; yellow and near-white swatches reading #FFC800 and #F6F6F6; two barely-rounded corner chips over the line 2 to 4, shadow given up; the same six symbols drawn in Phosphor; and a chart of 21 yellow ticks. Both charts are plotted on one shared value axis, so where the two systems name the same step the ticks land in the same place, and the streaming run carries on past where the research run stops.

Both systems live in a file of their own, separate from the product files: Figma variables out to CSS custom properties and JSON in one export. A designer picks from a menu, a developer imports a stylesheet, and an agent reads the same file and writes conforming code without being told the rules.

Impact


GLKB is live with the new design system. YOW’s new web experience is on a staging site, releasing soon. The handoff changed with it. The team had been unhappy with what came back from development; with the system, the Figma structure and a written handoff procedure behind it, the turnaround is shorter and the gap between the built page and the drawn one is much smaller.

I agreed to work without a radius and without a shadow


Shadow went first. Greg was right about the brand: it is fast, direct, punchy, and it does not want depth. Radius went nearly the same way, and together they are the two cheapest ways an interface separates one thing from another and says which of them you can press. An informational field had to read as a field without reading as a button; what worked keeps only the bottom edge.


The television is where I do not have the answer. Across a room you move a highlight with a D-pad, and its whole job is to say which of 10 cards you are on, from 10 feet, with no shadow to lift it and no radius to soften it. I specified the token set against a d-pad before that work began; what exists is one low-fidelity frame. The specification is thick and the file is thin.

Credit


Branding, YOW — Greg Kupiec

Product manager, GLKB — Zhiyuan Liu

Lab — Jie Liu Lab, University of Michigan

Development — the engineering teams at both companies