jason/ui-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

visual upgrade
ci / build-and-design (push) Failing after 13s
Details

Browse Source
This commit is contained in:
Jason Stedwell
2026-07-23 04:23:19 -05:00
parent 9d7f593307
commit 822d8e41e6
53 changed files with 7757 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+19 -15
View File
@@ -1,30 +1,32 @@
# Design System — @jason/ui-kit
The single source of truth for how every app looks and feels. Tokens live in
`src/lib/tokens.ts` and `src/styles/globals.css`; the Tailwind preset
(`tailwind-preset.cjs`) exposes them as utilities.
`src/lib/tokens.json`; TypeScript consumes it directly, the CSS theme is generated,
and the Tailwind preset exposes it as utilities. `npm run tokens:check` prevents drift.
## Color
Warm-tinted neutrals (never pure black/gray) on a warm dark base, with a single
gold brand accent. Semantic colors: success / warning / danger / info.
| Token | Dark (default) | Use |
|---|---|---|
| `bg` | #232022 | Page background |
| `surface` / `surface-2` | #2b282a / #333031 | Cards, raised panels |
| `border` | #3a3638 | Hairlines, inputs |
| `text` / `muted` | #F5F1EC / #A99F97 | Body / secondary |
| `brand` / `brand-bright` | #DCBB4F / #F5CD15 | Accent, primary actions |
| Token | Dark (default) | Light | Use |
|---|---|---|---|
| `bg` | #232022 | #FAF8F4 | Page background |
| `surface` / `surface-2` | #2B282A / #333031 | #FFFFFF / #F4F0EA | Cards, raised panels |
| `border` | #3A3638 | #DED8D1 | Hairlines, inputs |
| `text` / `muted` | #F5F1EC / #A99F97 | #272326 / #665F62 | Body / secondary |
| `brand` | #DCBB4F | #79640E | Accent and action |
A `.light` class on `<html>` flips neutrals for light surfaces; brand stays constant.
Rebrand any app by overriding the CSS variables in `globals.css` — no recompile.
Every filled semantic color has a matching `*-foreground` token. Do not reuse a
background color as text without a contrast check. `ThemeProvider` supports dark,
light, and system modes; `ThemeScript` prevents a flash before hydration.
## Type
- Display / headings: **Montserrat** (600/700)
- Body / UI: **Open Sans**
- Code / data: **JetBrains Mono**
Never Inter, Arial, or system defaults for headings (Impeccable anti-slop rule).
Import `@jason/ui-kit/fonts.css` to self-host the Latin variable fonts. Without it,
the declared system fallbacks remain safe. Never use Inter or Arial for headings.
## Radius, elevation, motion
- Radius scale: 6 / 10 / 14 / 20px.
@@ -37,11 +39,13 @@ Never Inter, Arial, or system defaults for headings (Impeccable anti-slop rule).
2. Variants via `class-variance-authority`, not ad-hoc conditionals.
3. Interactive primitives wrap Radix (focus traps, keyboard nav, ARIA for free).
4. Focus-visible ring on every interactive element.
5. Don't nest cards inside cards. Don't put gray text on colored fills.
5. Don't nest cards inside cards. Use semantic foreground tokens on colored fills.
6. Review every new state in the showcase in dark, light, narrow, and reduced-motion modes.
## Included
Primitives: Button, Card, Input, Select (themed Radix popover), Textarea, Label,
Badge, Dialog, DropdownMenu, Table, Toaster, Spinner, EmptyState, StatCard.
Primitives: Button, Card, FormField, Input, Select, Textarea, Label, Checkbox,
Switch, Tabs, Tooltip, Badge, Dialog, DropdownMenu, Table, Pagination, Skeleton,
Toaster, Spinner, EmptyState, StatCard.
Motion: FadeIn, Stagger/StaggerItem.
Animated: AnimatedNumber, SpotlightCard.
Blocks: AppShell, CommandPalette, Hero, FeatureGrid, Pricing.