# uilab — full catalog
> Every visual-vocabulary item with its prompt or token block inlined, so an agent can read this one file instead of round-tripping through /catalog.json per item.
Site: https://ui-lab-ten.vercel.app
Count: 164
### Tilt Card (component)
3D perspective tilt on hover with cursor-tracked glare.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tilt-card.json
### Button (component)
Spring-pressed Button plus StatefulButton (idle → loading → success / error) and MagneticButton.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/button.json
### Marquee (component)
Infinite horizontal or vertical scroll with pause-on-hover.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/marquee.json
### Tabs (component)
Pill, segment or underline tabs with a spring layoutId indicator.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tabs.json
### Switch (component)
Toggle with a spring-driven thumb and press feedback.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/switch.json
### Input (component)
Text input with label, left/right icons, error shake and success check draw.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/input.json
### Select (component)
Composable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/select.json
### Checkbox (component)
Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/checkbox.json
### Radio Group (component)
Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/radio.json
### Bottom Sheet (component)
Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bottom-sheet.json
### Shared Layout Background (component)
A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shared-layout-bg.json
### Preview Rail (component)
Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/preview-rail.json
### Dock (component)
macOS-style dock with grouped actions and a gliding active pill.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dock.json
### Tooltip (component)
Hover or focus tooltip with blur enter/exit and spring spawn, plus a Morph variant where one shared bubble glides and resizes between neighboring triggers.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tooltip.json
### Popover (component)
Gooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/popover.json
### Morphing Modal (component)
Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/morphing-modal.json
### Text Animation (component)
Animated text primitives for reveal sequences, shimmer loading states and letter-cascade swaps.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-animation.json
### Number Animation (component)
Animated number primitives for count-up values and rolling digit tickers.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/number.json
### Animated Badge (component)
Status badge with animated state icons, pulse feedback and compact size variants.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-badge.json
### Action Swap (component)
CTA button and slot primitives for swapping text and icons with blur motion.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/action-swap.json
### Animated Toast Stack (component)
Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-toast-stack.json
### Theme Toggle (component)
Theme toggle button with a full-page rectangle clip-path reveal via the View Transition API.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/theme-toggle.json
### Bouncy Accordion (component)
Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bouncy-accordion.json
### Drawer (component)
Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/drawer.json
### Scroll Animation (component)
Scroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-animation.json
### Range Slider (component)
Range slider with tick dots and a bouncy vertical-bar thumb that glides between snapped steps; drag and keyboard control, reduced-motion safe.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/range-slider.json
### Wheel Picker (component)
iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for date and time pickers, reduced-motion safe.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wheel-picker.json
### Table (component)
Virtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/table.json
### Shader Background (component)
Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/shader-background.json
### Cylinder Carousel (component)
A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/cylinder-carousel.json
### Loader (component)
Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/loader.json
### Text Scramble (component)
Scrambled glyphs resolve left-to-right into the real text — on view, on hover, or whenever the text prop changes. Width stays stable mid-scramble; reduced-motion shows the final text instantly.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/text-scramble.json
### WebGL Background (component)
Fragment-shader hero backgrounds (aurora, silk, plasma, light rays, pixel blast with click ripples, dither) behind a single typed variant prop. Reduced-motion renders one static frame; no WebGL falls back to a matching CSS gradient.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/webgl-background.json
### Halftone Image (component)
Renders any bitmap as a printed halftone screen on canvas: tone drives dot size on a grid you can rotate (45° reads as print), with circle or square dots and adjustable pitch. Pass a second plate and the grey screen crossfades to colour on hover, each dot inked with the tone beneath it. Transparent between dots, so it composes over any surface.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/halftone-image.json
### Star Border (component)
A slow light orbits the border of a CTA button or card — a pure-CSS conic-gradient wrapper with color, speed and thickness props. Reduced-motion freezes it into a static ring.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/star-border.json
### Bounce Cards (component)
A stacked deck of cards fans open with a staggered spring bounce when it enters the view. Spacing, rotation and stagger are tunable; reduced-motion keeps the fanned layout and only fades in.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bounce-cards.json
### Glare Hover (component)
A diagonal band of light sweeps across a card or button on hover. Color, angle and duration props; touch devices skip it, reduced-motion swaps the sweep for a soft opacity highlight.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/glare-hover.json
### Skeleton (component)
Loading placeholder block with a soft shimmer sweep — shape it entirely with className, compose avatars, text bars and image blocks. Reduced-motion swaps the sweep for a calm opacity pulse.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/skeleton.json
### Scroll Hint (component)
A hero-section scroll-down indicator in two shapes: a mouse outline with a dropping dot, or a pair of pulsing chevrons. currentColor sizing, optional label, reduced-motion shows the static glyph.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/scroll-hint.json
### Animated Icon (component)
Hover-played icon micro-interactions in one component — draw, wiggle, spin, bounce, pop, pulse, nudge — driven by a single variant prop. Built on motion + lucide, reduced-motion safe.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/animated-icon.json
### Dropdown Menu (component)
Composable animated dropdown menu: a corner-origin spring entrance with viewport collision flip, one shared focus surface that glides between rows for both pointer and keyboard, grouped labels, two-line items with icons and shortcuts, checkbox items, a hover/arrow-key submenu, and full roving-focus keyboard navigation.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dropdown-menu.json
### Expanding Card (component)
App Store-style card expansion: the card itself morphs into a centered modal over a heavily blurred backdrop via a shared layoutId FLIP — expanded content fades in once the surface lands, and the card shrinks back on close.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expanding-card.json
### Recording Card (component)
Presents any content as a screen recording: wallpaper and scrim behind a window mock, a webcam bubble that doubles as the play control, a running timer with a blinking record dot, and a “tap for sound” pill that slides back behind the bubble once playing. Sized entirely in container-query units, so one card scales from grid thumbnail to full-width hero with no breakpoints — plus an optional aspect-locked theatre view.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/recording-card.json
### Login Card (component)
Chinese product sign-in modal: a blue gradient header with floating bokeh, a WeChat QR-scan column beside phone quick-login (country-code dropdown, code field with a 60s resend countdown), an agreement checkbox that shakes on invalid submit, and an ICP footer.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/login-card.json
### Thread List (component)
Sidebar conversation list: section headers with action slots, 30px rows with unread dots and time metas that swap to hover actions, and an active pill that glides between rows via shared layout.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/thread-list.json
### Artifact Panel (component)
Side-pane canvas for AI-generated artifacts: hairline panel shell, header with action cluster, preview/code view toggle with cross-fade, and a version navigator with restore.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/artifact-panel.json
### Agent Inbox (component)
Human-in-the-loop approval queue: risk-tiered request items with expiry and detail expand, approve/deny flows that settle in place, and an action receipt card with scope, diff stats and undo.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-inbox.json
### Agent Trace (component)
Activity rail for agent runs: kind-styled step nodes on a hairline rail, live steps with pulse ring and cadenced shimmer, raw-output expand, parallel tool groups, and nested sub-agent mini traces.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-trace.json
### Streaming JSON (component)
Tolerant syntax-colored rendering for partial JSON as it streams in: an incremental tokenizer that survives unclosed strings, fade-in for freshly arrived spans, a streaming caret, and a function-call wrapper.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-json.json
### Citations (component)
Inline citation chips with a hover source-preview popover, plus source cards and a staggered source list for the answer footer.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/citations.json
### Voice Orb (component)
Immersive voice-mode orb: one continuous gradient sphere whose breathing, hue drift, echo rings and thinking sheen follow idle / listening / thinking / speaking states.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/voice-orb.json
### Activity Stats (component)
Usage-summary widgets: a connected stats bar for headline metrics, a GitHub-style contribution heatmap with a color-mix intensity scale and column-cascade entrance, and a text period switch.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/activity-stats.json
### Settings Panel (component)
Preference-form building blocks: a titled settings group with hairline-divided rows, a hex color field with auto-contrasting text, a text field, a preset-picker button and a ghost header action.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/settings-panel.json
### Agent Thread (component)
AI agent conversation stream: user message pills, turn headers, markdown typography, thinking & tool-call status rows, approval card, streaming caret, file & diff artifact cards with expand animation, command rows, and hover-revealed turn actions.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-thread.json
### Agent Composer (component)
AI agent chat composer with context chips, access chip, model picker with a segmented reasoning-effort slider, and a morphing send/stop button, plus an add menu and a voice dictation bar.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-composer.json
### Agent Workbench (component)
Responsive agent app shell: a resizable three-pane desktop layout, tablet side overlays, and mobile single-surface navigation, with spring transitions and a full-width 46px toolbar overlay. Includes a pinned summary card overlay.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-workbench.json
### Availability Scheduler (component)
Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/availability-scheduler.json
### Multi-chain Swap (component)
Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swap.json
### Dynamic Island (component)
iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/dynamic-island.json
### Command Palette (component)
⌘K palette with fuzzy filter, spring-animated active row and glass surface.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/command-palette.json
### Expandable Action Bar (component)
Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-action-bar.json
### Overflow Actions (component)
Connected pill rail for primary actions that springs open to reveal extra controls.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/overflow-actions.json
### Expandable Tabs (component)
Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/expandable-tabs.json
### Swipeable List (component)
Mobile-style list rows that swipe left or right to reveal contextual action buttons.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/swipeable-list.json
### File Upload (component)
Drag-and-drop upload queue with progress rows, retry/remove actions and reduced-motion-safe state changes.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-upload.json
### Prediction Market (component)
Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prediction-market.json
### Wallet Card (component)
Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, copy-address, and Send / Deposit / Swap / Buy actions.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/wallet-card.json
### OTP Input (component)
One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/otp-input.json
### Bloom Menu (component)
A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/bloom-menu.json
### Feedback Widget (component)
Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/feedback-widget.json
### 404 / Not Found (component)
Animated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/not-found.json
### Step Form (component)
Focused one-question-at-a-time multi-step form: segmented progress with a mono counter, directional slide transitions with container height morph, text and choice steps, shake-on-invalid validation with reserved error space, Enter-to-advance, and a drawn-check success state.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/step-form.json
### Empty State (component)
Animated empty-state blocks with hand-drawn line-art illustrations, concise copy and a primary action — an inbox-zero envelope, a hover-to-open archive cabinet, and a scanning search lens.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/empty-state.json
### Prompt Bar (component)
Compact credits-aware AI prompt bar: a dismissible credits banner, queued messages you can steer, edit or drop while streaming, slash-commands that morph into a removable skill chip, demo attachments, a web-search toggle pill, a model menu, and a morphing send-to-stop button.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-bar.json
### Prompt Input (component)
An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/prompt-input.json
### Todo List (component)
A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/todo-list.json
### Code Block (component)
A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/code-block.json
### Approval Card (component)
A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/approval-card.json
### File Diff (component)
A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/file-diff.json
### Tool Result (component)
A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-result.json
### Streaming Response (component)
A stable response surface with completion actions, rendered content, and an expandable source summary.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/streaming-response.json
### Image Generation (component)
A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/image-generation.json
### Tool Approval (component)
A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/tool-approval.json
### Agent Activity (component)
One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
Fetch: npx shadcn@latest add https://ui-lab-ten.vercel.app/r/agent-activity.json
### Motion tokens (atom-set)
Bézier curves, springs, and durations for consistent motion.
Fetch: copy the block below
```markdown
## Motion
| Token | Value |
| --- | --- |
| curve/swift-out | cubic-bezier(0.16, 1, 0.3, 1) |
| curve/push-pull | cubic-bezier(0.77, 0, 0.175, 1) |
| curve/drawer | cubic-bezier(0.32, 0.72, 0, 1) |
| spring/press | { type: "spring", stiffness: 500, damping: 30, mass: 0.6 } |
| spring/swap | { type: "spring", stiffness: 460, damping: 30, mass: 0.55 } |
| spring/panel | { type: "spring", stiffness: 420, damping: 40, mass: 0.5 } |
| spring/glide | { type: "spring", stiffness: 360, damping: 32, mass: 0.6 } |
| spring/follow | { type: "spring", stiffness: 200, damping: 15, mass: 0.3 } |
| duration/instant | 90ms |
| duration/quick | 150ms |
| duration/standard | 220ms |
| duration/deliberate | 320ms |
| duration/ambient | 600ms |
**Rule:** Use these curves, spring physics, and durations consistently; never replace them with generic easing defaults.
```
### Shape tokens (atom-set)
A radius scale, elevation shadows, and z-index layers for consistent surfaces.
Fetch: copy the block below
```markdown
## Shape
| Token | Value |
| --- | --- |
| radius/none | 0 |
| radius/xs | 4px |
| radius/sm | 6px |
| radius/md | 10px |
| radius/lg | 12.5px |
| radius/xl | 20px |
| radius/2xl | 25px |
| radius/full | 9999px |
| shadow/hairline/light | 0 0 0 0.5px rgb(0 0 0 / 0.08) |
| shadow/hairline/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157) |
| shadow/raised/light | 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.05) |
| shadow/raised/dark | 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.4) |
| shadow/floating/light | 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 3px 7.5px rgb(0 0 0 / 0.04), 0 0 20px rgb(0 0 0 / 0.05) |
| shadow/floating/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157), 0 3px 7.5px rgb(0 0 0 / 0.2), 0 0 20px rgb(0 0 0 / 0.25) |
| shadow/prominent/light | 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 12px 32px rgb(0 0 0 / 0.12) |
| shadow/prominent/dark | 0 0 0 0.5px rgb(255 255 255 / 0.157), 0 12px 32px rgb(0 0 0 / 0.5) |
| layer/base | 0 |
| layer/lifted | 10 |
| layer/sticky | 20 |
| layer/dropdown | 30 |
| layer/overlay | 40 |
| layer/toast | 50 |
| layer/tooltip | 60 |
**Rule:** Use the radius scale consistently, establish elevation with hairlines and shallow shadows before prominent shadows, and stack UI only with these named layers; never invent one-off z-index values like 999.
```
### Typography tokens (atom-set)
Font pairings and a type scale for consistent text.
Fetch: copy the block below
```markdown
## Typography
| Token | Value |
| --- | --- |
| font/system-neutral | display: Geist, Inter, system-ui, sans-serif; body: Geist, Inter, system-ui, sans-serif; mono: 'Geist Mono', ui-monospace, monospace |
| font/native-crisp | display: 'SF Pro Display', -apple-system, system-ui; body: 'SF Pro Text', -apple-system, system-ui; mono: 'SF Mono', ui-monospace, Menlo |
| font/editorial-serif | display: 'Tiempos Headline', Georgia, serif; body: -apple-system, 'Segoe UI', sans-serif; mono: ui-monospace, monospace |
| font/humanist-warm | display: 'Camera Plain', 'PingFang SC', ui-sans-serif, system-ui; body: 'Camera Plain', 'PingFang SC', ui-sans-serif, system-ui; mono: ui-monospace, monospace |
| font/geek-mono | display: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; body: ui-sans-serif, system-ui; mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace |
| font/swiss-grotesk | display: 'Helvetica Neue', Helvetica, Arial, sans-serif; body: 'Helvetica Neue', Helvetica, Arial, sans-serif; mono: ui-monospace |
| text/display | 48px / 1.1 / -0.02em |
| text/headline | 28px / 1.2 / -0.01em |
| text/title | 20px / 1.3 / 0 |
| text/body | 16px / 1.5 / 0 |
| text/body-sm | 14px / 1.5 / 0 |
| text/caption | 12px / 1.4 / 0.01em |
**Rule:** Load no webfonts for these system pairings, keep Chinese on the system family, and use only this type scale.
```
### Spacing tokens (atom-set)
A spacing scale, density presets, and responsive breakpoints for a consistent layout rhythm.
Fetch: copy the block below
```markdown
## Spacing
| Token | Value |
| --- | --- |
| micro | 4px |
| tight | 8px |
| element | 12px |
| base | 16px |
| group | 24px |
| block | 32px |
| section | 48px |
| region | 64px |
| density/compact | 32px row / 8px padding |
| density/standard | 40px row / 12px padding |
| density/comfortable | 48px row / 16px padding |
| breakpoint/sm | 640px |
| breakpoint/md | 768px |
| breakpoint/lg | 1024px |
| breakpoint/xl | 1280px |
| breakpoint/2xl | 1536px |
**Rule:** Use this scale across the entire product; never introduce off-scale values such as 13px or 18px. Design mobile-first; add a breakpoint only where the layout actually breaks.
```
### Line tokens (atom-set)
Hairlines, borders, and outlines for consistent dividers.
Fetch: copy the block below
```markdown
## Lines
| Token | Value |
| --- | --- |
| divider/light | border: 1px solid rgb(0 0 0 / 0.05) |
| divider/dark | border: 1px solid rgb(255 255 255 / 0.06) |
| border/light | border: 1px solid rgb(0 0 0 / 0.1) |
| border/dark | border: 1px solid rgb(255 255 255 / 0.1) |
| border-strong/light | border: 1px solid rgb(0 0 0 / 0.15) |
| border-strong/dark | border: 1px solid rgb(255 255 255 / 0.15) |
| hairline-ring/light | box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08) |
| hairline-ring/dark | box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.157) |
| focus-ring/light | outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px |
| focus-ring/dark | outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px |
**Rule:** Do not mix a hairline ring and a 1px border on elements at the same hierarchy level.
```
### Background tokens (atom-set)
Static CSS background recipes for texture, plus fade masks that keep a texture from reading as wallpaper.
Fetch: copy the block below
```markdown
## Backgrounds
### Grid
#### Light
```css
background-image: linear-gradient(rgb(0 0 0 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 0.06) 1px, transparent 1px); background-size: 24px 24px;
```
#### Dark
```css
background-image: linear-gradient(rgb(255 255 255 / 0.07) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.07) 1px, transparent 1px); background-size: 24px 24px;
```
**Use when:** For dashboard and technical backdrops.
### Dot Matrix
#### Light
```css
background-image: radial-gradient(rgb(0 0 0 / 0.12) 1px, transparent 1.5px); background-size: 20px 20px;
```
#### Dark
```css
background-image: radial-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1.5px); background-size: 20px 20px;
```
**Use when:** For airy empty states and card backgrounds.
### Halftone Fine
#### Light
```css
background-image: radial-gradient(circle, rgb(0 0 0 / 0.26) 0.55px, transparent 1.05px); background-size: 5px 5px;
```
#### Dark
```css
background-image: radial-gradient(circle, rgb(255 255 255 / 0.32) 0.55px, transparent 1.05px); background-size: 5px 5px;
```
**Use when:** As a whole-surface print grain that stays texture rather than pattern — it should read as paper, not polka dots.
### Halftone Medium
#### Light
```css
background-image: radial-gradient(circle, rgb(0 0 0 / 0.36) 0.7px, transparent 1.25px); background-size: 7px 7px;
```
#### Dark
```css
background-image: radial-gradient(circle, rgb(255 255 255 / 0.45) 0.7px, transparent 1.25px); background-size: 7px 7px;
```
**Use when:** The default print screen — coarse enough to see the dots, fine enough to sit under body copy.
### Halftone Coarse
#### Light
```css
background-image: radial-gradient(circle, rgb(0 0 0 / 0.46) 1.1px, transparent 1.7px); background-size: 11px 11px;
```
#### Dark
```css
background-image: radial-gradient(circle, rgb(255 255 255 / 0.55) 1.1px, transparent 1.7px); background-size: 11px 11px;
```
**Use when:** For editorial art direction where the screen itself is the statement — behind display headings and hero art.
### Blueprint
#### Light
```css
background-color: #f4f7fb; background-image: linear-gradient(rgb(37 99 235 / 0.10) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.10) 1px, transparent 1px), linear-gradient(rgb(37 99 235 / 0.20) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.20) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
```
#### Dark
```css
background-color: #0b1220; background-image: linear-gradient(rgb(37 99 235 / 0.16) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.16) 1px, transparent 1px), linear-gradient(rgb(37 99 235 / 0.28) 1px, transparent 1px), linear-gradient(90deg, rgb(37 99 235 / 0.28) 1px, transparent 1px); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
```
**Use when:** For engineering and technical narratives.
### Noise Grain
#### Light
```css
background-image: url("data:image/svg+xml,"); background-size: 120px 120px;
```
#### Dark
```css
background-image: url("data:image/svg+xml,"); background-size: 120px 120px;
```
**Use when:** As an overlay that removes digital flatness and adds texture.
### Mesh Gradient
#### Light
```css
background-color: #fafafa; background-image: radial-gradient(at 18% 22%, rgb(99 102 241 / 0.18), transparent 50%), radial-gradient(at 82% 28%, rgb(236 72 153 / 0.15), transparent 48%), radial-gradient(at 50% 82%, rgb(45 212 191 / 0.16), transparent 50%);
```
#### Dark
```css
background-color: #0c0d10; background-image: radial-gradient(at 18% 22%, rgb(99 102 241 / 0.22), transparent 50%), radial-gradient(at 82% 28%, rgb(236 72 153 / 0.19), transparent 48%), radial-gradient(at 50% 82%, rgb(45 212 191 / 0.20), transparent 50%);
```
**Use when:** For a soft atmospheric backdrop behind heroes and landing pages.
### Radial Glow
#### Light
```css
background-image: radial-gradient(120% 80% at 50% 0%, rgb(51 156 255 / 0.16), transparent 60%);
```
#### Dark
```css
background-image: radial-gradient(120% 80% at 50% 0%, rgb(51 156 255 / 0.22), transparent 60%);
```
**Use when:** To guide attention toward a top heading or primary action.
### Diagonal Stripes
#### Light
```css
background-image: repeating-linear-gradient(45deg, rgb(0 0 0 / 0.04) 0 10px, transparent 10px 20px);
```
#### Dark
```css
background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0 10px, transparent 10px 20px);
```
**Use when:** For emphasis areas, warnings, and retro treatments.
### Scanlines
#### Light
```css
background-image: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.05) 0 1px, transparent 1px 3px);
```
#### Dark
```css
background-image: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px);
```
**Use when:** For retro, technical, and terminal-inspired interfaces.
### Vignette
#### Light
```css
background-image: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.10));
```
#### Dark
```css
background-image: radial-gradient(120% 120% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.28));
```
**Use when:** To focus the center and subdue the edges.
### Fade mask — Fade Bottom
```css
mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
```
**Use when:** The default. A hero texture dissolves into the page so the section below needs no divider.
### Fade mask — Fade Top
```css
mask-image: linear-gradient(to bottom, transparent 0%, #000 55%, #000 100%);
```
**Use when:** For a texture that belongs to the section below it — it grows in from the seam instead of starting abruptly.
### Fade mask — Fade Ring
```css
mask-image: radial-gradient(transparent 14%, #000 60%, transparent 100%);
```
**Use when:** Punches a hole in the middle of the texture so headline and copy sit on clean ground while the edges stay textured.
### Fade mask — Fade Edges
```css
mask-image: radial-gradient(#000 30%, transparent 92%);
```
**Use when:** Concentrates the texture at the centre and dissolves it before the edges, so a card or panel has no hard texture boundary.
**Fade rule:** A fade is orthogonal to a texture — any recipe above can wear any mask. Put the texture on its own layer and mask that layer, never the container:
```html
```
Masking the container fades the content along with the texture.
**Rule:** Use these static CSS recipes for texture; for dynamic shader effects, use the `webgl-background` component. Tune any dot texture by its radius pair, not its opacity — halving both stops keeps the grid and quiets the screen.
```
### Outline (icon-style)
The default for tool interfaces.
Fetch: copy the block below
```text
Outline icons, 1.5px stroke, round line caps, 24px grid, and even visual weight.
```
### Bold Outline (icon-style)
Lively, youthful interfaces that need more visual weight.
Fetch: copy the block below
```text
Bold outline icons, 2px stroke, round line caps, 24px grid, with lively and even visual weight.
```
### Rounded (icon-style)
Friendly, consumer-facing products.
Fetch: copy the block below
```text
Rounded outline icons with clearly rounded caps and joins, a 24px grid, and friendly even weight.
```
### Filled (icon-style)
High-recognition states such as mobile tab bars.
Fetch: copy the block below
```text
Filled icons with solid silhouettes, a 24px grid, high recognition, and consistent optical area.
```
### Duotone (icon-style)
Brand-forward interfaces that can support a stronger icon voice.
Fetch: copy the block below
```text
Duotone icons with a solid primary shape and a same-color secondary shape at 30% opacity on a 24px grid.
```
### Pixel (icon-style)
Retro-computing aesthetics and deliberately game-like products.
Fetch: copy the block below
```text
Pixel icons built from hard-edged square cells on a 16px grid, with no curves or antialiased diagonals.
```
### Draw-on (icon-motion)
Entrance flourish for a confirm or success icon; the stroke draws itself in.
Prompt: On hover, animate the icon stroke with pathLength from 0 to 1 so it draws itself in over ~0.6s.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, animate the icon stroke with pathLength from 0 to 1 so it draws itself in over ~0.6s.
```
### Wiggle (icon-motion)
Notification and alert icons; a quick side-to-side wiggle draws the eye.
Prompt: On hover, rotate the icon in a keyframe wiggle of [0, -14, 10, -6, 0] degrees over ~0.6s.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, rotate the icon in a keyframe wiggle of [0, -14, 10, -6, 0] degrees over ~0.6s.
```
### Spin (icon-motion)
Settings, sync, and refresh icons; a full 360° rotation signals process.
Prompt: On hover, rotate the icon 360 degrees once with an easeInOut curve over ~0.6s.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, rotate the icon 360 degrees once with an easeInOut curve over ~0.6s.
```
### Bounce (icon-motion)
Download and scroll-down cues; a springy vertical bounce implies action.
Prompt: On hover, bounce the icon vertically with a spring, y from 0 to 4 and back, stiffness ~400.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, bounce the icon vertically with a spring, y from 0 to 4 and back, stiffness ~400.
```
### Pop (icon-motion)
Add and create actions; a quick scale pop gives tactile feedback.
Prompt: On hover, pop the icon scale from 1 to 1.25 and back with a spring.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, pop the icon scale from 1 to 1.25 and back with a spring.
```
### Pulse (icon-motion)
Like and live-status icons; a continuous gentle pulse while hovered.
Prompt: While hovered, loop the icon scale between 1 and 1.15 every ~0.8s.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: While hovered, loop the icon scale between 1 and 1.15 every ~0.8s.
```
### Nudge (icon-motion)
'Next', 'send', and link icons; a small directional nudge hints at travel.
Prompt: On hover, nudge the icon along x by 4px and back with a spring.
Fetch: copy the block below
```text
Install the animated-icon component, then apply this pattern to ANY lucide icon (there are 1500+):
Interaction: On hover, nudge the icon along x by 4px and back with a spring.
```
### Glassmorphism (style)
Frosted translucent cards floating over colorful glows, like a pane of misted glass.
Fetch: copy the block below
```text
Design this page in a glassmorphism style: a dark blue-violet gradient background with 2-3 large blurred color glows (cyan, violet). Cards and panels are translucent white (8-12% opacity) with backdrop-filter: blur(12px), a 1px semi-transparent white border (15-20%) and large 16-24px rounded corners. Text is white; create hierarchy by lowering opacity, not by changing hue. The primary button is near-solid white with dark text; secondary buttons stay glassy. Forbidden: white or light backgrounds, fully opaque cards, harsh dark shadows, small border radii, and blurring everything — blur belongs to cards and the nav only.
```
### Neumorphism (style)
A single soft gray-blue surface where every card and button seems pressed or embossed by light and shadow alone, no outlines anywhere.
Fetch: copy the block below
```text
Design this page in a neumorphism style: a single-hue light blue-gray background #e0e5ec; cards share the exact same color with no border, relying on a two-directional soft shadow (light from the top-left, box-shadow: 9px 9px 16px rgba(163,177,198,.55), -9px -9px 16px rgba(255,255,255,.95)) to read as embossed volume; corners are large and soft (18px/14px); body text is a low-contrast indigo-gray #44476a, muted text #7b7f9e; the accent is a soft periwinkle #6c7ee1, reserved for the primary button and icons; the primary button sits on the accent color with white text and the same soft shadow; the secondary button matches the page background and only 'pops' via shadow, never a border; dividers are a faint 1px #cdd3e0. Forbidden: pure black or white, any crisp outline, high-contrast color pairs, sharp hard-edged shadows, saturated clashing colors, and flat shadowless cards.
```
### Claymorphism (style)
Cards look pinched out of soft purple clay, plump and rounded with a light gleam caught in every fold.
Fetch: copy the block below
```text
Design this page in a claymorphism style: a soft lavender-blue background #eef1ff; cards are solid white #ffffff with oversized, almost gumdrop-like corners (30px, 18px on small components); the signature move is layering an inset highlight and an outer drop shadow together — inset 4px 4px 10px rgba(120,120,190,.18), inset -6px -6px 12px #ffffff, plus an outer 10px 14px 24px rgba(120,120,190,.28) — so cards read as pinched, puffy clay; the accent is candy purple #7c6cf6; badges sit on soft pink #ffd6ea with deep purple text; the primary button is purple with white text in a pill-like rounded shape; body text is deep grayish purple #2f2a45, muted text #6f6a8a; headings are weight 700, noticeably bold but never harsh. Forbidden: sharp square corners, pure black shadows, thin outline borders, desaturated gray tones, flat shadowless cards, and any glassy transparency.
```
### Liquid Glass (style)
Bright, dewy glass panels that glow with saturated light instead of hiding in a dark aurora — Apple's newest surface language.
Fetch: copy the block below
```text
Design this page in a liquid glass style: a bright blue-white gradient background linear-gradient(160deg, #dfe9f5 0%, #f4f8fd 55%, #e3ecf7 100%) — luminous and airy, never dark; cards are translucent white rgba(255,255,255,.45) layered with backdrop-filter: blur(20px) saturate(160%) so the base color shows through with a wetter, more saturated glow; borders are a near-solid 1px solid rgba(255,255,255,.75) that rings the edge with a liquid highlight; corners are either large and rounded (28px) or pushed all the way to a 999px capsule; the accent is true iOS blue #0a84ff, reserved for the primary button and interactive states; body text is deep near-black #1d1d1f, muted text is the same color at 60% opacity; the primary button is blue with white text in a capsule shape, with a soft shadow and a thin top highlight line to mimic light reflecting off water. Forbidden: dark backgrounds, dull low-saturation glass, hard square corners, matte flat-color borders, and the dark neon color-glow look of classic glassmorphism.
```
### Neubrutalism (style)
Thick black borders, hard offset shadows and clashing candy colors — deliberately unpolished, loudly alive.
Fetch: copy the block below
```text
Design this page in a neubrutalism style: a bright cream background; every card, button and input gets a 2px solid black border with a hard black shadow (box-shadow: 4px 4px 0 #111 — zero blur); corners are sharp or barely rounded (4-8px); headings are extra bold (800-900); clash saturated candy colors (hot pink, lemon yellow, mint). On hover, elements translate a few pixels toward the shadow while the shadow shrinks, so they feel physically pressed. Forbidden: soft shadows, any gradients, transparency, thin font weights, desaturated grays, large border radii.
```
### Brutalism (style)
Back to the web's rawest state — pure black, pure white, Times New Roman, none of neubrutalism's candy colors or hard shadows. This is 'raw' in the literal sense.
Fetch: copy the block below
```text
Design this page in brutalism (raw web) style: pure white background #ffffff with pure black text #000000, secondary text #333333; fall back to the browser's default serif stack — "Times New Roman", Times, serif — no custom web fonts; keep links native blue #0000ee with an underline; give every card and button a 1px solid #000000 table-like square border, zero radius; shadows are always none, no depth or hover-lift effects; headings are weight 700 with zero letter-spacing, relying only on font-size to build hierarchy; separate sections with 1px solid #000000 hairlines instead of whitespace. Forbidden: rounded corners, shadows, gradients, brand or candy colors, custom fonts, decorative hover/transform animations.
```
### Maximalism (style)
A violet gradient backdrop, lemon-yellow cards and colorful hard shadows — the exact opposite of 'less is more': more is more.
Fetch: copy the block below
```text
Design this page in maximalism style: a bright violet gradient page background linear-gradient(160deg, #6a2ff7 0%, #8b3df5 100%), white body text, semi-transparent white rgba(255,255,255,.75) for secondary text; cards in saturated lemon yellow #ffe14d with a 3px solid deep-violet border #16003b, 12px radius, and deep-violet #16003b text inside cards for contrast; every card and button gets a colorful hard shadow box-shadow: 6px 6px 0 0 #ff2d78 with zero blur; the accent is hot magenta #ff2d78, splashed across buttons, icon blocks and numbers; badges are cyan #2de1c2 with black text, uppercase with wide tracking; headings sit at font-weight 900, and elements are packed tight with almost no breathing room. Forbidden: generous whitespace, a single dominant hue, thin font weights, minimalist restraint, soft gradients or desaturated Morandi tones.
```
### Swiss Style (style)
Black on white plus one red: huge type, a strict grid and whitespace do all the talking.
Fetch: copy the block below
```text
Design this page in Swiss / International Typographic Style: pure white background, near-black text, exactly one accent color (classic Swiss red). Headlines use a very large sans-serif (Helvetica / Inter family) at weight 700 with tight letter-spacing (~-0.03em), at least 4x the body size. Left-align everything on a strict grid with generous whitespace; separate sections with 1px black hairlines. Buttons are sharp-cornered solid black rectangles or plain text links; small labels are uppercase with wide tracking. Forbidden: shadows, gradients, rounded corners, decorative illustrations, a second accent color, and centered layouts — stay left-aligned on the grid.
```
### Minimalism (style)
A softer, more universal minimalism than Swiss style — no strict grid or red accent, just generous whitespace and restrained grayscale that hands focus back to the content.
Fetch: copy the block below
```text
Design this page in minimalism style: a near-white background #fcfcfc, dark gray body text #171717, mid-gray secondary text #737373; cards are soft gray blocks #f4f4f5 with no visible border, large 12px radius (8px for small controls), and no shadow; the accent color is simply the primary text color #171717 — no brand hue; primary buttons are solid black with white text, secondary buttons are transparent with a 1px light-gray border #d4d4d4; headings sit at weight 600 with tight -0.02em tracking, restrained but not harsh; separate sections with a 1px light-gray divider #e5e5e5 instead of card shadows. Forbidden: saturated colors, hard shadows, thick black borders, oversized type contrast, decorative graphics.
```
### Editorial (style)
A warm paper-toned background with serif display headlines and a wine-red accent — the feel of flipping through a well-made indie magazine.
Fetch: copy the block below
```text
Design this page in editorial (magazine) style: a warm paper background #faf7f2, ink-black body text #1c1a17, warm-gray secondary text #6e675c; set headlines in a serif — Georgia, "Times New Roman", serif — at weight 700 with tight -0.01em tracking for a typeset feel; cards are cream paper blocks #f4efe6 with no visible border, only 2px radius, and no shadow; the accent is a deep wine red #8c2f39, reserved for badge text and key emphasis; badges are transparent with wine-red uppercase text at 0.16em tracking, like a journal section tag; primary buttons are sharp-cornered ink black with cream text, secondary buttons get a thin #d8d0c2 outline; separate sections with a 1px tan hairline #d8d0c2 for a printed-column feel. Forbidden: bold sans-serif display headlines, saturated color clashes, hard shadows, large border radii, digital/tech-flavored decoration.
```
### Japanese Minimalism (style)
Warm off-white paper tones with ink-gray text and vermillion used only in tiny doses — restraint so deliberate that the whitespace itself becomes the message.
Fetch: copy the block below
```text
Design this page in Japanese minimalism (Japandi) style: warm off-white background #f7f5f0, ink-gray body text #2b2b2b, soft taupe secondary text #8a857c; cards match the page color #f7f5f0, separated only by a thin 1px border #e6e0d4, with just 4px radius and never a shadow; the accent vermillion #b5432a appears only in tiny doses — badge text, small numerals — never as a large color block; badges are transparent with uppercase vermillion text at 0.2em tracking; headings use a light weight (500) with slightly loosened 0.02em tracking for breathing room, the opposite of the usual tight-minimalism move; primary buttons are sharp-cornered ink black with warm-white text, secondary buttons stay transparent with a thin ink outline; separate sections with a 1px taupe hairline #e6e0d4. Forbidden: large vermillion or saturated color blocks, hard shadows, thick borders, ornate decoration, extra-bold display headlines.
```
### Y2K (style)
Brushed-chrome gradients, candy-pink badges and glossy capsule buttons — the millennium's idea of the future.
Fetch: copy the block below
```text
Design this page in Y2K style: wash the whole page in a silver metallic gradient linear-gradient(135deg, #dfe3f0 0%, #f6f7fb 50%, #cfd6ea 100%); cards sit on frosted translucent white rgba(255,255,255,.7) with a 1px solid #aab4d4 edge for a brushed-chrome feel; large cards use 24px rounded corners while buttons and badges go full capsule at 999px; the primary button is bright blue #3d7bff on white text with a glossy drop shadow 0 6px 14px rgba(61,123,255,.4); badges pair candy pink #ff8ad8 with deep plum #4a0e3a text; body copy sits at #1f2544, secondary text at #5a6285; headings carry weight 700 for a light futuristic edge; layer a soft glow behind the content to push the tech-candy mood. Forbidden: over-blurred frosted glass that swallows legibility, stark black-and-white high contrast, minimalist wireframe styling, raw hand-drawn doodles, any aged/grunge retro filter.
```
### Vaporwave (style)
Deep-purple dusk, a neon grid horizon and pink-on-cyan glow — an 80s arcade sunset frozen in CSS.
Fetch: copy the block below
```text
Design this page in Vaporwave style: base the page on a deep-purple vertical gradient linear-gradient(180deg, #1a0b3b 0%, #3c1a78 100%) with a neon grid horizon layered behind the content; cards fill with translucent deep purple rgba(30,10,70,.55) and a cyan edge 1px solid rgba(1,205,254,.5); the primary accent is neon pink #ff71ce with cyan #01cdfe as the secondary accent; headings are fully uppercase, weight 700, tracked out to 0.08em for that synth-aesthetic feel; badges pair cyan fills with deep-purple #1a0b3b text in sharp rectangles; the primary button is pink with deep-purple text wrapped in a neon glow box-shadow: 0 0 24px rgba(255,113,206,.35); dividers are thin cyan hairlines 1px solid rgba(1,205,254,.35). Forbidden: any warm palette (orange, brown, earth tones), minimalist white backgrounds, soft pastel macaron colors, rounded cartoonish outlines, paper texture or film-grain filters.
```
### Pixel Art (style)
Chunky black outlines, monospace type and zero-blur hard shadows — a sprite sheet rendered as a webpage.
Fetch: copy the block below
```text
Design this page in Pixel Art style: base the page on midnight blue #26233a; cards fill with dark grey-violet #1f1d2e and a chunky 3px solid #0c0a14 square border — every radius is 0; swap the body font for a monospace stack '"Courier New", ui-monospace, monospace' to sell the game-sprite feel; the accent color is glowing green #7fff6b; headings are fully uppercase, weight 700, tracked to 0.04em; badges are glowing green fills with pure black text in sharp rectangles, no border; the primary button is glowing green on black text with a hard shadow box-shadow: 4px 4px 0 0 #0c0a14 (zero blur); the secondary button is transparent with a glowing green outline; dividers are thick 3px solid #0c0a14 rules. Forbidden: any rounded corners, any gradients, soft blurred shadows, thin font weights, serif fonts, anti-aliased soft edges.
```
### Frutiger Aero (style)
Sky-blue-to-grass gradients, dewy glass cards and a grass-green glow — 2000s optimism rendered in Aero glass.
Fetch: copy the block below
```text
Design this page in Frutiger Aero style: base the page on a fresh sky-to-grass gradient linear-gradient(160deg, #9fd8f7 0%, #e8f7ff 55%, #d3f0e2 100%); cards sit on translucent white rgba(255,255,255,.6) with an 8px backdrop blur (backdrop-filter: blur(8px)) and a glossy highlight edge 1px solid rgba(255,255,255,.9), for a dewy glass-bubble feel; large cards use 16px rounded corners while buttons and badges go full capsule at 999px; the accent color is grass green #58b947; the primary button is green on white text with a natural gloss shadow 0 4px 12px rgba(88,185,71,.45); the secondary button is 70% white on deep-blue text; body copy sits at deep teal-blue #17435f, secondary text at rgba(23,67,95,.65); layer a soft glow to reinforce the crisp bubbly optimism. Forbidden: dark backgrounds, thick black outlines, hard sharp-cornered shadows, glitch noise or aged/grunge filters, desaturated grey tones.
```
### Memphis (style)
80s Italian toy-shop energy — primary-color geometry, hard candy shadows and a radius clash between rounded cards and pill buttons.
Fetch: copy the block below
```text
Design this page in Memphis style: a warm cream background (#fff8e7); cards in pure white (#ffffff) with a 2px solid black (#14140f) border plus a candy-colored hard shadow (box-shadow: 5px 5px 0 0 #ff4d6d, zero blur); sprinkle bright yellow (#ffce00) accents on squiggles, underlines and dots; cards keep a moderate 12px radius while buttons turn fully pill-shaped (999px) — the radius clash is what reads as toy-like; primary buttons are bright blue (#2f6bff) with white text and a 2px black border, secondary buttons are white with a black border; headings are weight 800 with small geometric doodles (triangles, zigzags, squiggles) scattered around; dividers are 2px solid black. Forbidden: soft gradients, monochrome minimalism, glassmorphism blur, thin hairlines, any metallic sheen, restrained whitespace-heavy layouts.
```
### Bauhaus (style)
Primary-color-and-black geometric composition — square corners, zero ornament, the functionalist restraint of the 1920s design school.
Fetch: copy the block below
```text
Design this page in Bauhaus style: a warm off-white background (#f4efe6); cards in the same off-white with a 2px solid black border (#17171b), fully square corners (border-radius: 0); no shadows at all (box-shadow: none); the accent is a pure primary red (#d9291a), used sparingly on key blocks and links; badges are a yellow (#f0a500) block with black text and square corners; primary buttons are deep blue (#1f4796) with white text and square corners, secondary buttons are transparent with a black border; headings are weight 800 with zero letter-spacing (tracking: 0), set in a sans-serif to keep the functionalist restraint; dividers are 2px solid black, and the layout aligns to a strict grid with flat geometric shapes (circles, triangles, rectangles) as color-block decoration. Forbidden: rounded corners, gradients, shadows, soft pastel colors, decorative serif scripts, any ornamental texture.
```
### Art Deco (style)
Black-and-gold symmetrical luxury with hairline gold linework, reviving the ceremonial glamour of the 1920s Jazz Age.
Fetch: copy the block below
```text
Design this page in Art Deco style: a near-black deep green background (#0f1713); body text in a warm gold-white (#ece5d3), muted text at rgba(232,222,196,.6); the accent is a champagne gold (#c8a24b); cards sit on a near-transparent gold wash (rgba(200,162,75,.04)) with a hairline 1px gold border (rgba(200,162,75,.55)) and square corners; headings use a serif face (Georgia / Times New Roman), set in uppercase with wide 0.1em tracking and weight 700 to read as symmetrical and ceremonial; badges are transparent with a gold border and uppercase gold text at 0.18em tracking; primary buttons are gold-filled with black text and square corners, secondary buttons are transparent with a gold border; dividers are hairline 1px gold lines; shadows are disabled entirely. Forbidden: rounded corners, thick borders, neon or bright saturated colors, casual sans-serif headings, any cartoonish illustration.
```
### Retro Terminal (style)
Glowing green phosphor text on a black CRT screen with flickering scanlines — a terminal window straight out of the Matrix.
Fetch: copy the block below
```text
Design this page in Retro Terminal style: a near-black green-tinted background (#050c06) overlaid with a scanline texture; the whole UI uses a monospace font (Courier New / ui-monospace); body text is phosphor green (#c7ffd4), muted text at rgba(120,255,150,.55); the accent is a bright glowing green (#33ff66); cards sit on a near-transparent green wash (rgba(51,255,102,.05)) with a hairline 1px green border (rgba(51,255,102,.4)) and square corners; cards and buttons both carry a phosphor glow shadow (box-shadow: 0 0 16px rgba(51,255,102,.18)); headings are uppercase with 0.06em tracking and weight 700; badges are green-filled with black uppercase text. Forbidden: serif fonts, rounded corners, warm color tones, gradient backgrounds, any skeuomorphic texture.
```
### Dark Tech (style)
A restrained dark SaaS surface with soft glass cards and a single electric-violet accent — precise, quiet, unmistakably Linear-style.
Fetch: copy the block below
```text
Design this page in a Linear-style dark tech aesthetic: a vertical dark gradient background linear-gradient(180deg, #0d0e13 0%, #0a0b0f 100%); cards use rgba(255,255,255,.04) fill with a 1px solid rgba(255,255,255,.08) border and a generous 10px radius; a single electric-violet accent #5e6ad2 reserved for buttons, links and sparse highlights; body text #e6e7ec, muted text at 55% opacity; headings at weight 600 with -0.02em tracking, restrained and quiet; primary buttons are violet-filled with white text, secondary buttons are transparent with a thin 1px border; shadows are very soft, 0 12px 32px rgba(0,0,0,.45). Forbidden: saturated color clashes, thick black borders, gradient accent fills, radii under 8px, skeuomorphic textures, mixing more than one accent hue.
```
### Cyberpunk (style)
Neon cyan and magenta slicing through a near-black grid — sharp corners, glowing edges, a night-city interface with an attitude.
Fetch: copy the block below
```text
Design this page in a cyberpunk style: a near-black background #07070f with a faint grid overlay for depth; the accent is electric cyan #00f0ff, used for glowing borders and text; badges are magenta #ff2ea6 fill with black text and sharp corners; cards use rgba(0,240,255,.04) fill with a 1px solid rgba(0,240,255,.35) cyan hairline border and near-zero 2px radius; headings are uppercase, tracked wide at 0.04em, weight 700; primary buttons are cyan-filled with black text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, 0 0 20px rgba(0,240,255,.2), never a conventional drop shadow. Forbidden: large border radii, soft diffuse shadows, pastel or desaturated palettes, serif typefaces, skeuomorphic textures, rounded pill buttons.
```
### Aurora Gradient (style)
Diffuse multi-hue gradient light pooling behind frosted glass cards — soft, borderless, like an aurora seen through a window.
Fetch: copy the block below
```text
Design this page in an aurora gradient style: a background built from stacked radial gradients — blue-violet top-left, cyan-teal top-right, purple-pink bottom-right, over a deep navy base #0b1026, each gradient fading softly to transparent for a diffuse-light feel; cards use rgba(255,255,255,.06) fill with a 1px solid rgba(255,255,255,.12) border and backdrop-filter: blur(10px) for frosted glass, with a generous 20px radius; the accent is cyan-teal #22d3ee; body text #f1f5fd, muted text at 65% opacity; badges are translucent white pills; primary buttons are white-filled with deep-navy text in pill shape, secondary buttons are transparent with a thin white outline; shadows are soft, 0 8px 32px rgba(4,10,30,.4). Forbidden: flat solid-color backgrounds, hard borders, sharp corners, saturated color clashes, dark opaque cards, any grid or scanline decoration.
```
### Sci-Fi HUD (style)
A cockpit-style heads-up display in monospace type and cyan hairlines — data-dense, diegetic, straight out of a spacecraft interface.
Fetch: copy the block below
```text
Design this page in a sci-fi HUD style: a deep navy-black background #04101c with a low-contrast grid overlay simulating a cockpit scan surface; use a monospace font stack (ui-monospace / SF Mono) throughout to reinforce the data-readout feel; the accent is HUD cyan #35e0ff; cards use rgba(53,224,255,.05) fill with a 1px solid rgba(53,224,255,.4) cyan hairline border and a near-zero 2px radius; headings are uppercase, tracked wide at 0.12em, weight 600, mimicking instrument readouts; badges are transparent with a cyan outline and cyan uppercase text tracked at 0.2em; primary buttons are cyan-filled with dark navy text and sharp corners, secondary buttons are transparent with a cyan outline; shadows are glows, not drop shadows, 0 0 18px rgba(53,224,255,.15). Forbidden: serif or humanist typefaces, large border radii, warm color tones, soft gradients, any hand-drawn or organic lines, oversized borders.
```
### Bento Grid (style)
Uneven cards packed edge-to-edge like compartments in a bento box, each cell sized to say exactly one thing.
Fetch: copy the block below
```text
Design this page in a Bento Grid style: an uneven, tightly packed grid of white cards (#ffffff) on a light gray backdrop (#f5f5f7), like compartments in a bento box — each cell states exactly one point. Make the largest cell roughly twice the area of the others to carry the primary message, with the rest sized down by importance. Cards get 22px rounded corners, a hairline 1px solid #e8e8ed border, and only a whisper of shadow (0 1px 2px rgba(0,0,0,.04)) — no heavy drop shadows. Use one restrained Apple-blue accent (#0071e3) and pill-shaped buttons. Headlines are weight 700 with tight -0.02em tracking; two grays (#1d1d1f / #6e6e73) carry the rest of the hierarchy. Forbidden: a uniform equal-size grid (sizes must vary), heavy shadows or gradients, multiple accent colors, sharp square corners, cramming everything into one cell.
```
### Organic Shapes (style)
Soft rounded blobs and warm earth tones — every corner curves, nothing points.
Fetch: copy the block below
```text
Design this page in an Organic Shapes style: a cream background (#fdf8f0) with off-white cards (#fffdfa), rounded up to 32px — and fully round (999px) on small elements — so every card reads like a smoothed river stone. Shadows are a soft warm ambient glow (0 12px 32px rgba(196,144,100,.16)) paired with a faint 1px solid #f0e4d3 border. The accent is terracotta (#d97742) against deep brown text (#3d3128) and a warm gray for muted copy (#8a7b6c). Headlines are weight 600 with a slight -0.01em tracking — no need for heavy weight. Buttons are fully rounded pills too, giving the whole page the feel of sun-warmed pottery. Forbidden: any sharp or square corners, cool tones (blue, gray-violet), high-contrast black-and-white, hard-edged drop shadows, sharp geometric shapes.
```
### Hand-drawn (style)
Wobbly pencil-drawn borders and comic lettering on notebook paper — like a sketch that escaped into a browser.
Fetch: copy the block below
```text
Design this page in a hand-drawn style: a paper-white background (#fffdf5); cards are white with a 2px solid black hand-sketched border, using an irregular rounded-corner combo (e.g. 255px 18px 225px 18px / 18px 225px 18px 255px) so the outline looks like it wobbled off a pencil. Headings and body copy use a handwritten font stack (Comic Sans MS / Chalkboard SE). Shadows fake a pencil stroke — a hard offset 3px 3px 0 rgba(43,43,43,.75), never blurred. The accent is crayon blue (#4a7cff), tags are sticky-note yellow (#fff3a3) with black text. Primary text is #2b2b2b, muted is #6b6558. The primary button is crayon-blue with white text and the same irregular rounded corners; the secondary button is white with a black outline. Forbidden: standard clean sans-serif fonts, perfectly circular or perfectly square corners, any blurred or soft shadow, minimalist whitespace-driven layouts, cold gray palettes.
```
### Dopamine Colors (style)
Candy-saturated color blocks and oversized rounded shapes turned up to maximum joy.
Fetch: copy the block below
```text
Design this page in a Dopamine Colors style: a warm off-white background (#fff7ec) with pure white cards at a generous 20px radius — small elements go fully round at 999px. The accent is a saturated hot pink (#ff477e); tags are orange (#ff9f1c) white-text pills. Shadows carry a colorful diffuse glow (0 10px 24px rgba(255,71,126,.18)) — never gray or black. Headlines go all the way to weight 800 with tight -0.01em tracking for an energetic, joyful punch. Primary text is #33202a and muted is #8a6470, both warm-tinted rather than neutral gray. The primary button is hot-pink with white text as a pill; the secondary is white with a hot-pink label and hot-pink outline. Forbidden: any desaturated Morandi palette, black/white/gray-only color schemes, thin headline weights, sharp corners, gray shadows.
```
### Material Design 3 (style)
Google's tonal surfaces and pill-shaped controls — elevation and color roles do the structural work.
Fetch: copy the block below
```text
Design this page in a Material Design 3 (Material You) style: a light gray background (#fafafa) with pure white cards (#ffffff) at 16px radius, while buttons and tags use the signature 999px pill shape. Shadows use M3's two-layer elevation to fake a real light source: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24). The accent is M3 purple (#6750a4); tags use a tonal container — a light purple tint background rgba(103,80,164,.12) with purple text — rather than a flat solid fill. Headlines stay at a regular weight of 500; hierarchy comes from color roles and elevation, not boldness. Primary text is #1c1b1f, muted is #49454f. The primary button is purple-filled with white text as a pill; the secondary is an outlined button — transparent background, purple text, 1px solid #79747e border. Forbidden: hard zero-blur offset shadows, square-cornered controls, extra-bold headline weights, single flat black shadows, and flat solid-color tags that skip the tonal-container pattern.
```
### Flat Design 2.0 (style)
Solid color blocks and zero shadow — every surface stays perfectly flat on the page.
Fetch: copy the block below
```text
Design this page in a Flat Design 2.0 style: a pure white background (#ffffff) with light gray-blue card blocks (#f1f5f9), borders removed or set transparent, and radii kept restrained at 8px (6px for small elements). Drop shadows entirely — box-shadow: none everywhere. The accent is a bright blue (#3b82f6) used as flat solid fill, never a gradient. Tags are solid blue rectangles with white text. Primary text is near-black (#0f172a), muted is #64748b. The primary button is solid blue with white text; the secondary uses a light gray-blue fill (#e2e8f0) with dark text — neither gets a border or shadow. Headlines are weight 700 with a slight -0.01em tracking; hierarchy comes from color-block contrast, not any illusion of depth. Forbidden: any gradient, skeuomorphic texture (faux leather, faux paper), drop shadows, decorative border strokes, large rounded corners or fully pill-shaped buttons.
```
### Morandi (palette)
Grays that remember being colors — dusty green, muted rose and warm greige, all hushed to a whisper.
Prompt: Use a Morandi palette: low-saturation grays that feel dusted with fog. Background #EAE6E0 (warm greige), cards #F4F1EB, borders #DAD3C9; body text #4C4842 (warm charcoal, never pure black), secondary text #8E877C; primary buttons #97A094 (gray-green) with off-white text #F7F6F2; the accent is #C0A9A2 (dusty rose), reserved for badges and small icons. Keep every color under ~25% saturation and build hierarchy with lightness, not hue. Forbidden: saturated primaries, pure #000 or #fff, high-contrast clashes, more than three hues, vivid gradients.
Fetch: copy the block below
```css
/**
* Morandi · 莫兰迪 — UI Lab palette (Soft & Muted)
*
* Grays that remember being colors — dusty green, muted rose and warm greige, all hushed to a whisper.
*
* Best for: Lifestyle and home brands, women-focused products, portfolio sites, wellness apps
*
* - 60-30-10: greige background 60%, cards and whitespace 30%, gray-green primary plus dusty-rose accent ≤10% combined
* - Cap saturation at ~25% across the board; keep hues close and step lightness instead (#EAE6E0 → #DAD3C9 → #8E877C → #4C4842)
* - No pure black text: warm charcoal #4C4842 gives ~9:1 contrast on the background — readable without the sting
* - Off-white #F7F6F2 on the #97A094 button, never pure white, to keep the foggy feel
* - Limit the #C0A9A2 accent to two appearances per screen or the hush falls apart
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #EAE6E0; /* bg */
--foreground: #4C4842; /* text */
--card: #F4F1EB; /* surface */
--muted-foreground: #8E877C; /* muted */
--border: #DAD3C9; /* border */
--primary: #97A094; /* primary */
--primary-foreground: #F7F6F2; /* primaryFg */
--accent: #C0A9A2; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #4C4842;
--popover: #F4F1EB;
--popover-foreground: #4C4842;
--secondary: #F4F1EB;
--secondary-foreground: #4C4842;
--muted: #F4F1EB;
--accent-foreground: #4C4842;
--input: #DAD3C9;
--border-strong: color-mix(in oklab, #DAD3C9 78%, #4C4842 22%);
--ring: color-mix(in oklab, #DAD3C9 78%, #4C4842 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Cream (palette)
Butter and clotted cream stacked fresh from the oven — warm, sweet without tipping into cloying.
Prompt: Use a Cream palette: warm and soft, like butter and clotted cream stacked fresh from the oven. Background #FFF8F0 (creamy white), cards #FFFDFA (near-paper white, still warm), borders #F2E5D8 (pale baked tone); body text #5C4F43 (warm cocoa brown, never pure black), secondary text #A6968A (milky taupe); primary buttons #E8B88A (caramel cream) with deep brown text #4A3B2C; the accent #F5D89E (custard yellow) reserved for tags, icons, or highlighted numbers. Keep overall saturation low-to-mid and build hierarchy through lightness within the warm hue family — no cool colors allowed in. Forbidden: cool tones (blue, cyan, cool gray), high-saturation clashes, dark or black backgrounds, sharp high-contrast borders, metallic gradients, any cool-toned shadows.
Fetch: copy the block below
```css
/**
* Cream · 奶油风 — UI Lab palette (Soft & Muted)
*
* Butter and clotted cream stacked fresh from the oven — warm, sweet without tipping into cloying.
*
* Best for: Dessert and bakery brands, baby and parenting products, lifestyle blogs, warm-toned personal sites
*
* - 60-30-10: cream-white background 60%, cards and whitespace 30%, caramel primary plus custard-yellow accent ≤10% combined
* - Keep the whole palette warm and mid-to-low saturation; step lightness for hierarchy (#FFF8F0 → #F2E5D8 → #A6968A → #5C4F43)
* - No pure black text: cocoa brown #5C4F43 gives ~8:1 contrast on the background — legible without being harsh
* - Deep brown #4A3B2C on the #E8B88A button, not pure black, to keep the warmth intact
* - Cap the #F5D89E accent at two or three spots per screen, or sweet tips into cloying
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #FFF8F0; /* bg */
--foreground: #5C4F43; /* text */
--card: #FFFDFA; /* surface */
--muted-foreground: #A6968A; /* muted */
--border: #F2E5D8; /* border */
--primary: #E8B88A; /* primary */
--primary-foreground: #4A3B2C; /* primaryFg */
--accent: #F5D89E; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #5C4F43;
--popover: #FFFDFA;
--popover-foreground: #5C4F43;
--secondary: #FFFDFA;
--secondary-foreground: #5C4F43;
--muted: #FFFDFA;
--accent-foreground: #5C4F43;
--input: #F2E5D8;
--border-strong: color-mix(in oklab, #F2E5D8 78%, #5C4F43 22%);
--ring: color-mix(in oklab, #F2E5D8 78%, #5C4F43 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Macaron (palette)
Frosted pastries lined up in a dessert window — light, girlish, with pink and mint as the signature duo.
Prompt: Use a Macaron palette: light and girlish, like frosted pastries lined up in a dessert window. Background #FDF6F8 (blush white), cards #FFFFFF (pure white, for lift), borders #F3DEE6 (soft pink outline); body text #55464E (deep berry-gray, never pure black), secondary text #A38B96 (dusty pink-brown); primary buttons #F2A7C3 (macaron pink) with deep berry text #4A2C3A; the accent #A7D8DE (mint blue) is this palette's signature second color — reserved for icons, tags, or emphasis, echoing the pink rather than clashing with it. Forbidden: muddy tones (grayed-out pink or blue), large blocks of dark gray or pure black, primary red/blue, thick black outlines, high-saturation clashing gradients.
Fetch: copy the block below
```css
/**
* Macaron · 马卡龙 — UI Lab palette (Soft & Muted)
*
* Frosted pastries lined up in a dessert window — light, girlish, with pink and mint as the signature duo.
*
* Best for: Female-oriented products, beauty brands, dessert shops, stickers and creative merchandise
*
* - 60-30-10: blush-white background 60%, white cards and whitespace 30%, macaron-pink primary plus mint accent ≤10% combined
* - Pink and mint are the signature duo — weight pink heavier, let mint stay a supporting flourish, not a co-lead
* - No pure black text: deep berry-gray #55464E gives ~8.5:1 contrast on the background — girlish without sacrificing legibility
* - Deep berry #4A2C3A on the #F2A7C3 button, not pure black, to keep the pink's soft edge
* - Keep the #F3DEE6 border hairline-thin — a thick black outline turns macaron into comic-book instantly
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #FDF6F8; /* bg */
--foreground: #55464E; /* text */
--card: #FFFFFF; /* surface */
--muted-foreground: #A38B96; /* muted */
--border: #F3DEE6; /* border */
--primary: #F2A7C3; /* primary */
--primary-foreground: #4A2C3A; /* primaryFg */
--accent: #A7D8DE; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #55464E;
--popover: #FFFFFF;
--popover-foreground: #55464E;
--secondary: #FFFFFF;
--secondary-foreground: #55464E;
--muted: #FFFFFF;
--accent-foreground: #55464E;
--input: #F3DEE6;
--border-strong: color-mix(in oklab, #F3DEE6 78%, #55464E 22%);
--ring: color-mix(in oklab, #F3DEE6 78%, #55464E 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Sage (palette)
A row of matte glass bottles on an organic skincare counter — botanical, quiet, restrained.
Prompt: Use a Sage palette: quiet and restrained, like a row of matte glass bottles on an organic skincare counter. Background #F2F4EF (pale sage), cards #FAFBF8 (near-white, slightly cool), borders #DCE2D6 (soft sage outline); body text #3F4A3C (deep olive green, never pure black), secondary text #83907E (grayed sage); primary buttons #7C9473 (sage green) with pale cream text #F5F8F2; the accent #C8B394 (woody khaki) belongs on icons, tags, or small emphasis — it warms the green with a touch of earth. Forbidden: neon green, high-saturation clashes, large blocks of pure black, industrial dark gray, any glossy plastic-like gradient.
Fetch: copy the block below
```css
/**
* Sage · 鼠尾草绿 — UI Lab palette (Soft & Muted)
*
* A row of matte glass bottles on an organic skincare counter — botanical, quiet, restrained.
*
* Best for: Skincare and wellness brands, yoga and meditation apps, eco-friendly products, minimalist portfolios
*
* - 60-30-10: pale-sage background 60%, near-white cards and whitespace 30%, sage-green primary plus khaki accent ≤10% combined
* - Keep the whole palette in the sage-to-olive range; step lightness for hierarchy (#F2F4EF → #DCE2D6 → #83907E → #3F4A3C)
* - No pure black text: deep olive #3F4A3C gives ~8:1 contrast on the background — calm without losing clarity
* - Pale cream #F5F8F2 on the #7C9473 button, not pure white, to avoid a cold jump
* - Limit the #C8B394 accent to one or two spots per screen, or the botanical mood tips into workwear khaki
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F2F4EF; /* bg */
--foreground: #3F4A3C; /* text */
--card: #FAFBF8; /* surface */
--muted-foreground: #83907E; /* muted */
--border: #DCE2D6; /* border */
--primary: #7C9473; /* primary */
--primary-foreground: #F5F8F2; /* primaryFg */
--accent: #C8B394; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #3F4A3C;
--popover: #FAFBF8;
--popover-foreground: #3F4A3C;
--secondary: #FAFBF8;
--secondary-foreground: #3F4A3C;
--muted: #FAFBF8;
--accent-foreground: #3F4A3C;
--input: #DCE2D6;
--border-strong: color-mix(in oklab, #DCE2D6 78%, #3F4A3C 22%);
--ring: color-mix(in oklab, #DCE2D6 78%, #3F4A3C 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Dopamine (palette)
Hot rose crashing into tangerine — like biting into a fruit candy that glows from the inside.
Prompt: Use a Dopamine palette: high-saturation, high-energy color like walking into a candy store. Background #FFF7EC (creamy orange-white), cards #FFFFFF (pure white), borders #FFE3D3 (pale apricot-pink); body text #33202A (deep berry-plum, never pure black), secondary text #8A6470; primary buttons #FF477E (hot rose) with pure white text #FFFFFF; the accent is #FF9F1C (tangerine), reserved for badges, icons and emphasized numbers. The rose + orange dual high-saturation clash is this palette's signature — keep the mood bouncy, sweet, candy-shop bright. Forbidden: low-saturation grays, dark backgrounds, thin font weights, Morandi-style haze, a single cool-only hue family.
Fetch: copy the block below
```css
/**
* Dopamine · 多巴胺 — UI Lab palette (Vivid & Playful)
*
* Hot rose crashing into tangerine — like biting into a fruit candy that glows from the inside.
*
* Best for: Young-brand marketing pages, events and festivals, creative studios, consumer apps
*
* - 60-30-10: creamy orange-white background 60%, white card space 30%, rose primary plus tangerine accent ≤10% combined
* - Rose #FF477E and tangerine #FF9F1C are the signature clash — keep both above ~80% saturation, never gray them down
* - No pure black text: deep berry #33202A gives ~11:1 contrast on #FFF7EC — readable without losing the sweetness
* - Pure white #FFFFFF on the #FF477E button keeps it the first thing the eye lands on
* - Reserve #FF9F1C for badges, icons and emphasized numbers — 2-3 spots per screen, more and it overpowers the primary
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #FFF7EC; /* bg */
--foreground: #33202A; /* text */
--card: #FFFFFF; /* surface */
--muted-foreground: #8A6470; /* muted */
--border: #FFE3D3; /* border */
--primary: #FF477E; /* primary */
--primary-foreground: #FFFFFF; /* primaryFg */
--accent: #FF9F1C; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #33202A;
--popover: #FFFFFF;
--popover-foreground: #33202A;
--secondary: #FFFFFF;
--secondary-foreground: #33202A;
--muted: #FFFFFF;
--accent-foreground: #33202A;
--input: #FFE3D3;
--border-strong: color-mix(in oklab, #FFE3D3 78%, #33202A 22%);
--ring: color-mix(in oklab, #FFE3D3 78%, #33202A 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Neon (palette)
Electric cyan and magenta bursting off a deep indigo base — the smell of neon signage on a rainy night.
Prompt: Use a Neon (Cyberpunk) palette: dark background, high contrast, like neon signage reflecting off a rainy night street. Background #0C0C16 (near-black indigo), cards #161626 (deep violet-gray), borders #2C2C46 (dim indigo); body text #F2F2FF (cool white, never pure white), secondary text #9C9CC0; primary buttons #00F0FF (electric cyan) with deep-toned text #061018; the accent is #FF2EA6 (magenta), used on tags, icons and emphasis lines. Electric cyan clashing with magenta over a dark base is this palette's signature. Forbidden: light backgrounds, earthy tones, soft pastels, low-contrast grays, Morandi-style haze.
Fetch: copy the block below
```css
/**
* Neon · 赛博霓虹 — UI Lab palette (Vivid & Playful)
*
* Electric cyan and magenta bursting off a deep indigo base — the smell of neon signage on a rainy night.
*
* Best for: Esports and gaming, music events, tech streetwear brands, nightlife brands
*
* - 60-30-10: near-black indigo background 60%, deep violet-gray cards and whitespace 30%, cyan primary plus magenta accent ≤10% combined
* - Electric cyan #00F0FF and magenta #FF2EA6 are the signature neon pair — keep both at full brightness, never desaturate
* - No pure white text: cool white #F2F2FF gives ~15:1 contrast on #0C0C16 — glow-strong without glare
* - Use deep-toned text #061018 on the #00F0FF button rather than black, to keep the electric clarity
* - Keep #FF2EA6 concentrated on badges, status dots and emphasis lines — large fills turn the clash harsh
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #0C0C16; /* bg */
--foreground: #F2F2FF; /* text */
--card: #161626; /* surface */
--muted-foreground: #9C9CC0; /* muted */
--border: #2C2C46; /* border */
--primary: #00F0FF; /* primary */
--primary-foreground: #061018; /* primaryFg */
--accent: #FF2EA6; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #F2F2FF;
--popover: #161626;
--popover-foreground: #F2F2FF;
--secondary: #161626;
--secondary-foreground: #F2F2FF;
--muted: #161626;
--accent-foreground: #F2F2FF;
--input: #2C2C46;
--border-strong: color-mix(in oklab, #2C2C46 78%, #F2F2FF 22%);
--ring: color-mix(in oklab, #2C2C46 78%, #F2F2FF 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Sunset (palette)
Coral melting into gold — the last hour of a holiday beach before the sun goes down.
Prompt: Use a Sunset palette: warm, gradient-like light, like the last hour of dusk on a holiday beach. Background #FFF4EC (warm apricot-white), cards #FFFBF7 (near-white warm tone), borders #FFDFC7 (pale apricot-orange); body text #4A3226 (warm brown, never pure black), secondary text #A07A62; primary buttons #F4633A (coral orange) with warm-white text #FFF8F4; the accent is #FFC53D (golden yellow), used on tags, icons and highlighted numbers. The coral-to-gold warm gradient is this palette's signature — keep the mood loose, like a melting sunset. Forbidden: cool-blue dominance, gray tones, dark backgrounds, neon/fluorescent colors, high-saturation clashes.
Fetch: copy the block below
```css
/**
* Sunset · 日落暖调 — UI Lab palette (Vivid & Playful)
*
* Coral melting into gold — the last hour of a holiday beach before the sun goes down.
*
* Best for: Travel and vacation brands, dining, lifestyle products, summer event pages
*
* - 60-30-10: warm apricot-white background 60%, near-white cards and whitespace 30%, coral primary plus golden accent ≤10% combined
* - Let coral #F4633A ease into gold #FFC53D as adjacent warm hues — don't cut in a cool color and break the gradient feel
* - No pure black text: warm brown #4A3226 gives ~8:1 contrast on #FFF4EC — warm and still legible
* - Use warm-white #FFF8F4 on the #F4633A button instead of pure white, to keep the warmth unbroken
* - Reserve #FFC53D for prices, ratings and icon highlights — 2-3 spots per screen keeps the sunset relaxed, not loud
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #FFF4EC; /* bg */
--foreground: #4A3226; /* text */
--card: #FFFBF7; /* surface */
--muted-foreground: #A07A62; /* muted */
--border: #FFDFC7; /* border */
--primary: #F4633A; /* primary */
--primary-foreground: #FFF8F4; /* primaryFg */
--accent: #FFC53D; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #4A3226;
--popover: #FFFBF7;
--popover-foreground: #4A3226;
--secondary: #FFFBF7;
--secondary-foreground: #4A3226;
--muted: #FFFBF7;
--accent-foreground: #4A3226;
--input: #FFDFC7;
--border-strong: color-mix(in oklab, #FFDFC7 78%, #4A3226 22%);
--ring: color-mix(in oklab, #FFDFC7 78%, #4A3226 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Pop (palette)
Cobalt slamming into bright yellow, pinned down by near-black text — crisp as a sports poster.
Prompt: Use a Pop (Pop Art) palette: crisp and confident, like sports-poster and streetwear-magazine layout. Background #F7F7FB (cool off-white), cards #FFFFFF (pure white), borders #E2E2F0 (pale gray-blue); body text #14141A (near-black, never pure black), secondary text #6E6E85; primary buttons #2456F0 (cobalt blue) with cool-white text #F5F8FF; the accent is #FFD400 (bright yellow), used on tags, icons and emphasized numbers. Cobalt and yellow form a complementary clash, and the near-black text must carry full contrast — keep the mood sharp, not soft. Forbidden: pastel tones, low contrast, warm brown tones, more than three high-saturation hues, Morandi-style haze.
Fetch: copy the block below
```css
/**
* Pop · 波普电光 — UI Lab palette (Vivid & Playful)
*
* Cobalt slamming into bright yellow, pinned down by near-black text — crisp as a sports poster.
*
* Best for: Sports and athletic brands, tech launch pages, recruiting and campus events, streetwear e-commerce
*
* - 60-30-10: cool off-white background 60%, pure white cards and whitespace 30%, cobalt primary plus yellow accent ≤10% combined
* - Cobalt #2456F0 and yellow #FFD400 form the complementary clash — use only these two saturated hues, don't stack a third
* - No pure black text but keep it deep: near-black #14141A gives ~17:1 contrast on #F7F7FB — sharp and clean
* - Use cool-white #F5F8FF on the #2456F0 button rather than warm white, to keep the whole palette cool-toned
* - Reserve #FFD400 for tags, icons and emphasized numbers — large fills lose the pop-art restraint
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F7F7FB; /* bg */
--foreground: #14141A; /* text */
--card: #FFFFFF; /* surface */
--muted-foreground: #6E6E85; /* muted */
--border: #E2E2F0; /* border */
--primary: #2456F0; /* primary */
--primary-foreground: #F5F8FF; /* primaryFg */
--accent: #FFD400; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #14141A;
--popover: #FFFFFF;
--popover-foreground: #14141A;
--secondary: #FFFFFF;
--secondary-foreground: #14141A;
--muted: #FFFFFF;
--accent-foreground: #14141A;
--input: #E2E2F0;
--border-strong: color-mix(in oklab, #E2E2F0 78%, #14141A 22%);
--ring: color-mix(in oklab, #E2E2F0 78%, #14141A 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Dark Luxe (palette)
Black lacquer and champagne gold — the hush of a five-star lobby after the last guest has gone up.
Prompt: Use a Dark Luxe palette: black-and-gold, the hush of a whisky bar or a five-star hotel lobby after hours. Background #0D0D10 (near-black, never pure black), cards #17171C, borders #2A2A32; body text #EDEAE2 (warm white, never pure white), secondary text #9B978C; primary buttons in champagne gold #C8A24B with deep charcoal text #141410 — this pairing is the signature move; accent #E8DFC8 (pale gold), reserved for badges, dividers, or numerals. Gold is punctuation, not paint — keep it small. Forbidden: bright backgrounds, candy colors, large gold fills, cheap neon, pure #000 or #fff.
Fetch: copy the block below
```css
/**
* Dark Luxe · 暗黑奢华 — UI Lab palette (Dark)
*
* Black lacquer and champagne gold — the hush of a five-star lobby after the last guest has gone up.
*
* Best for: Luxury hotels and members clubs, jewelry and watch brands, whisky and cigar labels, high-end concierge services
*
* - 60-30-10: near-black background 60%, cards and whitespace 30%, champagne-gold primary plus pale-gold accent ≤10% combined
* - Dark backgrounds should never go pure black: #0D0D10 keeps a whisper of warmth, reading richer than #000 and easier on the eyes
* - Body text should never go pure white: #EDEAE2 gives ~15:1 contrast on the background — crisp without glaring
* - Pair the #C8A24B button with deep charcoal text #141410, not white — gold-on-dark-text is the luxury-brand accent
* - Limit the #E8DFC8 accent to two spots per screen (a price, an icon stroke) — more than that reads cheap
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #0D0D10; /* bg */
--foreground: #EDEAE2; /* text */
--card: #17171C; /* surface */
--muted-foreground: #9B978C; /* muted */
--border: #2A2A32; /* border */
--primary: #C8A24B; /* primary */
--primary-foreground: #141410; /* primaryFg */
--accent: #E8DFC8; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #EDEAE2;
--popover: #17171C;
--popover-foreground: #EDEAE2;
--secondary: #17171C;
--secondary-foreground: #EDEAE2;
--muted: #17171C;
--accent-foreground: #EDEAE2;
--input: #2A2A32;
--border-strong: color-mix(in oklab, #2A2A32 78%, #EDEAE2 22%);
--ring: color-mix(in oklab, #2A2A32 78%, #EDEAE2 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Midnight Blue (palette)
Coding at 2am under a single desk lamp — deep, trustworthy blue with an observatory hush.
Prompt: Use a Midnight Blue palette: deep, trustworthy blue with the hush of coding at 2am or an observatory at night. Background #0B1220 (deep indigo, never pure black), cards #131C2E, borders #24314D; body text #E4EAF5 (cool white, never pure white), secondary text #8DA0BF; primary buttons in electric blue #4C7DFF with near-white text #F2F6FF; accent #8FB8FF (bright blue), for icons, links, and status hints. Keep the whole palette inside the blue family and separate layers by lightness. Forbidden: large warm-orange areas, pure black backgrounds, gray-purple gradients, low-contrast blue-on-blue text.
Fetch: copy the block below
```css
/**
* Midnight Blue · 午夜蓝 — UI Lab palette (Dark)
*
* Coding at 2am under a single desk lamp — deep, trustworthy blue with an observatory hush.
*
* Best for: Developer tools, fintech products, SaaS dashboards, security software
*
* - 60-30-10: deep-indigo background 60%, cards and whitespace 30%, electric-blue primary plus bright-blue accent ≤10% combined
* - Dark backgrounds should never go pure black: #0B1220 carries a touch of indigo warmth, reading more deliberate than flat black
* - Body text should never go pure white: #E4EAF5 gives ~13:1 contrast — cool and legible without glare
* - Pair the #4C7DFF button with near-white text #F2F6FF, never a same-family dark blue, or readability collapses
* - Reserve #8FB8FF for interactive states — hover, links, status dots — never as a large fill
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #0B1220; /* bg */
--foreground: #E4EAF5; /* text */
--card: #131C2E; /* surface */
--muted-foreground: #8DA0BF; /* muted */
--border: #24314D; /* border */
--primary: #4C7DFF; /* primary */
--primary-foreground: #F2F6FF; /* primaryFg */
--accent: #8FB8FF; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #E4EAF5;
--popover: #131C2E;
--popover-foreground: #E4EAF5;
--secondary: #131C2E;
--secondary-foreground: #E4EAF5;
--muted: #131C2E;
--accent-foreground: #E4EAF5;
--input: #24314D;
--border-strong: color-mix(in oklab, #24314D 78%, #E4EAF5 22%);
--ring: color-mix(in oklab, #24314D 78%, #E4EAF5 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Forest Night (palette)
A forest after rain, moss and lantern light — quiet but unmistakably alive.
Prompt: Use a Forest Night palette: a forest after rain, moss and lantern light, quiet but alive. Background #0E1512 (near-black forest green, never pure black), cards #16211C, borders #27352E; body text #E3EBE5 (cool, faintly green white, never pure white), secondary text #8FA598; primary buttons in forest green #3E9B6E with pale mint-white text #EAF6EF; accent #D9B44A (mossy gold), used for icons, badges, or emphasized numerals — one lantern glow inside the green. Forbidden: neon green, blue-purple tech tones, bright backgrounds, pink accents.
Fetch: copy the block below
```css
/**
* Forest Night · 墨绿夜 — UI Lab palette (Dark)
*
* A forest after rain, moss and lantern light — quiet but unmistakably alive.
*
* Best for: Eco and outdoor brands, specialty coffee and tea, wellness and nature-healing products, bookstores
*
* - 60-30-10: near-black forest-green background 60%, cards and whitespace 30%, forest-green primary plus mossy-gold accent ≤10% combined
* - Dark backgrounds should never go pure black: #0E1512 carries a green undertone, reading like a forest night rather than flat dark
* - Body text should never go pure white: #E3EBE5 leans faintly green at ~13:1 contrast, staying in family without glare
* - Mossy gold #D9B44A is the only warm note — one or two per screen (an icon, a number); more than that steals the scene from green
* - Pair the #3E9B6E button with pale mint-white text #EAF6EF, not pure white, to keep everything inside the green family
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #0E1512; /* bg */
--foreground: #E3EBE5; /* text */
--card: #16211C; /* surface */
--muted-foreground: #8FA598; /* muted */
--border: #27352E; /* border */
--primary: #3E9B6E; /* primary */
--primary-foreground: #EAF6EF; /* primaryFg */
--accent: #D9B44A; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #E3EBE5;
--popover: #16211C;
--popover-foreground: #E3EBE5;
--secondary: #16211C;
--secondary-foreground: #E3EBE5;
--muted: #16211C;
--accent-foreground: #E3EBE5;
--input: #27352E;
--border-strong: color-mix(in oklab, #27352E 78%, #E3EBE5 22%);
--ring: color-mix(in oklab, #27352E 78%, #E3EBE5 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Mono Slate (palette)
No color at all — black-and-white-photography restraint that lets the content speak.
Prompt: Use a Mono Slate palette: total colorlessness, black-and-white-photography restraint that lets the content speak. Background #111113 (charcoal, never pure black), cards #1A1A1D, borders #2A2A2E; body text #EAEAEC (near-white gray, never pure white), secondary text #909095; primary buttons in light gray-white #E5E5E8 with deep charcoal text #131316 — the signature move is this light-on-dark inversion; accent #A0A0A8 (mid-gray), used only for subtle emphasis. The whole palette lives on the grayscale — no hue anywhere. Forbidden: any colored element (this is an achromatic palette), pure #000 backgrounds, colored shadows, color gradients.
Fetch: copy the block below
```css
/**
* Mono Slate · 炭黑单色 — UI Lab palette (Dark)
*
* No color at all — black-and-white-photography restraint that lets the content speak.
*
* Best for: Photography and design portfolios, fashion brands, writing platforms, minimalist tools
*
* - 60-30-10: charcoal background 60%, cards and whitespace 30%, light gray-white primary plus mid-gray accent ≤10% combined
* - Dark backgrounds should never go pure black: #111113 keeps a breath of grayscale, less flat and airless than #000
* - Body text should never go pure white: #EAEAEC gives ~14:1 contrast — legible without glaring
* - Invert the primary button to light gray-white #E5E5E8 on deep charcoal text #131316 — the single 'bright block' in the palette, built on lightness alone, never hue
* - Reserve #A0A0A8 for minor emphasis (timestamps, index numbers) — never reach for color to rescue a flat moment
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #111113; /* bg */
--foreground: #EAEAEC; /* text */
--card: #1A1A1D; /* surface */
--muted-foreground: #909095; /* muted */
--border: #2A2A2E; /* border */
--primary: #E5E5E8; /* primary */
--primary-foreground: #131316; /* primaryFg */
--accent: #A0A0A8; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #EAEAEC;
--popover: #1A1A1D;
--popover-foreground: #EAEAEC;
--secondary: #1A1A1D;
--secondary-foreground: #EAEAEC;
--muted: #1A1A1D;
--accent-foreground: #EAEAEC;
--input: #2A2A2E;
--border-strong: color-mix(in oklab, #2A2A2E 78%, #EAEAEC 22%);
--ring: color-mix(in oklab, #2A2A2E 78%, #EAEAEC 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Earth Tones (palette)
Clay pots, linen sheets, and wood left out in the sun — terracotta grounded by a touch of olive.
Prompt: Use an Earth Tones palette: clay, linen, and sun-warmed wood. Background #F7F1E8 (linen beige), cards #FCF9F3 (warm white), borders #E5D8C4 (pale terracotta); body text #4A3B2B (deep umber, never pure black), secondary text #97835F (warm taupe); primary buttons #A9744A (terracotta) with warm-white text #FBF6EE; the accent is #6B7F4F (olive green), reserved for icons, tags, or small emphasis text. The overall feel should be grounded and warm, like fired clay and weathered wood. Forbidden: neon colors, cool-blue dominance, pure #000 or #fff, plastic-slick high saturation, glossy metallic gradients.
Fetch: copy the block below
```css
/**
* Earth Tones · 大地色 — UI Lab palette (Earthy & Classic)
*
* Clay pots, linen sheets, and wood left out in the sun — terracotta grounded by a touch of olive.
*
* Best for: Furniture and home brands, artisan/craft goods, coffee roasters, sustainable fashion
*
* - 60-30-10: linen background 60%, cards and whitespace 30%, terracotta primary plus olive accent ≤10% combined
* - Step lightness rather than hue: #F7F1E8 → #E5D8C4 → #97835F → #4A3B2B, staying within warm browns and oranges
* - Body text uses deep umber #4A3B2B instead of pure black — readable against #F7F1E8 without feeling harsh
* - Pair the #A9744A button with warm-white #FBF6EE text, never pure white, to keep the color temperature consistent
* - Keep #6B7F4F olive as a true accent — past ~10% of the screen it overpowers the terracotta lead
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F7F1E8; /* bg */
--foreground: #4A3B2B; /* text */
--card: #FCF9F3; /* surface */
--muted-foreground: #97835F; /* muted */
--border: #E5D8C4; /* border */
--primary: #A9744A; /* primary */
--primary-foreground: #FBF6EE; /* primaryFg */
--accent: #6B7F4F; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #4A3B2B;
--popover: #FCF9F3;
--popover-foreground: #4A3B2B;
--secondary: #FCF9F3;
--secondary-foreground: #4A3B2B;
--muted: #FCF9F3;
--accent-foreground: #4A3B2B;
--input: #E5D8C4;
--border-strong: color-mix(in oklab, #E5D8C4 78%, #4A3B2B 22%);
--ring: color-mix(in oklab, #E5D8C4 78%, #4A3B2B 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Ocean Blue (palette)
Clean and cool, like a tide pool at low water — deep teal grounded by a flash of sky blue.
Prompt: Use an Ocean Blue palette: clean and cool, like a tide pool at low water. Background #F2F8FA (pale aqua), cards #FBFDFE (near-white), borders #D5E6EC (light cyan); body text #173B4A (deep teal, never pure black), secondary text #5E8494 (slate blue-gray); primary buttons #0E7490 (deep teal) with pale-blue text #F0FAFD; the accent is #38BDF8 (sky blue), reserved for icons, tags, or highlighted data. The feel should be bright and airy, with no warm tones creeping in. Forbidden: warm browns, hot pink, dark backgrounds, muddy grays, high-saturation color clashes.
Fetch: copy the block below
```css
/**
* Ocean Blue · 海洋蓝 — UI Lab palette (Earthy & Classic)
*
* Clean and cool, like a tide pool at low water — deep teal grounded by a flash of sky blue.
*
* Best for: Healthcare and wellness, travel/island tourism, ocean conservation orgs, clean-tech products
*
* - 60-30-10: pale-aqua background 60%, cards and whitespace 30%, deep-teal primary plus sky-blue accent ≤10% combined
* - Step lightness, not hue: #F2F8FA → #D5E6EC → #5E8494 → #173B4A, staying within blues and teals throughout
* - Body text uses deep teal #173B4A instead of pure black — clear against the pale-aqua background while staying cool
* - Pair the #0E7490 button with pale-blue #F0FAFD text, never pure white, to keep a trace of water in it
* - Sky blue #38BDF8 is highly saturated — reserve it for data points, icons, or small badges; large areas turn glaring
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F2F8FA; /* bg */
--foreground: #173B4A; /* text */
--card: #FBFDFE; /* surface */
--muted-foreground: #5E8494; /* muted */
--border: #D5E6EC; /* border */
--primary: #0E7490; /* primary */
--primary-foreground: #F0FAFD; /* primaryFg */
--accent: #38BDF8; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #173B4A;
--popover: #FBFDFE;
--popover-foreground: #173B4A;
--secondary: #FBFDFE;
--secondary-foreground: #173B4A;
--muted: #FBFDFE;
--accent-foreground: #173B4A;
--input: #D5E6EC;
--border-strong: color-mix(in oklab, #D5E6EC 78%, #173B4A 22%);
--ring: color-mix(in oklab, #D5E6EC 78%, #173B4A 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Corporate Blue (palette)
Professional, trustworthy, unshakeably corporate — the blue that never surprises anyone.
Prompt: Use a Corporate Blue palette: professional, trustworthy, unshakeably enterprise. Background #F6F8FA (cool off-white), cards #FFFFFF (pure white), borders #DDE3EA (pale blue-gray); body text #1F2A37 (deep graphite blue, never pure black), secondary text #64748B (slate gray); primary buttons #1D4ED8 (standard blue) with pale-blue text #F5F8FF; the accent is #0EA5E9 (bright sky blue), reserved for charts, status tags, or link hover states. The overall feel is restrained and orderly, like a tightly typeset corporate report. Forbidden: playful candy colors, saturated reds or purples, dark-mode-only backgrounds, decorative gradients, handwritten or doodle-style elements.
Fetch: copy the block below
```css
/**
* Corporate Blue · 商务蓝灰 — UI Lab palette (Earthy & Classic)
*
* Professional, trustworthy, unshakeably corporate — the blue that never surprises anyone.
*
* Best for: B2B corporate websites, finance and legal, enterprise SaaS, consulting firms
*
* - 60-30-10: cool off-white background 60%, white cards and whitespace 30%, standard-blue primary plus sky-blue accent ≤10% combined
* - Step lightness, not hue: #F6F8FA → #DDE3EA → #64748B → #1F2A37, staying strictly within blue-grays with no third hue
* - Body text uses deep graphite blue #1F2A37 instead of pure black — sufficient contrast but softer for long reading sessions
* - Pair the #1D4ED8 button with pale-blue #F5F8FF text, never pure white, to keep the cool temperature consistent
* - Reserve #0EA5E9 for chart data points or rare interactive feedback — any larger footprint breaks the corporate restraint
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F6F8FA; /* bg */
--foreground: #1F2A37; /* text */
--card: #FFFFFF; /* surface */
--muted-foreground: #64748B; /* muted */
--border: #DDE3EA; /* border */
--primary: #1D4ED8; /* primary */
--primary-foreground: #F5F8FF; /* primaryFg */
--accent: #0EA5E9; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #1F2A37;
--popover: #FFFFFF;
--popover-foreground: #1F2A37;
--secondary: #FFFFFF;
--secondary-foreground: #1F2A37;
--muted: #FFFFFF;
--accent-foreground: #1F2A37;
--input: #DDE3EA;
--border-strong: color-mix(in oklab, #DDE3EA 78%, #1F2A37 22%);
--ring: color-mix(in oklab, #DDE3EA 78%, #1F2A37 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Ink Wash (palette)
Rice paper, pine-soot ink, and a single stroke of cinnabar — Chinese aesthetics translated for a screen.
Prompt: Use an Ink Wash palette: rice-paper background, ink-black text, one seal-stamp of cinnabar. Background #F7F5F0 (rice paper), cards #FDFCF8 (warm white), borders #E2DDD2 (pale greige); body text #26241F (pine-soot black, never pure black), secondary text #7D786C (taupe gray); primary buttons #2F3A44 (indigo ink) with warm-white text #F5F4EE; the accent is #B5432A (cinnabar red), reserved for seal-stamp-sized emphasis only — a badge corner or a key number. The overall look is restrained new-Chinese aesthetics: ink dominates, cinnabar merely punctuates. Forbidden: garish lantern-red (cinnabar stays seal-sized, never a large color block), heaps of gold, high-saturation clashes, tech-blue accents.
Fetch: copy the block below
```css
/**
* Ink Wash · 水墨丹青 — UI Lab palette (Earthy & Classic)
*
* Rice paper, pine-soot ink, and a single stroke of cinnabar — Chinese aesthetics translated for a screen.
*
* Best for: Tea, calligraphy, and guofeng brands, museums and exhibitions, Chinese dining, cultural publishing
*
* - 60-30-10: rice-paper background 60%, cards and whitespace 30%, indigo-ink primary plus cinnabar accent ≤10% combined
* - Step lightness, not hue: #F7F5F0 → #E2DDD2 → #7D786C → #26241F, keeping to ink black and indigo with no third hue
* - Body text uses pine-soot black #26241F instead of pure black, keeping a trace of warmth like brushed ink rather than print
* - Pair the #2F3A44 button with warm-white #F5F4EE text, never pure white, to echo the rice-paper undertone
* - Keep cinnabar #B5432A strictly seal-stamp sized — spread it wider and the look shifts from ink wash to New Year print
*
* Paste this below `@import "tailwindcss";` in your globals.css. This
* is a single light/dark-agnostic theme — if this palette is from the
* "dark" group, its colors already are the dark theme. Pairs with UI
* Lab's /theme.css theme layer if you're using it.
*/
:root {
--background: #F7F5F0; /* bg */
--foreground: #26241F; /* text */
--card: #FDFCF8; /* surface */
--muted-foreground: #7D786C; /* muted */
--border: #E2DDD2; /* border */
--primary: #2F3A44; /* primary */
--primary-foreground: #F5F4EE; /* primaryFg */
--accent: #B5432A; /* accent */
/* Derived — full shadcn token coverage so this block is drop-in for any shadcn project */
--card-foreground: #26241F;
--popover: #FDFCF8;
--popover-foreground: #26241F;
--secondary: #FDFCF8;
--secondary-foreground: #26241F;
--muted: #FDFCF8;
--accent-foreground: #26241F;
--input: #E2DDD2;
--border-strong: color-mix(in oklab, #E2DDD2 78%, #26241F 22%);
--ring: color-mix(in oklab, #E2DDD2 78%, #26241F 22%);
/* --destructive: not set — this palette has no danger role; keep your project's default */
}
```
### Graphite (design-system)
The baseline light-and-dark skin for a tool-first Agent workbench: quiet graphite surfaces, hairline structure, compact controls, and one restrained accent keep long-running work legible without competing with it.
Prompt: Use the 'Graphite Agent Workbench' design system: build a resizable three-column workbench with a compact conversation rail on the left, a fixed-reading-width Agent thread plus bottom composer in the center, and an on-demand artifact area on the right with rendered preview, raw source, and version restore. Establish hierarchy with near-neutral graphite surfaces, 0.5–1px hairlines, low-contrast hover fills, and one restrained cool accent. Keep density high but line-height controlled; use monospace for code and commands, and introduce semantic color only for success, warning, and error states. Support matching light and dark themes without changing component sizing or spatial relationships. FORBIDDEN: colorful gradient backdrops, heavy drop shadows, glassmorphism everywhere, competing accent colors, stacks of oversized rounded cards, collapsing the desktop workbench into a generic marketing page, or decorative animation that obscures task state.
Fetch: copy the block below
```markdown
# Graphite
Graphite is a baseline light-and-dark design system for tool-first Agent workbenches.
## Principles
- Keep the work visible: chrome is quiet, dense, and subordinate to the task.
- Build hierarchy with graphite surface steps and 0.5–1px hairlines.
- Reserve one cool accent for selection, focus, and active execution.
- Use semantic color only for success, warning, approval, and failure.
## Workbench anatomy
- Header: compact global controls and the current task title.
- Sidebar: resizable conversation rail with grouped, selectable threads.
- Thread: fixed reading width for user prompts, work logs, tools, and artifacts.
- Composer: pinned input with explicit context, model, effort, and attachments.
- Artifacts: optional resizable preview/source panel with version navigation and restore; it squeezes the main column in flow.
## Typography and motion
Use a neutral system sans stack for UI and a system monospace stack for commands. Animate transform and opacity only; keep routine feedback below 300ms, respect reduced motion, and never animate away critical state.
```
### Nightflight (design-system)
A near-black workbench with cool graphite depth, precise lavender-blue focus states, and restrained contrast for long-running tasks after dark.
Prompt: Use the 'Nightflight Workbench' design system: establish low-light depth with a #0a0a0b canvas, #0f1011 primary surfaces, and #18191a raised layers, then separate the sidebar, thread, composer, and artifact area with precise cool-gray hairlines. Keep primary copy crisp and cool, step secondary information down through blue-gray tones, and reserve #5e6ad2 for focus, selection, and primary actions. Semantic green, red, and orange appear only when the underlying state is real; typography is a compact system sans paired with a technical monospace, and motion stays brief, quiet, and predictable.
FORBIDDEN: multicolor gradients, warm foundations, thick borders, large shadows, decorative accent coverage, or using the accent anywhere beyond focus, selection, and primary controls.
Fetch: copy the block below
```markdown
---
name: Nightflight
description: A near-black workbench with a single lavender-blue focus color.
---
# Nightflight
## Colors
colors:
canvas: "#0a0a0b"
surface: "#0f1011"
raised: "#18191a"
ink: "#f7f8f8"
ink-secondary: "#d0d6e0"
ink-muted: "#8a8f98"
ink-faint: "#62666d"
hairline: "#23252a"
hairline-strong: "#34343a"
accent: "#5e6ad2"
accent-hover: "#828fff"
success: "#27a644"
danger: "#eb5757"
warning: "#f2994a"
## Typography
typography:
body: "'SF Pro Display', Inter, system-ui, sans-serif"
display: "'SF Pro Display', Inter, system-ui, sans-serif"
mono: "'SF Mono', ui-monospace, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep the canvas almost black and distinguish depth with small value steps.
- Use 0.5–1px cool hairlines; reserve the strong line for active boundaries.
- Avoid ambient shadows. Raised layers should read through tone and adjacency.
- Keep routine radii compact and consistent across controls and panels.
## Components
- Sidebar: use the primary surface with faint rows and one lavender selection.
- Thread: keep the reading field quiet; logs and code sit on restrained insets.
- Composer: raise it one step, show a precise focus line, and avoid glow.
- Artifact panel: match the main surface, retain hairlines, and show version state clearly.
- Buttons: solid accent is only for the primary action; secondary actions stay neutral.
- Status: introduce semantic color only for actual success, danger, or warning.
## FORBIDDEN
- Multicolor or decorative gradients.
- Warm foundations and amber-tinted neutrals.
- Thick borders, large shadows, or luminous glows.
- Accent color used outside focus, selection, and primary actions.
```
### Stark (design-system)
A pure-black, high-contrast tool surface shaped by crisp geometry, compact radii, and a single electric-blue action color.
Prompt: Use the 'Stark Workbench' design system: start from a pure #000000 canvas and build only small but legible surface steps with #0a0a0a and #111111. Organize the interface through high-contrast grayscale, a compact grid, short labels, and radii no larger than 8px. Reserve #0070f3 for links, focus, and the primary action; give the sidebar, thread, composer, and artifact panel the same crisp hairline boundaries, while monospace carries code, versions, and execution state.
FORBIDDEN: tinted foundations outside grayscale, colorful gradient backgrounds, large cards with radii above 8px, glowing shadows, or soft decoration that weakens the geometric order.
Fetch: copy the block below
```markdown
---
name: Stark
description: A pure-black geometric workbench with one electric-blue action color.
---
# Stark
## Colors
colors:
canvas: "#000000"
surface: "#0a0a0a"
raised: "#111111"
ink: "#ededed"
ink-secondary: "#cccccc"
ink-muted: "#a1a1a1"
ink-faint: "#666666"
hairline: "#2e2e2e"
hairline-strong: "#444444"
accent: "#0070f3"
success: "#50e3c2"
danger: "#ff4d4f"
warning: "#f5a623"
## Typography
typography:
body: "Geist, Inter, system-ui, sans-serif"
display: "Geist, Inter, system-ui, sans-serif"
mono: "'Geist Mono', 'SF Mono', ui-monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep foundations strictly black and neutral gray.
- Separate layers with exact value steps and 1px hairlines, not atmospheric depth.
- Cap large container radii at 8px; small controls may be tighter.
- Do not use glow. If elevation is necessary, prefer a hard local boundary.
## Components
- Sidebar: compact rows, square rhythm, and one high-contrast selected state.
- Thread: maximize readable contrast and keep metadata visibly subordinate.
- Composer: use a clear border and compact controls with no floating-card effect.
- Artifact panel: align to the grid and preserve crisp preview/code boundaries.
- Buttons: blue is primary only; neutral buttons use monochrome hover fills.
- Status: use semantic colors as small state signals, never as backgrounds.
## FORBIDDEN
- Tinted or colored foundation surfaces.
- Colorful gradient backgrounds.
- Large cards with radii above 8px.
- Glowing shadows or soft decorative effects.
```
### Paper (design-system)
A warm-white, paper-like workspace where gentle gray ink, generous breathing room, and one clear blue action color replace heavy chrome.
Prompt: Use the 'Paper Workbench' design system: create paper-like depth with a warm #ffffff canvas and soft #f7f7f5 surfaces, write primary content in #37352f gray ink, and step metadata down through #787774 and #9b9a97. Build hierarchy mainly with whitespace, paragraph rhythm, and very pale hairlines; reserve #0075de for links, focus, and the primary action. Treat the sidebar as a table of contents, the thread as a working manuscript, the composer as a footer annotation, and the artifact area as a parallel document with versions.
FORBIDDEN: large high-saturation color fields, dark foundations, hard shadows, neon accents, or dense frames used in place of whitespace and pale surfaces.
Fetch: copy the block below
```markdown
---
name: Paper
description: A warm-white workbench organized by whitespace and gentle gray ink.
---
# Paper
## Colors
colors:
canvas: "#ffffff"
surface: "#f7f7f5"
raised: "#ffffff"
ink: "#37352f"
ink-secondary: "#4d4a42"
ink-muted: "#787774"
ink-faint: "#9b9a97"
hairline: "#e9e9e7"
accent: "#0075de"
success: "#1aae39"
danger: "#eb5757"
warning: "#dd5b00"
## Typography
typography:
body: "ui-sans-serif, -apple-system, 'Segoe UI', sans-serif"
display: "ui-sans-serif, -apple-system, 'Segoe UI', sans-serif"
mono: "'SFMono-Regular', Consolas, ui-monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Let whitespace and text rhythm establish most of the hierarchy.
- Use warm off-white surfaces and very pale hairlines only where needed.
- Keep shadows nearly absent; a raised sheet should feel adjacent, not floating.
- Use modest, consistent radii and avoid pill shapes for large containers.
## Components
- Sidebar: read as a quiet table of contents with one soft selected row.
- Thread: format the conversation like a working document with calm measure.
- Composer: resemble a footer annotation, separated by space and one hairline.
- Artifact panel: present preview and source as parallel paper documents.
- Buttons: reserve blue for the primary action and text links.
- Status: use compact semantic labels instead of broad colored surfaces.
## FORBIDDEN
- Large high-saturation color fields.
- Dark foundations, hard shadows, or neon accents.
- Dense frame stacking used instead of whitespace.
- Excess decorative chrome around text content.
```
### Terracotta (design-system)
A quiet cream workbench with terracotta emphasis, crafted serif display type, and warm tactile surfaces for thoughtful collaboration.
Prompt: Use the 'Terracotta Workbench' design system: create a quiet tactile field with a #faf9f5 cream canvas and #f5f0e8 warm surfaces. Set body copy in near-black #141413, use a restrained literary serif for display moments, and keep controls and code in clear sans and monospace faces. Introduce #cc785c terracotta sparingly for primary actions, focus, and selection; connect the sidebar, thread, composer, and artifact area through warm-gray hairlines and gentle surface steps, with plain semantic status colors.
FORBIDDEN: cool-gray foundations, a vast pure-white base, technological gradients, sharp square corners, frequent decorative accent use, or heavy stacked shadows.
Fetch: copy the block below
```markdown
---
name: Terracotta
description: A cream workbench with quiet terracotta emphasis and serif display type.
---
# Terracotta
## Colors
colors:
canvas: "#faf9f5"
surface: "#f5f0e8"
raised: "#ffffff"
ink: "#141413"
ink-secondary: "#3d3d3a"
ink-muted: "#6c6a64"
ink-faint: "#8e8b82"
hairline: "#e6dfd8"
accent: "#cc785c"
success: "#5db872"
danger: "#c64545"
warning: "#d4a017"
## Typography
typography:
body: "-apple-system, 'Segoe UI', sans-serif"
display: "'Copernicus', 'Tiempos Headline', Georgia, serif"
mono: "ui-monospace, 'SF Mono', monospace"
body-weight: 400
label-weight: 500
heading-weight: 500
## Surfaces & lines
- Keep the canvas creamy and the working surfaces softly warm.
- Use warm-gray hairlines and small tonal steps instead of hard separation.
- Prefer gentle local depth; shadows should be rare, short, and low contrast.
- Use softened corners consistently without turning every control into a pill.
## Components
- Sidebar: use a warm surface and a low-frequency terracotta selection mark.
- Thread: keep body copy sans; reserve serif for titles and artifact headings.
- Composer: make it tactile and calm with one warm hairline and clear focus.
- Artifact panel: feel like a crafted sheet with explicit preview and version controls.
- Buttons: terracotta is primary only; secondary controls remain warm neutral.
- Status: keep green, red, and ochre compact and informational.
## FORBIDDEN
- Cool-gray foundations or a vast pure-white base.
- Technological gradients and sharp square corners.
- Heavy stacks of floating shadows.
- Frequent or decorative use of the terracotta accent.
```
### Indigo (design-system)
A cool-white precision workbench with misted blue-gray structure and a controlled indigo action color for data-heavy operations.
Prompt: Use the 'Indigo Workbench' design system: establish a precise but approachable operational field with a #ffffff cool canvas and #f6f9fc mist-blue surfaces. Set primary copy in deep navy #0d253d and step secondary information back through blue-gray tones. Organize dense data, the sidebar, thread, composer, and artifact versions with #e3e8ee hairlines; reserve #533afd for the primary action and selected state, and keep success, danger, and warning as compact signals rather than broad decoration.
FORBIDDEN: warm paper foundations, serif typography, stacks of heavy floating shadows, large indigo decorations, or accent color outside primary actions, focus, and selection.
Fetch: copy the block below
```markdown
---
name: Indigo
description: A cool-white precision workbench with mist-blue structure and indigo action states.
---
# Indigo
## Colors
colors:
canvas: "#ffffff"
surface: "#f6f9fc"
raised: "#ffffff"
ink: "#0d253d"
ink-secondary: "#273951"
ink-muted: "#64748d"
ink-faint: "#8ca2ba"
hairline: "#e3e8ee"
accent: "#533afd"
success: "#1ea672"
danger: "#df1b41"
warning: "#d97917"
## Typography
typography:
body: "'sohne-var', 'SF Pro Display', system-ui, sans-serif"
display: "'sohne-var', 'SF Pro Display', system-ui, sans-serif"
mono: "'SF Mono', Menlo, ui-monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep foundations cool white with mist-blue working surfaces.
- Use pale blue-gray hairlines to structure dense information precisely.
- Prefer borders and tonal adjacency over stacked elevation or heavy shadow.
- Keep radii controlled and consistent for a dependable operational feel.
## Components
- Sidebar: use compact blue-gray rows and one indigo selected state.
- Thread: keep navy text crisp and metadata visibly lighter without losing contrast.
- Composer: frame it with a pale line and use indigo only for focus and send.
- Artifact panel: maintain exact preview/code and version boundaries on cool surfaces.
- Buttons: indigo is reserved for primary action; secondary controls stay neutral.
- Status: use small green, red, and orange signals tied to real state.
## FORBIDDEN
- Warm paper foundations or serif typography.
- Heavy stacks of floating shadows.
- Large decorative indigo fields.
- Accent use beyond primary actions, focus, and selection.
```
### Pearl (design-system)
A system-native pearl-white workbench where quiet gray zoning, fine hairlines, and one restrained blue accent keep focused tools immediately legible.
Prompt: Use the 'Pearl Workbench' design system: build a light, system-native hierarchy with a #ffffff pearl-white canvas and #f5f5f7 gray-white zoning, then organize the sidebar, thread, composer, and artifact area with #e0e0e0 structural hairlines and #f0f0f0 quiet dividers. Set primary text in #1d1d1f, step secondary information down through soft neutral grays, and reserve #0071e3 for focus, selection, and primary actions. Give display, body, and code distinct clear type stacks, and create depth through whitespace, zoning, and exact alignment instead of shadows.
FORBIDDEN: large dark backgrounds, high-saturation clashing colors, thick hard borders, accent colors outside the system blue, or shadow-stacked hierarchy.
Fetch: copy the block below
```markdown
---
name: Pearl
description: A system-native pearl-white workbench shaped by quiet zoning and one blue accent.
---
# Pearl
## Colors
colors:
canvas: "#ffffff"
surface: "#f5f5f7"
raised: "#ffffff"
ink: "#1d1d1f"
ink-secondary: "#333333"
ink-muted: "#7a7a7a"
ink-faint: "#a1a1a6"
hairline: "#e0e0e0"
divider: "#f0f0f0"
accent: "#0071e3"
success: "#34c759"
danger: "#ff3b30"
warning: "#ff9500"
## Typography
typography:
body: "'SF Pro Text', -apple-system, system-ui, sans-serif"
display: "'SF Pro Display', -apple-system, system-ui, sans-serif"
mono: "'SF Mono', ui-monospace, Menlo, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep the canvas pearl white and use #f5f5f7 to zone working regions.
- Use #e0e0e0 for structural hairlines and #f0f0f0 for quiet dividers.
- Establish hierarchy with spacing and tonal adjacency rather than shadow.
- Keep radii controlled, smooth, and consistent across panels and controls.
## Components
- Sidebar: use the gray-white surface with one restrained blue selection.
- Thread: preserve generous reading space and step metadata down in neutral gray.
- Composer: define it with zoning and a fine focus line, never a floating shadow.
- Artifact panel: keep preview, source, and version boundaries light but explicit.
- Buttons: reserve system blue for the primary action and selected controls.
- Status: use green, red, and orange only for real semantic state.
## FORBIDDEN
- Large dark backgrounds.
- High-saturation clashing colors.
- Thick hard borders or accent colors outside the system blue.
- Shadow-stacked hierarchy.
```
### Jade (design-system)
A dark developer workbench with ink-black depth, precise emerald action states, and the dense clarity of a database operations tool.
Prompt: Use the 'Jade Workbench' design system: establish compact database-tool depth with a #1c1c1c ink canvas, #202020 primary surfaces, and #262626 raised layers, then organize the sidebar, thread, composer, and artifact area with #303030 hairlines. Keep primary copy white and step metadata down through neutral grays. Reserve #3ecf8e emerald for primary actions, selection, and focus, pairing it with #171717 dark foreground text as the system's defining green-control treatment. Set queries, code, and version data in monospace, and show semantic green, red, or yellow only for real state.
FORBIDDEN: large light foundations, blue-violet accents, warm gradients, decorative green coverage, or green used outside primary actions, selection, and success.
Fetch: copy the block below
```markdown
---
name: Jade
description: A dark database workbench with precise emerald action states.
---
# Jade
## Colors
colors:
canvas: "#1c1c1c"
surface: "#202020"
raised: "#262626"
ink: "#ffffff"
ink-secondary: "#d4d4d4"
ink-muted: "#9a9a9a"
ink-faint: "#707070"
hairline: "#303030"
accent: "#3ecf8e"
accent-foreground: "#171717"
success: "#4ade80"
danger: "#f56565"
warning: "#ffdb13"
## Typography
typography:
body: "Circular, 'Helvetica Neue', Helvetica, sans-serif"
display: "Circular, 'Helvetica Neue', Helvetica, sans-serif"
mono: "ui-monospace, 'SF Mono', monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Build depth through close ink-black value steps and exact hairlines.
- Keep surfaces opaque, compact, and free of atmospheric glow or gradients.
- Use emerald controls with dark foreground text for the system identity.
- Let dense grids and alignment communicate a dependable database-tool rhythm.
## Components
- Sidebar: use compact neutral rows with one emerald selected state.
- Thread: keep prose white and set queries, code, and paths in monospace.
- Composer: raise it one value step and reserve emerald for focus and send.
- Artifact panel: preserve crisp source, preview, and version boundaries.
- Buttons: primary controls use emerald with #171717 text; others stay neutral.
- Status: use green, red, and yellow only when the underlying state is real.
## FORBIDDEN
- Large light foundations or blue-violet accents.
- Warm gradients.
- Decorative or broad green coverage.
- Green outside primary actions, selection, and success.
```
### Prism (design-system)
A white design workbench with crisp black ink, one clear blue action color, and soft color blocks reserved for labels and illustration.
Prompt: Use the 'Prism Workbench' design system: establish direct design-tool hierarchy with a #ffffff canvas, #f7f7f5 soft zoning, and crisp #000000 ink, then organize the sidebar, thread, composer, and artifact area with #e6e6e6 hairlines and #f1f1f1 quiet dividers. Reserve #0d99ff for primary actions, focus, and selection. Introduce lime #dceeb1, lilac #c5b0f4, cream #f4ecd6, and mint #c8e6cd only as label or illustration backgrounds so the interface retains a soft prismatic note without competing with blue.
FORBIDDEN: large dark foundations, monochrome minimalism so severe that no soft color remains, or thick black borders; black is ink for text, never interface framing.
Fetch: copy the block below
```markdown
---
name: Prism
description: A white design workbench with black ink, blue actions, and soft color blocks.
---
# Prism
## Colors
colors:
canvas: "#ffffff"
surface: "#f7f7f5"
raised: "#ffffff"
ink: "#000000"
ink-secondary: "#333333"
ink-muted: "#6b6b6b"
ink-faint: "#9a9a9a"
hairline: "#e6e6e6"
divider: "#f1f1f1"
accent: "#0d99ff"
success: "#1ea64a"
danger: "#f24822"
warning: "#ffcd29"
illustration-lime: "#dceeb1"
illustration-lilac: "#c5b0f4"
illustration-cream: "#f4ecd6"
illustration-mint: "#c8e6cd"
## Typography
typography:
body: "'Figma Sans', Inter, system-ui, sans-serif"
display: "'Figma Sans', Inter, system-ui, sans-serif"
mono: "'SF Mono', ui-monospace, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep the main interface white, direct, and structured by pale gray zoning.
- Use fine gray hairlines; black belongs to text and never to interface frames.
- Reserve soft color blocks for labels, annotations, and illustration grounds.
- Avoid shadow depth; prefer adjacency, spacing, and canvas-like alignment.
## Components
- Sidebar: use soft gray zoning and one clear blue selected state.
- Thread: keep black ink crisp and allow small pastel annotation labels.
- Composer: remain white with a pale divider and a blue focus or send action.
- Artifact panel: feel like a precise canvas with light preview/source boundaries.
- Buttons: blue is primary; pastel colors never become competing controls.
- Status: use semantic colors only for actual state.
## FORBIDDEN
- Large dark foundations.
- Colorless minimalism with no soft accent blocks.
- Thick black borders; black is text ink only.
- Pastel blocks used as the primary interface color.
```
### Coral (design-system)
An ivory-stone workbench with coral action states and an academic warmth suited to thoughtful enterprise research and language tools.
Prompt: Use the 'Coral Workbench' design system: establish warm, considered academic hierarchy with a #ffffff canvas and #eeece7 ivory-stone surfaces. Carry long-form research in #212121 charcoal text with muted gray-violet secondary tones, and separate the sidebar, thread, composer, and artifact area using #d9d9dd hairlines. Reserve #ff7759 coral for primary interface actions, focus, and selection. Deep green #003c33 and action blue #1863dc may support links or graphics, but never replace coral as the interface accent.
FORBIDDEN: cool gray-blue dominance, large dark foundations, coral used as body text, or adjacent high-saturation colors that clash.
Fetch: copy the block below
```markdown
---
name: Coral
description: An ivory-stone workbench with coral actions and academic warmth.
---
# Coral
## Colors
colors:
canvas: "#ffffff"
surface: "#eeece7"
raised: "#ffffff"
ink: "#212121"
ink-secondary: "#616161"
ink-muted: "#75758a"
ink-faint: "#93939f"
hairline: "#d9d9dd"
accent: "#ff7759"
success: "#1ea64a"
danger: "#b30000"
warning: "#d97917"
supporting-deep-green: "#003c33"
supporting-action-blue: "#1863dc"
## Typography
typography:
body: "'Cohere Text', -apple-system, system-ui, sans-serif"
display: "'Cohere Text', -apple-system, system-ui, sans-serif"
mono: "ui-monospace, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Use ivory-stone zoning to create warmth without reducing text clarity.
- Keep hairlines cool enough for precision but subordinate to the warm surface.
- Prefer quiet adjacency and editorial spacing over elevated shadow stacks.
- Use deep green and action blue only for links or supporting graphics.
## Components
- Sidebar: use ivory stone with one restrained coral selected state.
- Thread: support long-form reading with charcoal ink and generous measure.
- Composer: stay white, lightly framed, and coral only at focus or send.
- Artifact panel: feel editorial, with clear but quiet preview/version structure.
- Buttons: coral owns interface emphasis; blue remains a link or graphic aid.
- Status: semantic colors appear in small, factual state indicators.
## FORBIDDEN
- Cool gray-blue dominance or large dark foundations.
- Coral used as body text.
- High-saturation colors placed in direct competition.
- Supporting colors promoted to the primary interface accent.
```
### Stone (design-system)
A warm-stone monochrome workbench with pure-black emphasis, restrained serif display type, and illustration-only waveform color.
Prompt: Use the 'Stone Workbench' design system: build a warm stone grayscale with a #f5f5f5 canvas, #fafafa surfaces, and #ffffff raised layers. Use near-black #0c0a09 for body ink, focus, primary actions, and selection, while #e7e5e4 warm hairlines organize the sidebar, thread, composer, and artifact area. Set display moments in serif and working text in a clear sans. Mint #a7e5d3, peach #f4c5a8, and lavender #c8b8e0 belong only to illustration or waveform graphics, never controls or interface emphasis.
FORBIDDEN: colored interface accents, cool-gray foundations, large dark backgrounds, or radii above 12px; preserve a warm-stone grayscale and monochrome control hierarchy.
Fetch: copy the block below
```markdown
---
name: Stone
description: A warm-stone monochrome workbench with serif display type.
---
# Stone
## Colors
colors:
canvas: "#f5f5f5"
surface: "#fafafa"
raised: "#ffffff"
ink: "#0c0a09"
ink-secondary: "#292524"
ink-muted: "#777169"
ink-faint: "#a8a29e"
hairline: "#e7e5e4"
accent: "#0c0a09"
accent-foreground: "#ffffff"
success: "#1ea64a"
danger: "#dc2626"
warning: "#d97706"
illustration-mint: "#a7e5d3"
illustration-peach: "#f4c5a8"
illustration-lavender: "#c8b8e0"
## Typography
typography:
body: "ui-sans-serif, -apple-system, sans-serif"
display: "Waldenburg, 'Times New Roman', serif"
mono: "ui-monospace, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep every foundation inside a warm stone grayscale.
- Use near-black controls and fine warm hairlines instead of color emphasis.
- Cap all radii at 12px and prefer restrained tonal adjacency over shadow.
- Confine the mint-to-peach-to-lavender accent gradient to illustration and waveform graphics.
## Components
- Sidebar: use warm gray zoning with a near-black selected state.
- Thread: pair serif display moments with highly readable sans body copy.
- Composer: stay monochrome, compact, and clearly bounded by a warm hairline.
- Artifact panel: preserve quiet structure and let content carry the hierarchy.
- Buttons: primary is near black with white text; secondary controls stay stone.
- Status: semantic color remains factual and never becomes the visual accent.
## FORBIDDEN
- Colored interface accents or cool-gray foundations.
- Large dark backgrounds.
- Radii above 12px.
- Illustration colors used inside controls.
```
### Parchment (design-system)
A cream-parchment workbench defined by charcoal pill controls and a heartbeat of rose, distinct from Terracotta's serif type and clay-orange craft.
Prompt: Use the 'Parchment Workbench' design system: establish a human, handmade field with a #f7f4ed cream-parchment canvas, #f1eee5 surfaces, and #fcfbf8 raised layers. Derive the grayscale from #1c1c1c charcoal at 3%, 4%, 40%, and 82% opacity steps, and favor fully rounded pill buttons. Reserve #ff4d84 rose for primary actions, selection, or a small heartbeat accent. Unlike Terracotta's serif display type and clay-orange craft, this system uses one sans voice, charcoal pills, and low-frequency rose.
FORBIDDEN: cool-white foundations, pure #000000, technology blue, sharp square corners, or broad rose coverage; rose is only a restrained heartbeat accent and key action signal.
Fetch: copy the block below
```markdown
---
name: Parchment
description: A cream-parchment workbench with charcoal pills and a heartbeat of rose.
---
# Parchment
## Colors
colors:
canvas: "#f7f4ed"
surface: "#f1eee5"
raised: "#fcfbf8"
ink: "#1c1c1c"
ink-secondary: "#3a3a38"
ink-muted: "#5f5f5d"
ink-faint: "#8a8a86"
hairline: "#eceae4"
accent: "#ff4d84"
success: "#1ea64a"
danger: "#c64545"
warning: "#d97917"
charcoal-03: "color-mix(in srgb, #1c1c1c 3%, transparent)"
charcoal-04: "color-mix(in srgb, #1c1c1c 4%, transparent)"
charcoal-40: "color-mix(in srgb, #1c1c1c 40%, transparent)"
charcoal-82: "color-mix(in srgb, #1c1c1c 82%, transparent)"
## Typography
typography:
body: "'Camera Plain', ui-sans-serif, system-ui, sans-serif"
display: "'Camera Plain', ui-sans-serif, system-ui, sans-serif"
mono: "ui-monospace, monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Derive gray fills and text hierarchy from #1c1c1c opacity steps.
- Keep canvas and surfaces cream, tactile, and visibly warmer than pure white.
- Prefer fully rounded pill buttons and soft continuous control silhouettes.
- Use rose as a heartbeat accent, never as a broad surface or body color.
## Components
- Sidebar: use parchment zoning with a charcoal pill selected state.
- Thread: keep the sans voice warm, conversational, and comfortably spaced.
- Composer: form a full pill with charcoal controls and one restrained rose action.
- Artifact panel: feel like a clean handmade sheet with very soft hairlines.
- Buttons: default to fully rounded pills; reserve rose for the key action.
- Status: use semantic colors sparingly and keep charcoal dominant.
## FORBIDDEN
- Cool-white foundations, pure black, or technology blue.
- Sharp square corners.
- Broad rose surfaces or repeated decorative pink.
- Terracotta-like serif and clay-orange styling.
```
### Frost (design-system)
An in-house glass workbench with pearl translucency, bright glass edges, and soft aurora color visibly diffused behind every working surface.
Prompt: Use the 'Frost Workbench' design system: place large, low-saturation aurora fields of sky #7dd3fc, violet #c4b5fd, pink #f9a8d4, and mint #6ee7b7 over a white base, keeping that color visibly present through rgba(255,255,255,0.55) primary surfaces and rgba(255,255,255,0.72) raised layers. Apply 18px backdrop blur directly to the translucent sidebar, thread cards, composer, and artifact panel. Build hierarchy with bright glass hairlines and quiet dividers, reserve #6d5dfc for focus, selection, and primary actions, and protect readability with deep slate ink.
FORBIDDEN: solid opaque large-area surfaces, dark backgrounds, hard drop shadows, glass panels with no visible content bleeding through behind them, or hairlines with excessive contrast that read as hard frames.
Fetch: copy the block below
```markdown
---
name: Frost
description: An in-house glass workbench with aurora color diffused behind pearl surfaces.
---
# Frost
## Colors
colors:
canvas: "rgba(255,255,255,0.2)"
surface: "rgba(255,255,255,0.55)"
raised: "rgba(255,255,255,0.72)"
ink: "#1e293b"
ink-secondary: "#334155"
ink-muted: "#64748b"
ink-faint: "#94a3b8"
hairline: "rgba(255,255,255,0.65)"
divider: "rgba(30,41,59,0.08)"
hover: "rgba(255,255,255,0.5)"
accent: "#6d5dfc"
success: "#10b981"
danger: "#ef4444"
warning: "#f59e0b"
aurora-sky: "#7dd3fc"
aurora-violet: "#c4b5fd"
aurora-pink: "#f9a8d4"
aurora-mint: "#6ee7b7"
## Typography
typography:
body: "inherit the site default sans"
display: "inherit the site default display face"
mono: "inherit the site default monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep the white-base aurora visibly bleeding through every glass surface.
- Apply 18px backdrop blur on the element that owns each translucent background.
- Use bright glass edges and low-contrast slate dividers instead of hard frames.
- Avoid opaque elevation; depth comes from diffusion, overlap, and tonal alpha.
## Components
- Sidebar: blur its clipped content layer so the resize handle remains unobstructed.
- Thread: place file, diff, and approval cards on translucent blurred glass.
- Composer: use raised pearl glass with a quiet edge and violet focus or send.
- Artifact panel: preserve visible aurora diffusion behind preview and version content.
- Buttons: reserve violet for primary action and selected controls.
- Status: keep green, red, and amber compact, factual, and readable on glass.
## FORBIDDEN
- Solid opaque large-area surfaces or dark backgrounds.
- Hard drop shadows.
- Glass panels with no visible content bleeding through behind them.
- Hairlines with enough contrast to read as hard frames.
```
### Eclipse (design-system)
A pure-black monochrome workbench where the only emphasis is inversion: white pill controls with near-black text, circular hairline icon chips, and a four-step gray text ladder.
Prompt: Use the 'Eclipse Workbench' design system: layer #141416 primary surfaces and #1d1d20 raised panels over a pure #000000 canvas, organizing the sidebar, thread, composer, and artifact area with #2b2d31 hairlines. Step text down a four-stop gray ladder (#ffffff / #d7d9dd / #8f939b / #5f6268). The only emphasis device is inversion: the primary action is a fully-rounded white pill with #0a0a0a near-black text, and selection and focus are white as well. Set icons inside circular hairline chips — never filled color blocks. Semantic green, red, and orange appear only for real state; code and commands are monospace.
FORBIDDEN: any hued accent (no blue, violet, or green), surface gradients or glow, heavy shadows, low-contrast gray-on-gray buttons, filled icon chips, or spending the inverse pill on secondary actions.
Fetch: copy the block below
```markdown
---
name: Eclipse
description: A pure-black monochrome workbench where emphasis is inversion, not color.
---
# Eclipse
## Colors
colors:
canvas: "#000000"
surface: "#141416"
raised: "#1d1d20"
ink: "#ffffff"
ink-secondary: "#d7d9dd"
ink-muted: "#8f939b"
ink-faint: "#5f6268"
hairline: "#2b2d31"
accent: "#ffffff"
accent-foreground: "#0a0a0a"
success: "#30a46c"
danger: "#e5484d"
warning: "#f0a13a"
## Typography
typography:
body: "Inter, 'Helvetica Neue', system-ui, sans-serif"
display: "Inter, 'Helvetica Neue', system-ui, sans-serif"
mono: "ui-monospace, 'SF Mono', monospace"
body-weight: 400
label-weight: 500
heading-weight: 600
## Surfaces & lines
- Keep the canvas pure black; separate depth with small near-black value steps.
- Draw structure with #2b2d31 hairlines; never with shadows or glow.
- Emphasis is inversion: white fills carry black text, and nothing else shouts.
- Icons live in circular hairline chips, all outline-style, never filled blocks.
## Components
- Sidebar: neutral compact rows; the selected row inverts to white-on-black text emphasis.
- Thread: white prose over black, metadata stepped down the gray ladder.
- Composer: raised one value step with a hairline; send is the white pill.
- Buttons: primary is a fully-rounded white pill with #0a0a0a text; secondary and ghost stay hairline-outlined and neutral.
- Status: green, red, and orange only when the underlying state is real.
## FORBIDDEN
- Any hued accent — no blue, violet, or green emphasis.
- Surface gradients, glow, or heavy shadows.
- Low-contrast gray-on-gray buttons.
- Filled icon chips or colored icon backgrounds.
- Inverse pills on secondary actions.
```
### Agent Workbench (recipe)
A dense application shell for agent conversations, tools, approvals, and artifacts.
Fetch: https://ui-lab-ten.vercel.app/catalog.json
### SaaS Landing (recipe)
A product-led landing composition with a clear hero, proof, features, pricing, and CTA rhythm.
Fetch: https://ui-lab-ten.vercel.app/catalog.json