Hesoyam

Hesoyam. Colors, type, materials, and components live in app/components/ui.

Colors

High-contrast scales on dark-first tokens. Ten steps per hue, plus gray-alpha and two backgrounds.

Icons

Hugeicons through the shared Icon wrapper. Icon data never comes from @hugeicons/vue.

Blocks

Hairline table for page chrome. Title, tiles, and sections share one rule — no stacked cards.

Materials

Radius, hairline borders, and elevation. 6px controls, 8px cards, 12px menus. Docs chrome stays square.

Import

Named exports from each folder. Keep existing @/components/ui/* paths.

import { Button } from '@/components/ui/button'

import { SearchInput } from '@/components/ui/search-input'

import { Menu, MenuButton, MenuContainer, MenuItem } from '@/components/ui/menu'

Dark-first. Page background is --ds-background-100 #000.
Docs chrome follows Blocks: full-width hairlines, not a column of rounded cards.
Hesoyam API first: size="small|medium|large", variant="default|secondary|tertiary|error|warning".
Default control height is 32px (small / Button default).
Hairline borders use --ds-gray-alpha-400. Primary text is --ds-gray-1000, secondary is --ds-gray-900.
Icons: @hugeicons/core-free-icons + <Icon>. Never import icon arrays from @hugeicons/vue.
shadcn aliases stay so older screens compile: Button ghost → tertiary, outline → secondary.
Card and Sidebar have no Hesoyam analog. Leave those folders; they are leftovers, not replacements.