CraftlumenDesign systemA wealth-management system, not a SaaS theme.
Warm paper, deep pine, one champagne accent, and a strict separation between editorial type and figures. Every product surface is a dark inset panel, so the interface always reads as an instrument sitting on a page.
Principles
The rules that keep the system from drifting into generic product design.
- 01
Paper, not canvas
Backgrounds are warm and slightly off-white. Pure white is a raised surface, never the page.
- 02
Type carries the voice
Headlines are a high-contrast serif; the interface is a neutral grotesque. Never mix the two roles.
- 03
Figures are mono
Every number uses tabular mono so columns hold still while values animate.
- 04
One accent
Champagne appears once per view — a rule, a pill, a marker. Two accents means one is wrong.
- 05
Hairlines over boxes
Structure comes from 1px rules and generous space, not from cards inside cards.
- 06
Instruments are dark
Product surfaces sit on dark panels, which keeps data legible and separates tool from page.
Theme
One system, two palettes. The switch happens at the token layer, so no component contains a theme conditional.
The system preference is the default and needs no script: the stylesheet carries a prefers-color-scheme block, so a visitor with JavaScript switched off still gets their own theme. An explicit choice is stored and replayed onto <html> by an inline script in <head>, before the first paint — there is no flash to correct afterwards.
Neither theme block is anchored to the root element, so data-theme on any element themes that subtree. The two specimens below are one page in two themes, which is the same mechanism a dark hero on a light page would use.
Body copy on the page surface, with a +18.28% figure inline.
Tertiary label
A raised card sits on the page.
Product panel
$4,281,904.22
Body copy on the page surface, with a +18.28% figure inline.
Tertiary label
A raised card sits on the page.
Product panel
$4,281,904.22
Components ask for a role, never for a colour. These are the only tokens that move between themes; the pine, champagne and dark-panel ramps below are identical in both. Values are read from the stylesheet at runtime, so this table cannot drift from the CSS.
The page and the things that sit on it. A card lifts, an alternating band sinks.
Four steps, and never more. Anything below `ash` would fail AA at small sizes.
Pine and champagne when they are words on the page rather than fills. The ramps themselves do not move between themes; these do.
Badges and pills: a ground, an edge and a legible foreground, as a set.
Recalibrated per theme. A hue tuned for ivory loses its value against a dark page, so the dark theme adopts the dark-ground set. Inside a product panel the colours never change, because the panel never changes.
Colour
Four ramps and a reserved semantic pair. The categorical series is validated, not chosen by eye.
The primary. Deep enough to carry white type at 800 and above.
Used sparingly: one accent per view. Never a gradient.
Every product mockup sits on these, in both light and dark contexts.
Gain and loss are never reused as categorical series, and never carry meaning alone — an arrow or a signed value always travels with them.
Assigned in this fixed order and never cycled. The set clears the OKLCH lightness band, the chroma floor, adjacent-pair CVD separation and 3:1 contrast against both surfaces. The one pair in the warn band ships with direct labels, which is what makes it legal.
| Slot | On light | On panel |
|---|---|---|
| s1 / s1-dk | #1E7F5C | #2E9E77 |
| s2 / s2-dk | #B04E2C | #C8623C |
| s3 / s3-dk | #33689E | #4A87C4 |
| s4 / s4-dk | #9A6716 | #B8823A |
| s5 / s5-dk | #7D5EA6 | #9C7BC0 |
Typography
Three families, three jobs. Instrument Serif speaks, Inter explains, IBM Plex Mono counts.
Conviction
Quantified and explained
One page that tells the truth
Detected patterns
A standfirst sits between the headline and the argument. It runs one or two sentences and never carries a figure.
Body copy holds at 14–15px with generous leading. Figures set inline stay mono, so $4,281,904.22 and +18.28% keep their rhythm.
Surfaces
Radius, elevation and the four page tones that alternate down the homepage.
Controls
Every interactive element is a pill or a hairline. No filled grey boxes.
One question per row, answered in plain sentences. The open row is the only one with strong ink; the rest recede.
The first row, so the pattern is legible without a click.
Data display
Figures first. A stat tile with no plot is often the right chart.
Resting surface with hover lift.
Inset on a bone page.
Product surface.
Charts
Thin marks, recessive grids, one axis, and a hover layer by default.
- One y-axis per frame. A second scale becomes a second chart.
- Categorical hues are assigned in fixed order and never cycled; a sixth category folds into “Other”.
- Magnitude uses one hue, light to dark. Polarity uses the reserved gain/loss pair with a neutral middle.
- Status colours are reserved — they never stand in for a series.
- Two or more series always carry a legend; up to four are also direct-labelled, so identity is never colour alone.
- Grid and axis type stay recessive; the series line is the only strong mark.
- Every figure is set in tabular mono so columns hold still while values animate.
- Global equities46.2%
- Fixed income21.4%
- Private markets14.8%
- Real assets12.6%
- Cash & equivalents5.0%
- Semiconductors+4.8%
- Industrials+3.1%
- Healthcare+2.4%
- Consumer staples−0.9%
Motion
Two curves, long durations, and a full reduced-motion path that fades instead of moving.
Every animated component reads prefers-reduced-motion. Under it, reveals lose their translation, counters land on their final value immediately, chart paths render complete, and the ambient marquee, sweep and pulse stop.