style.md 5.5 KB
Visual Style
Aesthetic
Slick, professional, and dark. The overall tone is a premium developer tool — confident and minimal, not playful. Near-black background with light glassmorphism foreground elements. Glass surfaces are restrained: medium blur, medium opacity. The background includes an aurora-like shape with sharp gradient stops to make the glass effect stand out.
Reference feel: closer to a high-end terminal or a fintech dashboard than a consumer SaaS product. Every surface should feel intentional and precise.
Component Library
shadcn-svelte is the component library. Components are installed into $lib/components/controls/ via the shadcn-svelte CLI and customized in place. Do not wrap shadcn components in extra abstraction layers — edit them directly when customization is needed.
shadcn-svelte uses bits-ui for headless primitives and is fully compatible with Svelte 5 Runes.
Background
- Near-black base with a subtle aurora gradient layer.
- Subtle depth is achieved through both the background aurora and the glass layers.
Glass Surfaces
Glass is used for foreground elements only (sidebar, top bar, cards, modals). It should feel like matte frosted glass over black — not colorful, not warm.
| Surface | Background | Blur | Border |
|---|---|---|---|
| Sidebar / top bar | rgba(255,255,255,0.04) |
blur(12px) |
1px solid rgba(255,255,255,0.08) |
| Cards / panels | rgba(255,255,255,0.05) |
blur(8px) |
1px solid rgba(255,255,255,0.09) |
| Modals / popovers | rgba(255,255,255,0.07) |
blur(16px) |
1px solid rgba(255,255,255,0.12) |
| Input fields | rgba(255,255,255,0.05) |
none | 1px solid rgba(255,255,255,0.10) |
Keep colored tints subtle on glass surfaces. Accent color should remain focused on interactive elements.
Color Palette
| Role | Value | Usage |
|---|---|---|
| Background | oklch(0.145 0.008 326) |
Page background |
| Surface-1 | rgba(255,255,255,0.04) |
Sidebar, top bar |
| Surface-2 | rgba(255,255,255,0.05) |
Cards, panels |
| Surface-3 | rgba(255,255,255,0.07) |
Modals, dropdowns |
| Border | rgba(255,255,255,0.08–0.12) |
All surface edges |
| Text primary | rgba(255,255,255,0.92) |
Body text, headings |
| Text secondary | rgba(255,255,255,0.45) |
Labels, captions, placeholders |
| Text muted | rgba(255,255,255,0.25) |
Disabled states, timestamps |
| Accent | oklch(0.586 0.256 295.614) |
Primary actions, active nav, focus rings |
| Accent hover | oklch(0.496 0.265 301.924) |
Button hover, active states |
| Accent subtle | rgba(99,102,241,0.15) |
Selected row backgrounds, badge fills |
| Destructive | #ef4444 (red-500) |
Delete actions, error states |
Status Colors
Desaturated by default, full opacity only on active/hover. Never use raw saturated colors as backgrounds.
| State | Color | Badge fill |
|---|---|---|
| Running / merged | #22c55e (green-500) |
rgba(34,197,94,0.12) |
| Pending / open | #3b82f6 (blue-500) |
rgba(59,130,246,0.12) |
| Degraded / draft | #eab308 (yellow-500) |
rgba(234,179,8,0.12) |
| Stopped / error | #ef4444 (red-500) |
rgba(239,68,68,0.12) |
Typography
- Font: Inter Variable for UI text, monospace for code/YAML blocks
- Custom font loading is enabled for Inter Variable
- Headings:
rgba(255,255,255,0.92), medium weight (500) - Body:
rgba(255,255,255,0.80), regular weight - Line height: 1.5 for body, 1.2 for headings
Elevation & Depth
Three levels, achieved through glass opacity and border strength alone — no shadows or glows:
- Base — sidebar, top bar (
Surface-1, faintest border) - Raised — cards, form panels (
Surface-2, slightly stronger border) - Floating — modals, popovers, dropdowns (
Surface-3, strongest border, higher blur)
Avoid box shadows. If separation is needed, increase border opacity by one step rather than adding a shadow.
Interactive States
- Default: muted text, transparent background
- Hover: text brightens to primary (
0.92), surface tintrgba(255,255,255,0.04)added - Active / selected: accent subtle background (
rgba(99,102,241,0.15)), accent text color - Focus:
2px solid #6366f1outline with2pxoffset — no soft glow rings - Disabled: text at
0.25opacity, no pointer events
Icons
Lucide via lucide-svelte. Size 16px inline, 20px for standalone actions. Color rgba(255,255,255,0.45) at rest, rgba(255,255,255,0.92) on hover/active. Stroke width 1.5px.
Motion
Minimal. Transitions only where they carry meaning:
- Sidebar collapse/expand:
width 200ms ease - Dropdown / popover open:
opacity 120ms ease, transform 120ms ease(subtle upward fade-in) - Toasts / notifications:
transform 200ms easeslide in from edge
No looping animations, no decorative transitions on hover. Loading states use a simple opacity pulse, not a spinner, for inline elements; a spinner only for full-panel blocking loads.