Start with the essentials.
The small decisions that hold the library together.
A restrained palette
Soft neutrals leave room for a very particular green.
#19e783--portal-green#181818--portal-ink#ffffff--portal-surface#f8faff--portal-canvas#edeff3--portal-borderSource muted text is #9da3ac. This kit uses #686e78 for small text on light surfaces to improve contrast. Input, Select, Checkbox, and Switch edges use #878e98 instead of the source #edeff3 so each control is visible at 3:1; dividers keep #edeff3. Dark preview is an adaptation. It is not inspired by a measured dark theme.
Quietly expressive type
Regular weight, close tracking, and a clear hierarchy.
32/40 · 50024/32 · 50016/24 · 40015/22 · 40014/20 · 40013/18 · 400The measured family is Roobert. This gallery bundles Inter under the SIL Open Font License as a predictable fallback. Supply licensed Roobert through --portal-font for closer typography.
Space, shape, depth
Room to breathe. Just enough elevation.
4px8px12px16px24px32px--portal-shadow-control: 0 6px 10px -4px rgb(0 0 0 / 12%), 0 0 0 1px rgb(0 0 0 / 5%); --portal-duration: 300ms; --portal-ease: cubic-bezier(.215,.61,.355,1);
Evidence, not guesswork
What was measured, and where the library makes a deliberate choice.
| Pattern | Evidence | Library treatment |
|---|---|---|
| Buttons | Computed 32/40/48px heights; 100px radius; dual shadow | Source-derived sizes and variants |
| Typography | Roobert; 13–32px sampled scale; −1% tracking | Inter fallback; configurable family |
| Card surfaces | 16px corners; 16/24px spacing; layered shadow | Preserved; neutral poster assets |
| Chrome | Sidebar, top controls, compact header and bottom navigation observed | Reusable composition; 767px breakpoint is an adaptation |
| Motion | 300ms easing on sampled controls and list opacity | Source timing; overlay movement adapted |
| Dark / accessibility | Full dark styles and all focus states unverified | Optional dark preview and contrast improvements labeled |