Use the "Linear Precision" design system. A dark, dense developer-tool system in the spirit of Linear. Quiet near-black surfaces, grotesk typography, snappy 200ms motion, compact spacing and a subtle grid background — engineered restraint for productivity software.

Use a deep ocean blue color palette with a dark navy background (#0F172A). Primary actions in strong blue (#1E40AF), interactive elements in medium blue (#3B82F6), and highlights in cyan/teal (#06B6D4). Cards use dark slate (#1E293B) with subtle borders (#334155). Text is near-white (#F8FAFC) for primary and muted gray (#94A3B8) for secondary. This palette conveys professionalism, trust, and depth.

Use a cutting-edge startup typography system targeting B2B SaaS. Headings use Bricolage Grotesque at 800 weight, bringing slight quirky character to huge display titles. Body text uses the highly structured DM Sans at 400 weight for dense UI and data grids. Apply tight letter spacing to all headers to maintain that modern VC-backed aesthetic. It conveys growth, iteration, and scale.

Implement a neon glow shadow system for dark-themed UIs. Use three shadow layers to simulate realistic neon light: a tight core glow (0 0 10px rgba(0,255,224,0.2)), a medium diffuse ring (0 0 30px rgba(0,255,224,0.08)), and a wide atmospheric halo (0 0 60px rgba(0,255,224,0.03)). Pair with a luminous border (rgba(0,255,224,0.2)). On hover, all three layers intensify: core to (0 0 15px, 0.5 opacity), ring to (0 0 40px, 0.2), halo to (0 0 80px, 0.08), with the border vivid at 0.5 opacity. Scale to 1.02 on hover over 400ms ease. The three-layer structure is critical — it creates a realistic light falloff curve that a single shadow cannot achieve. Perfect for gaming UIs, AI dashboards, and music platforms.

Use the Mixed Modern radius system — the balanced SaaS standard. Border radii: 4px for buttons and small inputs, 8px for cards and dropdowns, 12px for modals and large containers, 9999px for badges and avatars only. This system creates hierarchy through corner treatment — larger elements get more rounding, small elements stay crisp. Sections and page-level containers use 0px.

Use a moonrise gradient flowing from vivid purple (#7C3AED) through deep indigo (#4338CA) to midnight navy (#1E1B4B) at a 160-degree angle. Apply to full-page hero backgrounds, navigation bars, and section transitions. This gradient works best as a full-bleed background, replacing a solid dark background. For overlay text, use white (#FFFFFF) or light purple (#C4B5FD). For cards on this gradient background, use rgba(255,255,255,0.05) surface color. This gradient conveys mystery, premium quality, and nocturnal elegance.

Use the Compact Dense spacing system for data-heavy interfaces. Base unit: 4px. Spacing scale: xs=2px, sm=4px, md=8px, lg=12px, xl=16px, 2xl=24px. Inner padding: 8px for small components, 12px for cards, 16px for sections. Gap between elements: 4-8px. This system prioritizes information density — avoid excessive whitespace. Line-height: 1.4 for body text. Section margins: 24px max. Never exceed 32px spacing for any element.

Use the Snappy Responsive easing system for performance-focused interfaces. Primary curve: cubic-bezier(0.2, 0, 0, 1) at 200ms — extremely fast with an aggressive deceleration that makes UI feel instant. Use 100ms for hover states, 200ms for toggles and tabs, 300ms for panels. This system prioritizes responsiveness — every interaction should feel like zero latency. Apply to tab switches, accordion toggles, filter animations, and real-time data updates.

Create a Linear-style sweep button for dark mode. The button body is solid black (#0F172A) with bright white text (#F8FAFC). It must feature an animated rotating conic gradient border (using a pseudo-element mask or conic-gradient on a slightly larger absolute background with a spinner animation). The sweep color should be an Indigo (#1E40AF) or Purple hue. The button casts a soft underlying glow (0 0 20px #1E40AF26).

Use a premium, dark-theme bento card component matching the Linear aesthetic. The card container uses #1E293B background with a highly subtle 1px border (#F8FAFC0D) and 16px radius. Inside, place a top-left 40x40px logo badge (bg: white 3%, border: white 8%, radius: 8px). Anchor the text block strictly to the bottom-left: a bold white title, a muted description (white 50%), and a 'Read story ->' link. On hover, the outer card border gracefully brightens to white 15%, and the link arrow translates slightly right.

Build a Linear-style dark precision navigation bar.

Key design decisions:
1. Background: #0F172AF2 — near-black with slight transparency. Not pure black, which feels dead. The 0F in the blue channel adds imperceptible warmth.
2. Border: 1px solid #F8FAFC0F at the bottom. Almost invisible, but structurally essential — it separates nav from content without adding visual weight.
3. Links: #F8FAFC73 default. Muted enough to recede, bright enough to read. Hover to #F8FAFCE6 — never pure white on hover, keep 10% transparency for softness.
4. Active indicator: A 2px bottom border in #1E40AF (violet) on the active link. The only color in the entire navbar. This restraint makes the accent powerful.
5. Typography: 13px, font-weight 500, -0.01em tracking. Slightly smaller than you'd expect — precision demands economy.
6. Logo: A small diamond icon (◇) + brand name in pure white. The icon is 16x16, rotated 45deg square with 1px border.
7. CTA: Violet (#1E40AF) pill button, white text. Small, decisive.

Trust is built through restraint. Nothing in this navbar is there by accident.

Build a Linear-style dark narrative hero section.

Design philosophy — emergence from the void:
1. Background: #0F172A — not pure black (feels dead), with a very faint radial gradient glow in the center: radial-gradient(ellipse at 50% 50%, #1E40AF14 0%, transparent 70%). The glow is barely visible but creates an unmistakable sense of depth.
2. Headline: Two lines. The first line is #F8FAFC80 — dim, like it's still emerging. The second line is pure white — it has arrived. This gradient-across-lines technique creates a reading direction and a sense of revelation. Font: 56-72px, -0.04em tracking, 700 weight.
3. Subtitle: #F8FAFC73, 18px, max-width 480px, 400 weight, line-height 1.7. Deliberately muted — the headline carries the weight.
4. CTA group: Primary button in #1E40AF (violet), rounded-full, 15px text. Secondary: #F8FAFC80 text link with right arrow. No border on secondary.
5. Spacing: min-height 90vh. Content centered both ways. More vertical padding than horizontal — the emptiness above and below is part of the drama.
6. Optional: A very subtle noise texture overlay (opacity 0.02) on the background for tactile depth.

The hero should feel like opening a movie, not a website.

Implement a 'Linear-style' extremely subtle background grid. Create a 32x32px repeating SVG pattern using pure CSS set to a faint #ffffff opacity 0.04 against an ultra-dark background (#0F172A). Crucially, overlay a radial-gradient mask from the top center that softly fades the grid out towards the edges.

Build a Linear-style smooth checkbox micro-interaction.

Design philosophy — quiet confirmation:
1. Box: 18×18px rounded-md (4px radius). Unchecked: transparent bg, 1.5px border #334155. The border is intentionally dim — it exists without demanding attention.
2. Checked state: Background fills to #1E40AF with a 200ms scale animation (0.8→1.05→1.0, cubic-bezier(0.34, 1.56, 0.64, 1)). The border matches the fill color.
3. Checkmark: SVG polyline stroke, white (#FFFFFF), stroke-width 2, stroke-linecap round. Animated via stroke-dasharray/stroke-dashoffset — total path length ~24px, dashoffset transitions from 24→0 over 250ms ease-out with a 100ms delay (waits for the fill to establish itself).
4. The checkmark path: "M4 12 L9 17 L20 6" — two segments, the downstroke is shorter than the upstroke.
5. Label: 14px text-[#F8FAFC], transitions to line-through with opacity 0.5 on check. The strikethrough should feel like crossing off a real list.
6. Uncheck animation: Reverse — checkmark retracts (dashoffset 0→24, 150ms), then box scales (1.0→0.95→1.0, 150ms) and fill fades out (200ms).

The result should make completing tasks feel satisfying without being distracting.