This is the working reference for PhucTech's visual language. It documents the decisions that should stay consistent as the product surface grows, without hiding the implementation details that make those decisions useful.
Why it exists
A design system is most useful when it shortens the distance between an idea and a reliable interface. These pages name the reusable choices—color roles, typography, spacing, icons, and component states—so a new screen can feel familiar without becoming repetitive.
Principles
- Clarity over decoration. Every color and control should make the next action easier to see.
- Semantic tokens over one-off values. Use the role that describes why a value exists.
- Accessible by default. Keyboard focus, labels, contrast, and motion are part of the component contract.
- Small surfaces, composed well. Prefer a few predictable primitives over a large catalogue of exceptions.
- Theme by role. Light and dark modes change semantic values, not component APIs or meaning.
Examples
Component pages start with named situations before the API tables. Every situation uses the same Preview/Code frame, a direct anchor, and copied TSX from a runnable source file. Try a property playground only when changing the public props helps explain the component; patterns stay fixture-only compositions.
Start with Button examples to compare intent, size, loading, and destructive confirmation, then use the nested Examples links on each component page to jump directly to a situation.