Patina

English · 한국어

A design system built on one emerald accent over a calm blue-gray neutral (Mist). It targets three platforms from a single set of design tokens:

• Web: a shadcn registry on the Luma lineage, with Base UI, Tailwind 4 and a tighter radius scale.
• Desktop: a Slint token file, with compact-* density tokens.
• Android: static Material 3 theme files for Jetpack Compose (no dynamic colour).

Status: draft. The design and tokens are finished, and pnpm build verifies them and generates the registry (the base item and all 25 components), the Slint library and the Android library. The registry components are checked by an automated install test and the Android library by ktlint and detekt. Everything is deployed at https://patina.ptcookie.net, together with the documentation site and a preview of every component.

What is in this repo

Path	Contents
design-system/tokens.json	The single source of truth: colour (light and dark), type, spacing, radius, size and shadow tokens
design-system/README.md	The visual language: colour, type, density, radius, states, motion, icons, accessibility, UI copy rules
design-system/Android.md	How the tokens map to Material 3 roles, typography and shapes
design-system/components/	A visual preview of every component (preview.html) and the shared bundle.css / bundle.js
design-system/assets/Licenses/	Licence texts for the fonts and icons
fonts/	The official D2Coding and MaruBuri files that are served at /fonts/*, with SHA256SUMS
design-system/VERSION	Identifier of the committed token snapshot
registry/ui/	The shadcn components (Base UI + Tailwind 4): Button, Badge, Input, Card, Label, Separator, Skeleton, Table, Checkbox, Toggle, ToggleGroup, Collapsible, Pagination, Popover, DropdownMenu, Sheet, NavigationMenu, Chart, Kbd, Switch, Alert, Tooltip, Tabs, Select, Article. Each becomes a registry item
slint/	The Slint library: patina.slint (entry) and components/ (Button, Input, Badge, Kbd, Tooltip, Separator, TreeRow, ListRow, PaneHeader, Checkbox, Switch, Tabs, Select, Menu, Table, Alert, Card, Collapsible, Toggle). The build adds tokens.slint and an archive
android/	The Android library: patina/theme/ (PatinaTheme.kt) and patina/ui/ (PatinaButton, PatinaCard, PatinaTextField, PatinaSwitch, PatinaRadioButton, PatinaFilterChip, PatinaAlertDialog, PatinaTopAppBar, PatinaListItem, PatinaBadge, PatinaCheckbox, PatinaTabs, PatinaSelect, PatinaDropdownMenu, PatinaAlert, PatinaBottomSheet, PatinaTooltip, PatinaDivider, PatinaSkeleton). The build adds the generated theme files and an archive
site/	The documentation site (Astro and Starlight): the README, the guides and a live preview of every component. pnpm build builds it into public/; pnpm site:dev serves it
docs/	The sources of the agent documentation, agent-guide.md and agents-snippet.md, the README header image header.svg and the GitHub social preview social-preview.png
tools/	Reference scripts: oklch to sRGB with WCAG contrast (cc.py), Android role mapping (m3.py), tokens to CSS (tokens_css.py)

Principles

• Semantic colour names only. Components never use colour literals or compute state colours; every hover, tint and ring is a named token, so web, Slint and Android render the same values.
• One primary action per screen. Emerald marks the primary action and active states, never decoration. Destructive actions are tinted, not solid.
• Accessible by construction. Every text colour meets 4.5:1 on the background it is meant for, in both themes, and focus rings meet 3:1. The build is meant to fail when a token breaks these numbers.
• Two densities, never mixed. Comfortable for the web, compact for dense desktop tools.
• Type: Inter for text, JetBrains Mono for headings and code, Pretendard for Korean, Newsreader with MaruBuri for long-form reading, D2Coding for column-aligned Korean code. Icons are Phosphor.

Read design-system/README.md for the full guide.

Usage

Everything is served as static files from https://patina.ptcookie.net.

Web (shadcn). In a project that already has Astro (or any React setup), Tailwind 4 and an @/* alias, initialise from the base item. It sets the tokens, installs the font packages, and switches the icon library to Phosphor:

npx shadcn@latest init https://patina.ptcookie.net/r/base.json

Then register the namespace in components.json and add components by name:

{
  "registries": {
    "@patina": "https://patina.ptcookie.net/r/{name}.json"
  }
}

npx shadcn@latest add @patina/button @patina/badge @patina/input @patina/card @patina/table @patina/chart

Install Patina's components before stock ones. Each Patina item has the name of the shadcn component it replaces and writes the same file; a stock component that depends on it (alert-dialog needs button) will ask whether to overwrite the file, and the answer is no. Components Patina does not override resolve from the stock shadcn registry.

Slint and Android. Download the generated file once and commit it to your project; do not fetch it at build time.

Platform	File
Slint	/slint/patina-slint.tar.gz (the tokens and the compact components; unpack it, register patina.slint as the library patina, import from @patina)
Android	/android/patina-android.tar.gz (the Compose theme, tokens, icons and components; unpack it into your sources)

The Android files declare the packages patina.theme and patina.ui and unpack to patina/theme/ and patina/ui/:

mkdir -p app/src/main/kotlin && curl -L https://patina.ptcookie.net/android/patina-android.tar.gz | tar xz -C app/src/main/kotlin

This is the beginning of the README. Read the rest at the original. Read the full README ↗