The design catalog for @snicol/ui
Tokens, type scale, component states, and the real home and portfolio pages that consume them. Verify a change here before it reaches production.
Token palette
Semantic colors, light value over dark value, from the same tokens.ts consumed by every app.
Type scale
Every named size token, set at its real weight and line height.
0.75remIdeas made clear, useful, and quietly memorable.
0.875remIdeas made clear, useful, and quietly memorable.
1remIdeas made clear, useful, and quietly memorable.
1.125remIdeas made clear, useful, and quietly memorable.
1.25remIdeas made clear, useful, and quietly memorable.
1.5remIdeas made clear, useful, and quietly memorable.
2remIdeas made clear, useful, and quietly memorable.
Component states
Server-rendered variants above; interactive, client-only behavior below.
Button variants
Badge variants
Full Card composition: header, title, description, and content parts, no client boundary required.
Arrow keys move focus between triggers and switch panels in one motion.
ToggleGroup, single selection
Catalog
Every entry links to its own examples and accessibility notes.
Button
The primitive for a single committed action. Six variants share one sizing and focus contract.
Card
A structural container with header, title, description, action, content, and footer parts that compose independently.
Badge
A compact status or category marker, never the sole carrier of meaning.
Separator
A decorative or semantic divider between grouped content, horizontal or vertical.
Tabs
Switches between mutually exclusive panels sharing one region of the page.
Toggle Group
A set of mutually exclusive or independent pressed toggles, rendered as one roving-focus group.
Tooltip
Supplemental, non-essential information shown on hover or keyboard focus of its trigger.
Registry proof
Compare the packaged Button with the local shadcn CLI copy before changing registry output.
Real page previews
The actual copy and structure from apps/home and apps/portfolio, not stand-ins.
apps/home
Independent maker
Ideas made clear, useful, and quietly memorable.
Snicol is a small digital home for experiments, selected work, and the details that make products feel considered.
apps/portfolio
Selected portfolio
Useful things, made with care.
A small selection of digital products and systems shaped around people, not process.
Field Notes
A calmer way to collect observations, references, and next steps.
Accessibility notes
Collected from every catalog entry. Read these before shipping.
- button. Icon-only buttons must carry an aria-label; the visible label is what screen readers announce otherwise.
- button. Disabled buttons remain focusable-adjacent but must never silently swallow a required action. Explain why in adjacent text.
- card. A card is a layout primitive, not a landmark. Give the surrounding section its own heading and aria-labelledby.
- card. CardAction sits in the header grid; keep it a real interactive element, not a decorative icon.
- badge. Color alone must not convey status; pair every badge with a text label (this catalog never ships a color-only badge).
- separator. Set decorative={false} only when the separator marks a real thematic break a screen reader user needs announced.
- tabs. Every TabsTrigger needs visible, distinguishing text. Icon-only tabs must add an aria-label.
- tabs. Don't nest interactive widgets that also claim arrow-key navigation inside a TabsContent panel without testing focus order.
- toggle-group. type="single" groups need an accessible group label (aria-label or aria-labelledby) describing the choice being made.
- toggle-group. Every item needs its own accessible name. A bare icon glyph is not one.
- tooltip. A tooltip must never be the only way to reach information required to use its trigger. Treat it as supplemental only.
- tooltip. TooltipProvider must wrap the app once; nesting extra providers changes the default open/close delay unexpectedly.