Ghost

Overview

Ghost is a data-driven distribution platform engineered for premium retail brands seeking precision-driven market expansion. The design system embodies 'Minimalist Precision'—a philosophy that strips away visual noise to expose only the most critical information, allowing data and actionable insights to dominate the interface. The brand serves enterprise-scale retailers and luxury goods companies, evoking a sense of controlled power and technical mastery through a dark canvas (#0d0d0d) punctuated by a bold violet accent (#564ef5) that signals interactivity and brand authority. The emotional response is one of confidence: users feel they are operating a sophisticated, no-nonsense tool built for serious commerce.

The voice is direct, data-forward, and unapologetically technical. Ghost avoids marketing hyperbole; instead, it speaks in metrics and outcomes. Vocabulary patterns favor concrete nouns ("revenue", "conversion", "inventory") over abstract adjectives. The brand personality is that of a trusted operations partner—competent, reliable, and always focused on the bottom line. Example sentence in Ghost's voice: "Your Q4 inventory is tracking 12% above forecast; adjust fulfillment capacity by Thursday to capture margin."

Colors

Ghost's color system is built on a dark-first philosophy designed to reduce cognitive load during long analytical sessions. The primary surface (#0d0d0d) is a true black that minimizes eye strain when paired with high-contrast text (#ffffff). The primary accent color is a saturated violet (#564ef5), used exclusively for call-to-action buttons, active states, and brand-critical interactive elements—this is the color users learn to click. A secondary accent, cyan (#0099ff), provides a complementary highlight for secondary actions and data visualization accents, creating visual rhythm without competing for attention. The tertiary palette (#eef1f3) serves as a neutral container for informational badges and non-critical UI surfaces. All surfaces follow a strict container stack: surface-containe

Typography

The type system pairs TWK Lausanne (a geometric, high-contrast typeface) for headlines and display text with Inter (a humanist sans-serif) for body and label copy. This pairing creates a visual hierarchy that is both authoritative and approachable: Lausanne's tight letterSpacing (-0.04em on display, -0.02em on headlines) conveys precision and density, while Inter's open tracking (0em to 0.05em) ensures readability in smaller sizes. Display (128px, weight 500, lineHeight 136px) is reserved for hero statements and page titles; headline-lg (56px, weight 600) for section headers; headline-md (40px, weight 600) for subsection titles; body-lg (18px, weight 400, lineHeight 28px) for long-form content and explanatory text; body-md (16px, weight 400) for standard paragraph copy; label-md (14px, wei

Layout

Ghost uses a 12-column fluid grid with a maximum container width of 1440px, allowing the interface to scale gracefully from tablet to ultra-wide displays without losing visual hierarchy. The spacing scale is semantic: gutter (24px) is used for horizontal padding on the main container; lg spacing (40px) separates major sections and creates breathing room between card groups; md spacing (24px) is the default margin between components within a section; sm spacing (12px) is used for internal component padding and tight groupings. The white-space philosophy is 'aggressive minimalism'—every pixel of negative space is intentional and serves to isolate information clusters. Sections are separated by lg spacing (40px) to create distinct visual zones; within a section, cards are separated by md spac

Elevation & Depth

Depth in Ghost is conveyed through a restrained shadow system and strategic use of surface containers rather than aggressive drop shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on hover states and minor UI elements; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and modals; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for elevated popovers and critical modals. A specialized glass elevation (rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px) is applied to overlay surfaces to cre

Shapes

Ghost employs a 'Geometric Precision' shape philosophy: border-radius values are chosen to balance approachability with technical authority. Buttons use full radius (9999px) to create pill-shaped CTAs that feel modern and clickable; cards and containers use lg radius (1rem / 16px) to provide subtle rounding that softens the interface without appearing playful; input fields use DEFAULT radius (0.5rem / 8px) for a more structured, form-like appearance; badges and small UI elements use full radius (9999px) to create visual distinction. The rationale: full-radius buttons stand out as interactive h

Components

Action Elements Buttons are the primary interaction mechanism in Ghost. Primary buttons use {colors.primary} (#564ef5) with {colors.on-primary} (white) text, rounded to full (9999px), with padding 10px 20px and height 40px. On hover, transition the backgroundColor to {colors.primary-container} (#6c5cff) over 200ms using cubic-bezier(0.2, 0, 0, 1) for a snappy, responsive feel. On active/press, darken to #4a3fd9. Secondary buttons are transparent with a 1px border in {colors.outline} (#8e8e93) and text in {colors.secondary} (#0099ff); on hover, apply a 8% opacity background of the secondary color (rgba(0, 153, 255, 0.08)) over 200ms ease-out. Never apply box-shadow to buttons; let color and shape do the work.

Containers & Surfaces Cards are the primary container for grouped informa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#564ef5) exclusively for primary CTAs, focus states, and brand-critical interactions—it is the visual anchor that trains users where to click.
• Do maintain at least lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load during data-heavy sessions.
• Do apply full radius (9999px) to all button elements to create instantly recognizable interactive hotspots that contrast with the geometric precision of cards.
• Do use the surface-container stack (lowest → low → standard → high → highest) to create depth through color shifts rather than aggressive shadows.
• Do pair TWK Lausanne headlines with Inter body copy to create a clear visual hierarchy that signals importance without requiring size changes alone.

**Don't**

• Don't use {colors.secondary} (#0099ff) or any accent color on primary CTAs—primary is reserved for {colors.primary} (#564ef5) only, or the visual hierarchy collapses.
• Don't apply box-shadow to buttons; use color transitions and border-radius to signal interactivity instead, keeping the interface clean and focused.
• Don't use sharp corners (0px border-radius) on any interactive element; minimum DEFAULT radius (8px) maintains visual cohesion with the brand's geometric precision aesthetic.
• Don't reduce spacing below sm (12px) between components within a section, or the interface will feel cramped and reduce scannability of critical data.
• Don't mix typefaces within a single headline or body paragraph; use TWK Lausanne for all display/headline text and Inter for all body/label text to maintain typographic clarity.