Washi at the ground, veils above, three lights beneath. A design system with Chinese & Japanese typography considered from the start.
Viewport-fixed tri-color light field the page scrolls over — WebGL glows with per-pixel dither, CSS fallback for first paint, film-grain overlay. Reduced-motion safe.
Taxonomy pill in the tri-color hues (ruri / korozen / sumire) plus a neutral glass register.
Identifier badge for codes and versions — rounded-md mono, distinct from the taxonomy Chip.
Accordion on glass with soft dividers, built on Radix Accordion.
Inline alert on glass — neutral, ruri info, korozen warning, destructive.
Confirmation dialog on strong glass, built on Radix AlertDialog.
Ratio-locked container, built on Radix AspectRatio.
Avatar with a glass ring, built on Radix Avatar.
Breadcrumb trail in the quiet text register.
Pill button in three registers — korozen primary, quiet secondary outline, ruri tinted.
Calendar on the washi ground with ruri selection, built on react-day-picker.
The base translucent surface — blurred white veil on washi in light, lifted warm dark in dark.
Checkbox on glass with a ruri checked state, built on Radix Checkbox.
Show/hide region, built on Radix Collapsible.
Searchable select composed from the command palette inside a popover.
Command palette on strong glass — search, groups, shortcuts. Built on cmdk.
Right-click menu on strong glass — items, checkboxes, radios, submenus. Built on Radix ContextMenu.
Date picker — glass field trigger, calendar in a strong-glass popover.
Modal dialog as a glass veil — blurred translucent panel over a soft scrim, built on Radix Dialog.
Bottom drawer as a rising veil with a grab handle, built on Vaul.
Menu on strong glass — items, labels, separators, shortcuts, submenus. Built on Radix DropdownMenu.
Empty state — icon, title, description, action slot on a soft glass ground.
react-hook-form wiring with the washiveil label and message registers.
Hover card on strong glass, built on Radix HoverCard.
Text input on a translucent glass surface with a ruri focus ring.
One-time-code input on glass cells with a ruri active caret.
Keyboard key cap in the mono register on a faint glass chip.
Form label in the mono uppercase register.
Application menubar on the glass pill with strong-glass dropdowns, built on Radix Menubar.
Floating glass pill navigation — sliding hover pill, scroll-adaptive contrast, masked blur scroll edge, working mobile sheet.
Site navigation with strong-glass flyout panels, built on Radix NavigationMenu.
Pagination pills on the ghost-circle register.
Popover panel on strong glass, built on Radix Popover.
Progress bar with a ruri fill on a glass track, built on Radix Progress.
Radio group on glass with ruri selection dots, built on Radix RadioGroup.
Custom scrollbar as a faint veil, built on Radix ScrollArea.
Select on the glass field register — popover panel on strong glass, built on Radix Select.
Hairline separator on the soft border register, built on Radix Separator.
Side sheet as a veil — slides from any edge over a soft scrim. Built on Radix Dialog.
Loading placeholder — a shimmering veil.
Slider with a ruri range on a glass track, built on Radix Slider.
Toasts as small veils — sonner styled on the washi glass registers.
Loading spinner in the quiet register, reduced-motion safe.
Toggle switch — ruri track when on, glass thumb, built on Radix Switch.
Data table in the washi editorial register — mono uppercase header, soft row dividers.
Pill tab list on a glass ground with a ruri active tab, built on Radix Tabs.
Multiline input on a translucent glass surface with a ruri focus ring.
On-this-page navigation card with active-item highlight.