Patterns
Luc UI grew up on dense analytics, and that shows in its tables, charts and workspaces. It is not only for them. Each vignette below is built from the same public components — only the palette and the type voice change.
Status, code, an instruction field and an approval flow. Nothing here is financial; the components that carry it are the same ones a research desk uses.
Agent run · 4 min 12 s · 18,402 tokens
Read 42 files in luc-api/src
HealthyDraft the migration plan
HealthyApply 6 patches
Pending- return composePage(payload)
+ const page = await materialize(payload)
+ return composePage(page, { generation })Why cobalt and mono
A cool, saturated blue reads as infrastructure rather than finance, and a monospaced display face signals “this output is literal”. Both are one attribute — the approve button, the switch and the status badge did not change.
Product surfaces, prices with a discount, variant chips and a cart summary. The interactive Card and the numeric text are the same primitives used in a data grid.
Field notebook, A5
$32
Ceramic pour-over set
Why rose and a system sans
A warm accent keeps the storefront from looking like an admin tool, and the humanist system stack proves a product can ship with no webfont at all — the same components, zero font payload.
An editorial article: serif display, looser leading, a byline, a pull quote and topics. Turbulent typesetting is the product here, not a data table.
Field notes
Most of what leaves this room is wrong. That is the arrangement: a prototype is a question, and the only prototype worth keeping is one that answers it in under a week.
Mira Okonkwo
Studio lead · 8 min read
“A prototype that takes a month is a decision you have already made.”
1,204 responses
Why ember and a serif
The `editorial` typeface re-points the sans role as well as the display role, because an editorial voice is a whole-page decision. Line heights loosen with it — the preset ships the leading a serif needs.
The home turf: metrics with deltas, a sparkline, a compact attribution table with signed numeric columns.
| Core equity | 46.2% | 3.4% |
| Macro overlay | 18.9% | -1.2% |
| Carry basket | 12.4% | 0.8% |
| Duration hedge | 9.1% | -2.6% |
Why emerald
Emerald is deliberately *not* the default cyan: the point is that the strongest data components in the system are palette-agnostic. Positive and negative values keep their semantic colours in every palette.
Versatility is only credible if nothing was special-cased.
Try one of them on the whole Showcase:
Two attributes on a wrapper. Nothing else.
<section data-palette="ember" data-typeface="editorial">
<Article ... />
</section>The wrapper above is the entire implementation of this page's four brands. If a vignette needed a bespoke class to look right, that would be a defect in the component, not a missing variant.