← All UI styles
Lookbook Thin
Thin letterforms, letter-spaced labels, and a page that is almost empty.
BareeditorialFashion and beautyLookbooks and catalogsPremium landing screens
Construction · Bare
There is no surface at all — no fill, no line, no tint. Size, weight and distance are the only tools left.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Lookbook Thin style. Type is light-weight and widely letter-spaced, set on an almost empty near-white page. Restraint is the point: nothing is emphasized by weight, only by space. Build
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- thin letterforms
- wide letter spacing
- near-empty page
- no weight emphasis
What this style refuses
- bold weights
- saturated color
- dense lists
- shadowed cards
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
RoleLightDark
Background
#fdfdfc#0d0d0cSurface
#ffffff#131312Border
#eae7e2#282623Text
#1e1c1a#f4f2efMuted text
#6d6862#a19b93Accent
#7a6a4d#cbb489On accent
#ffffff#15100aShape and type
Radius0 / 2 / 2 px
Border1px solid
Shadownone
DisplayDidot
BodyHelvetica Neue
Monoui-monospace
Type scale10 · 11 · 14 · 16 · 22 · 34 px
Weights300 / 500 / 300
Line height1.7
Tracking0.04em
Spacing8px grid · roomy
Surfaceflat
Accentunderline
Separatorhairline
Labelsuppercase
Blurnone
Measured contrast — body 16.69:1 light, 17.4:1 dark; secondary text 5.42:1 and 7.06:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Lookbook Thin
*
* Thin letterforms, letter-spaced labels, and a page that is almost empty.
*
* One complete product screen, rendered from the token object below —