[Overview](https://rickylabs.github.io/netscript/design-system/)[Guidelines](https://rickylabs.github.io/netscript/design-system/guidelines/)[Token contract](https://rickylabs.github.io/netscript/design-system/token-contract/)[Docs kit](https://rickylabs.github.io/netscript/design-system/docs-kit/)[Theme builder](https://rickylabs.github.io/netscript/create/)[Components](https://rickylabs.github.io/netscript/design-system/components/)[Create your own theme](https://rickylabs.github.io/netscript/design-system/create-your-own-theme/)[Studio](https://rickylabs.github.io/netscript/design-system/themes/studio/)[Tonal](https://rickylabs.github.io/netscript/design-system/themes/tonal/)[Bloom](https://rickylabs.github.io/netscript/design-system/themes/bloom/)[Cupertino](https://rickylabs.github.io/netscript/design-system/themes/cupertino/)[Liquid](https://rickylabs.github.io/netscript/design-system/themes/liquid/)[Fluent](https://rickylabs.github.io/netscript/design-system/themes/fluent/)[Brutal](https://rickylabs.github.io/netscript/design-system/themes/brutal/)[Filigrane](https://rickylabs.github.io/netscript/design-system/themes/filigrane/)[Terminal](https://rickylabs.github.io/netscript/design-system/themes/terminal/)[Pixel](https://rickylabs.github.io/netscript/design-system/themes/pixel/)[Tactile](https://rickylabs.github.io/netscript/design-system/themes/tactile/) # Design system How to design a Fresh UI theme that matches the quality of the reference themes and works with the NetScript framework. The guidelines have two readers: - a designer creating or extending a theme; - an AI agent working from a `SKILL.md` and `DESIGN.md` pair. The guidelines define the token contract every theme follows (§1 to §3), the method for designing and checking a theme (§4 and §5), the existing themes (§6), and the steps for adding and shipping a new one (§7 and §8). > **Status: token names are provisional.** The role names below are the current Figma contract. The tokens build (#2414) turns them into DTCG 2025.10 tokens with resolver modes. The component anatomy spec (#2416) freezes anatomy and data-attribute variants. Until both land, treat names as stable and values as owned by Figma. Do not invent new core role names. NetScript default [Studio · Utility](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-utility) `neutral × ink` ## 1. Two rules that override everything 1. **Figma owns values; code owns names.** A theme changes the values of existing roles, tiers and modes. It never renames a core role or introduces a new core role on its own. New namespaced roles come only through a style's role manifest (§2.4). CI rejects exported token names that code does not know. 2. **A theme is a language, not a palette.** Recolouring and re-rounding the default UI is not a theme. A theme language is a **style**: it owns a depth model, a shape language, a type system and its own version of every component, each traceable to a documented reference (§2.4). ## Theme catalogue 11 languages · 7 Studio flavors · light and dark ![Studio · Utility Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-utility--light.webp) ![Studio · Utility Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-utility--dark.webp) ### [Studio · Utility](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-utility) NetScript default Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Utility Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-utility--light.webp) *Light* ![Studio · Utility Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-utility--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Tonal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tonal--light.webp) ![Tonal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tonal--dark.webp) ### [Tonal](https://rickylabs.github.io/netscript/design-system/themes/tonal/) Material 3 Expressive for NetScript. Tonal surfaces replace borders, with a saturated hero KPI, shape-morphing connected controls and a floating toolbar with a FAB. Compare light and dark ![Tonal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tonal--light.webp) *Light* ![Tonal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tonal--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/tonal/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/tonal/SKILL.md) ![Bloom Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/bloom--light.webp) ![Bloom Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/bloom--dark.webp) ### [Bloom](https://rickylabs.github.io/netscript/design-system/themes/bloom/) Widget-first Material You with notch-cut pastel widgets on warm paper, a large regular grotesk and black action discs. Compare light and dark ![Bloom Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/bloom--light.webp) *Light* ![Bloom Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/bloom--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/bloom/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/bloom/SKILL.md) ![Cupertino Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/cupertino--light.webp) ![Cupertino Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/cupertino--dark.webp) ### [Cupertino](https://rickylabs.github.io/netscript/design-system/themes/cupertino/) Apple-inspired classic: a translucent floating sidebar, a large-title header, capsule buttons, inset grouped lists and blur-only materials, with full-row system-blue selection on opaque slate content cards. Compare light and dark ![Cupertino Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/cupertino--light.webp) *Light* ![Cupertino Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/cupertino--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/cupertino/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/cupertino/SKILL.md) ![Liquid Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/liquid--light.webp) ![Liquid Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/liquid--dark.webp) ### [Liquid](https://rickylabs.github.io/netscript/design-system/themes/liquid/) macOS 27 Liquid Glass over a real desktop: a translucent edge-to-edge sidebar, kit-recipe glass toolbar groups, and a lensing inspector sheet and selection bar floating over opaque content. Compare light and dark ![Liquid Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/liquid--light.webp) *Light* ![Liquid Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/liquid--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/liquid/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/liquid/SKILL.md) ![Fluent Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/fluent--light.webp) ![Fluent Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/fluent--dark.webp) ### [Fluent](https://rickylabs.github.io/netscript/design-system/themes/fluent/) Fluent 2 as Windows 11 ships it: a Mica window, NavigationView with the 3×16 accent pill, flat card layers, elevation borders instead of shadows, and WinUI theme brushes. Compare light and dark ![Fluent Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/fluent--light.webp) *Light* ![Fluent Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/fluent--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/fluent/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/fluent/SKILL.md) ![Brutal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/brutal--light.webp) ![Brutal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/brutal--dark.webp) ### [Brutal](https://rickylabs.github.io/netscript/design-system/themes/brutal/) Gumroad-style neo-brutalism. Flat saturated blocks, black ink outlines and hard zero-blur offset shadows that stay black in both schemes. Compare light and dark ![Brutal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/brutal--light.webp) *Light* ![Brutal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/brutal--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/brutal/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/brutal/SKILL.md) ![Filigrane Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/filigrane--light.webp) ![Filigrane Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/filigrane--dark.webp) ### [Filigrane](https://rickylabs.github.io/netscript/design-system/themes/filigrane/) Minimal, thin and legible. Light Newsreader numerals over a calm Hanken Grotesk UI, held together by hairlines instead of boxes or shadows. Compare light and dark ![Filigrane Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/filigrane--light.webp) *Light* ![Filigrane Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/filigrane--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/filigrane/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/filigrane/SKILL.md) ![Terminal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/terminal--light.webp) ![Terminal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/terminal--dark.webp) ### [Terminal](https://rickylabs.github.io/netscript/design-system/themes/terminal/) A Charm-style TUI on a character grid. Rounded Lip Gloss panes, one Geist Mono 14/24 scale, bracketed keys and an inverse lime selection bar. Compare light and dark ![Terminal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/terminal--light.webp) *Light* ![Terminal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/terminal--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/terminal/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/terminal/SKILL.md) ![Pixel Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/pixel--light.webp) ![Pixel Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/pixel--dark.webp) ### [Pixel](https://rickylabs.github.io/netscript/design-system/themes/pixel/) A NetScript-amber pixel language with Ore UI physics: banded amber stripes, stepped 2px-grid corners, Pixelify Sans numbers and Space Mono labels, and keys that sit on a 4px lip and press flat. Compare light and dark ![Pixel Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/pixel--light.webp) *Light* ![Pixel Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/pixel--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/pixel/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/pixel/SKILL.md) ![Tactile Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tactile--light.webp) ![Tactile Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tactile--dark.webp) ### [Tactile](https://rickylabs.github.io/netscript/design-system/themes/tactile/) Guideline-based neumorphism. One material lit from the top left, four heights, convex keys that rise, concave wells that sink, and selection that sinks. Compare light and dark ![Tactile Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tactile--light.webp) *Light* ![Tactile Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/tactile--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/tactile/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/tactile/SKILL.md) ## More Studio flavors One component anatomy, seven product personalities. [Explore Studio](https://rickylabs.github.io/netscript/design-system/themes/studio/). ![Studio · Cloud Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-cloud--light.webp) ![Studio · Cloud Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-cloud--dark.webp) ### [Studio · Cloud](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-cloud) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Cloud Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-cloud--light.webp) *Light* ![Studio · Cloud Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-cloud--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Studio · Workshop Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-workshop--light.webp) ![Studio · Workshop Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-workshop--dark.webp) ### [Studio · Workshop](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-workshop) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Workshop Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-workshop--light.webp) *Light* ![Studio · Workshop Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-workshop--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Studio · Playful Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-playful--light.webp) ![Studio · Playful Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-playful--dark.webp) ### [Studio · Playful](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-playful) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Playful Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-playful--light.webp) *Light* ![Studio · Playful Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-playful--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Studio · Ledger Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-ledger--light.webp) ![Studio · Ledger Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-ledger--dark.webp) ### [Studio · Ledger](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-ledger) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Ledger Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-ledger--light.webp) *Light* ![Studio · Ledger Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-ledger--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Studio · Atelier Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-atelier--light.webp) ![Studio · Atelier Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-atelier--dark.webp) ### [Studio · Atelier](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-atelier) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Atelier Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-atelier--light.webp) *Light* ![Studio · Atelier Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-atelier--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) ![Studio · Signal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-signal--light.webp) ![Studio · Signal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-signal--dark.webp) ### [Studio · Signal](https://rickylabs.github.io/netscript/design-system/themes/studio/#design-flavor-signal) Seven product flavors that share one component anatomy and differ in ground, shape, type, density and component variants, built on shadcn/ui and Linear conventions. Utility is the NetScript default. Compare light and dark ![Studio · Signal Orders specimen, light scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-signal--light.webp) *Light* ![Studio · Signal Orders specimen, dark scheme](https://rickylabs.github.io/netscript/assets/design-system/thumbnails/studio-signal--dark.webp) *Dark* [DESIGN.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/DESIGN.md) [SKILL.md](https://raw.githubusercontent.com/rickylabs/netscript/main/docs/design-system/themes/studio/SKILL.md) [Read the complete guidelines](https://rickylabs.github.io/netscript/design-system/guidelines/) · [Create your own theme](https://rickylabs.github.io/netscript/design-system/create-your-own-theme/) · [Fresh UI API reference](https://rickylabs.github.io/netscript/reference/fresh-ui/)