Driftline

Overview

Driftline is a product feedback intelligence platform that transforms scattered customer insights into actionable product roadmaps. The design system embodies a philosophy of "Refined Minimalism"—a marriage of sophisticated serif typography with clean, purposeful sans-serif UI elements. The aesthetic is deliberately understated and professional, avoiding visual noise while maintaining visual hierarchy through careful use of weight, scale, and a restrained accent color (deep purple #5c33ff). The brand personality is confident, data-driven, and human-centered: the interface speaks in clear, declarative language that respects the user's intelligence. The emotional response is one of clarity and control—users feel they have mastered their feedback chaos. Voice example: "Your roadmap stops being a guessing game."

Colors

The color system is anchored in a warm, off-white surface palette (#fafaf7 as primary surface, #ffffff for elevated cards) paired with a near-black text color (#0e0f0c) that provides 14.5:1 contrast for accessibility. The primary accent is a deep purple (#5c33ff, secondary #5b6ee8) used sparingly on CTAs, badges, and interactive states—this color signals actionability and brand presence without overwhelming the interface. A muted sage tertiary (#69715c) provides a secondary accent for status indicators and supporting elements. The surface stack progresses from #fafaf7 (base) through #e6e5dd (container) to #26271f (highest container), creating subtle depth without relying on shadows. Error states use a warm red (#ff6b6b) for feedback and warnings. All interactive elements transition via cub

Typography

The type system pairs a serif headline family (Newsreader, Georgia fallback) with a humanist sans-serif body family (Inter, system-ui fallback). Display and headline levels use the serif at weights 400–600, creating an editorial, trustworthy tone that differentiates product messaging from utilitarian UI. Body and label text use Inter at 400–600 weight, with letter-spacing ranging from 0em (body) to 0.02em (labels) to maintain readability at small sizes. The display level (84px, 400 weight, -0.02em tracking, 92px line-height) anchors hero sections with authority; headline-lg (48px, 400 weight) introduces major sections; body-md (16px, 400 weight, 24px line-height) serves as the default reading size. On small labels over busy table backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid container that scales responsively. The primary gutter is 24px, applied consistently to section padding and component spacing. Hero sections use lg spacing (40px) for vertical rhythm between headline, subheading, and CTA group. Cards and containers use md spacing (24px) for internal padding, creating breathing room around content. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used hierarchically: xs for icon-to-text gaps, sm for list item padding, md for card padding and section margins, lg for major section separation. Container max-widths range from 800–900px for narrow reading experiences (hero copy, testimonials) to 1280px for data-dense tables and product interfaces. White-space i

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): surface at #fafaf7 with no shadow. Level 2 (Standard Card): background #ffffff with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), border: 1px solid #e6e5dd. Level 3 (Elevated/Hover): same background with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating a subtle lift. Input fields and interactive elements use a 3px focus ring with rgba(92, 51, 255, 0.1) (10% opacity of the secondary accent) to signal focus state without jarring the user. Shadows are soft and sp

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied with intention to soften the industrial nature of data tables and forms while maintaining a sense of precision. Buttons use 10px border-radius (md), creating a friendly but professional appearance. Cards use 14px (lg), slightly more generous to signal containment and importance. Input fields use 8px (DEFAULT), balancing approachability with clarity. The pill component (badges, status indicators) uses 999px (full) to create a capsule effect that draws attention to metadata. Table cells and list items use 0px (no rounding) to m

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses #0e0f0c background with #ffffff text, 11px vertical / 18px horizontal padding, 44px height, and 10px border-radius. On hover, the background shifts to #26271f (primary-container) with a 150ms transition. The secondary button (button-secondary) uses a transparent background with a 1px border (#c4c3b8) and #0e0f0c text; on hover, it fills with #e6e5dd (surface-container-low). The ghost button (button-ghost) has no border or background fill, relying on text color (#0e0f0c) for visibility; hover state applies #f2f2ec background. All buttons use Inter, 14px, 500 weight, 20px line-height (label-md).

Containers & Surfaces Cards (card) are the primary container component: #ffffff backgrou

Do's and Don'ts

**Do**

• Do use the serif (Newsreader) for headlines and display text to establish editorial authority and brand differentiation.
• Do apply the secondary accent (#5c33ff) exclusively to CTAs, focus states, and high-priority interactive elements—never use it for decorative or background purposes.
• Do maintain the 24px gutter consistently across all sections and components to create visual rhythm and predictability.
• Do use the full shadow stack (md: 0 3px 8px, lg: 0 8px 24px) to create depth hierarchy; never use harsh or small-blur shadows.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for responsive, snappy feedback.

**Don't**

• Don't mix serif and sans-serif at the same hierarchy level—reserve serif for headlines, sans-serif for body and UI.
• Don't use the secondary accent (#5c33ff) on backgrounds or large surface areas; it should appear as a focal point, not a canvas.
• Don't apply border-radius > 14px to buttons or inputs; the soft-technical aesthetic requires restraint in rounding.
• Don't use shadows with blur < 8px or spread < 0px; they appear harsh and break the refined, diffused light aesthetic.
• Don't exceed 2 accent colors in a single interface; the system is built on restraint and clarity, not visual complexity.