Derive wordmark

Design System
Reference & Patterns

A comprehensive guide to building interfaces with Linear's precision and Resend's elegance. Every pattern, principle, and best practice in one place.

Core Philosophy

Premium Minimalism, Redefined

Where every pixel serves a purpose and beauty emerges from restraint

Our design system embodies premium minimalism — where every pixel serves a purpose and beauty emerges from restraint. We draw inspiration from Linear's systematic precision and Resend's refined elegance.

Core Principles

  • • Invisible Excellence: The best design doesn't shout—it whispers with confidence
  • • Purposeful Motion: Animations guide and delight without overwhelming
  • • Systematic Spacing: Consistent rhythm creates visual harmony
  • • Light as Material: Subtle glows and gradients add depth and life

Visual Language

  • • Typography: Light weights, tight tracking, generous white space
  • • Color: Monochromatic base with strategic accent moments
  • • Depth: Layered shadows and glass effects create hierarchy
  • • Interaction: Micro-feedback on every touchpoint

Every component should feel like it belongs in a $100/month SaaS product. Clean without being cold, sophisticated without being complicated, and delightful without being distracting.

Class & Styling Best Practices

CSS Variables & Tailwind

✅ Use CSS Variables

text-foreground/60, bg-background, border-border

✅ Use Semantic Colors

text-muted-foreground, bg-card, border-input

❌ Avoid Hard-coded Colors

text-gray-600, bg-white, border-zinc-200

shadcn/ui Patterns

Component Variants

variant="ghost" size="sm" instead of custom classes

Composition with cn()

className={cn("base-classes", conditional && "extra", className)}

Responsive Modifiers

text-sm md:text-base lg:text-lg

Golden Rules

  • 1. Always use design tokens — Colors, spacing, and radii from CSS variables
  • 2. Prefer semantic over literal — "destructive" not "red", "muted" not "gray"
  • 3. Compose, don't override — Extend base components rather than fighting them
  • 4. Respect the cascade — Let Tailwind's utility order handle specificity
Border Radius
rounded-sm → var(--radius - 4px)
rounded-md → var(--radius - 2px)
rounded-lg → var(--radius)
Opacity Scale
/90 → Primary text
/60 → Secondary text
/40 → Tertiary/disabled
Spacing Rhythm
p-4 gap-4 → Base unit
p-6 gap-6 → Comfortable
p-8 gap-8 → Spacious
Ready to Build?

Start Using the Design System

Explore the complete component library and build exceptional interfaces with Derive's design system.