Hesoyam

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

Lucide through the shared Icon wrapper.

LabelValue
SecondarySearch…

Blocks

In dev

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 @aezakmiproject/hesoyam. Setup lives on Installation.


        

          1
          
          import { Button } from '@aezakmiproject/hesoyam'

Rules

  • 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: @lucide/vue through <Icon>.
  • shadcn aliases stay so older screens compile: Button ghost → tertiary, outline → secondary.
  • geist.index.rulesLeftovers