Kortix Design System
Use when building or editing any visual surface in apps/web, a page, screen, list...
Install
npx skills add kortix-ai/suna --skill kortix-design-system -g -a claude-code -y- Repository
- kortix-ai/suna20.3k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Use when building or editing any visual surface in apps/web, a page, screen, list, card, badge, avatar, modal, form, empty state, toast, tooltip, table, or panel, and you need to know WHICH component to compose and which primitives are banned. Load kortix-brand first for the values (color, spacing, type, radius, motion budget); this file assumes those and covers components, layout shells, and reference implementations. Source of truth: packages/ui/src/primitives, the live /design-system page, and the reference implementations listed inside.
Kortix Design System
Track this file: .agents/skills/kortix-design-system/SKILL.md
If you are touching a visual surface in apps/web, follow this. This file owns which component to compose. It does not own values, see below.
Read
kortix-brandfirst. It is the router for the Kortix look and voice. Its visual files (color.md,typography.md,layout.md,effects.md,motion.md) are the value law: the closed allowlist for every color, spacing step, type rung, radius, elevation, easing and duration, plus the rule on whether to animate at all. Itsdecisions.mdrecords why each rule is what it is. This file assumes you know those values and shows you what to build with them.
Companion skills, load all three
| Skill | Owns | Wins when they conflict |
|---|---|---|
| kortix-brand | The value allowlists, voice and claims. Color, spacing, type, radius, elevation, motion budget. Rejected defaults. scripts/audit.sh. Decision history. | Values, copy and motion restraint |
| kortix-design-system (this file) | Components, layout shells, reference implementations, banned primitives | Which component |
| make-interfaces-feel-better | Polish: concentric radius, optical alignment, tabular nums, hit areas, font smoothing | Polish detail |
A polish skill will always propose more motion than Kortix wants. kortix-brand
is the ceiling all three operate under. Corrections to earlier versions of this
file (the shadow ladder that never existed, the press value) are recorded in
decisions.md, entries E1 and E2.
