# Kortix Design System

Use when building or editing any visual surface in apps/web, a page, screen, list...

- Repository: https://github.com/kortix-ai/suna (20345 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add kortix-ai/suna --skill kortix-design-system -g -a claude-code -y`
Codex: `npx skills add kortix-ai/suna --skill kortix-design-system -g -a codex -y`
Cursor: `npx skills add kortix-ai/suna --skill kortix-design-system -g -a cursor -y`
Gemini CLI: `npx skills add kortix-ai/suna --skill kortix-design-system -g -a gemini-cli -y`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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-brand`](../kortix-brand/SKILL.md) first.**
> 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**. Its `decisions.md` records 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**](../kortix-brand/SKILL.md) | 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**](../../../apps/web/.agents/skills/make-interfaces-feel-better/SKILL.md) | 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`](../kortix-brand/references/decisions.md), entries E1 and E2.

## Where components live: `@kortix/ui`

The rest: https://github.com/kortix-ai/suna/blob/HEAD/.agents/skills/kortix-design-system/SKILL.md