skills.smoothui.dev — Design System

1. Visual Theme & Atmosphere

SmoothUI Skills is a developer-focused component showcase that takes the “modern developer tool” aesthetic and adds genuine personality through a single explosive accent: electric indigo (rgb(38, 1, 253)). The base is a barely-there off-white (rgb(251, 252, 253)) — so close to white it reads as white, but avoids flatness. Against this near-clinical background, the electric blue functions like a neon sign in a quiet room: unmissable, brand-defining, and technically expressive (it mirrors the kinds of colors you’d see in a WebGL color picker or shader output).

The type system pairs Geist — Vercel’s custom geometric sans — with Geist Mono for code samples, creating an explicit “this is for developers” signal without resorting to clichés. The overall mood is: sharp, capable, slightly playful.

2. Color Palette & Roles

The use of oklch for text colors is notable — this is a perceptually uniform color space, ensuring the slight blue-grey tint in the dark text is consistent across display gamuts. The accent color intentionally lives at maximum chroma in oklch space: vivid, electric, impossible to miss.

3. Typography Rules

Primary: Geist → Inter → system-ui → -apple-system → sans-serif Monospace: Geist Mono → JetBrains Mono → Fira Code → monospace

Negative letter-spacing on headings (−0.8px at h1, −0.7px at h2) is a deliberate choice to make large type feel tighter and more premium — a common pattern in modern dev-tool marketing. The body type at 15px with a 1.625 line-height is optimally comfortable for reading documentation or component descriptions.

4. Component Stylings

• Buttons: Transparent default with oklch accent on hover/active. Electric indigo shadow (rgba(38, 1, 253, 0.3) 0 1px 3px) on primary CTAs.
• Slider handle: rgb(38, 1, 253) fill — the accent color is used to brand interactive demo components.
• Code blocks: Geist Mono at 11px with 1:1 line-height — tight, dense, code-terminal aesthetic.
• Border radii: 4px (inputs, tags), 6px (buttons, cards), 18px (pills/chips), 0px 0px 6px 6px (bottom-only rounding on dropdown/panel bottoms).
• Shadows: Two-level system — oklch(0 0 0 / 0.08) 0 1px 3px (surface lift) + oklch(0 0 0 / 0.06) 0 4px 12px (card float).
• Tag/copy button: rgb(0, 17, 101) darker variant of accent — used for code tags, keeping the blue family cohesive.

5. Layout Principles

• Section vertical rhythm: margin-bottom: 96px per section — generous breathing room between demos.
• Header bottom margin: 24px — close to content it labels.
• Footer: padding: 80px 0 64px — structured, book-like bottom.
• Single breakpoint at 768px — clear mobile/desktop split, no intermediate tablet states.
• Stack: Astro v6 + Tailwind CSS — static-first with interactive islands for demos.

6. Depth & Elevation

Two-layer shadow system using oklch:

• Layer 1 (subtle lift): oklch(0 0 0 / 0.08) 0px 1px 3px — barely perceptible, used on card edges.
• Layer 2 (card float): oklch(0 0 0 / 0.06) 0px 4px 12px — soft diffuse shadow for floating panels.
• Accent glow: rgba(38, 1, 253, 0.3) 0 1px 3px — a colored shadow on primary action elements. This is the only colored shadow in the system and is used sparingly.

7. Do’s and Don’ts

Do:

• Use rgb(38, 1, 253) as the single accent — it’s the entire brand personality in one color.
• Apply negative letter-spacing (-0.7px to -0.8px) to headings at h1/h2 scale.
• Use Geist for UI text and Geist Mono for any code or technical strings.
• Keep section spacing generous (96px between sections).
• Use border-radius consistently: 6px for interactive components, 18px for pill elements.

Don’t:

• Dilute the accent with secondary accent colors.
• Use warm tones — the palette is cool-neutral throughout.
• Apply box-shadows without the oklch color system — use the defined shadow tokens.
• Reduce code block font below 11px.
• Add decorative text transforms or uppercase styles.

8. Responsive Behavior

Hard breakpoint at 768px. Below this:

• Demo components likely stack vertically.
• Side-by-side code/preview panels collapse.
• The ruler/slider UI adapts to touch targets.
• Type sizes appear to remain constant (no clamp detected) — the scale is already compact enough for mobile.

9. Agent Prompt Guide

Build a SmoothUI-style developer component site: near-white background (#fbfcfd), Geist typeface, electric indigo accent (rgb(38,1,253) / oklch(0.458 0.305 268.13)). Heading size scale from 40px (−0.8px tracking) down to 14px body. Use 6px border-radius for components, 18px for pills. Two-shadow system: 8% opacity lift + 6% opacity float. Single breakpoint at 768px. Code in Geist Mono at 11px. Everything else stays cool-neutral.

Generated by Sparkbites — extracted from live CSS analysis