Drakkar

Overview

Drakkar is a digital transformation consultancy that translates complex business constraints into elegant, purposeful software solutions. The design system embodies a "Technical Minimalism" aesthetic—high-contrast dark surfaces punctuated by bold accent colors (vivid red-orange and electric blue) that command attention without distraction. The brand personality is direct, confident, and grounded: Drakkar speaks to C-suite decision-makers and technical teams with equal clarity, avoiding jargon while maintaining precision. The UI conveys mastery through restraint: deep blacks (#1d1d1d), crisp whites, and strategic pops of #ff4a48 (primary red) and #3f84c3 (secondary blue) create visual hierarchy that guides users through complex enterprise workflows. Voice example: "Your ERP doesn't work for you—it should. Let's rebuild it."

Colors

The color palette is rooted in high-contrast, enterprise-grade minimalism. Primary (#ff4a48, a vivid red-orange) is reserved exclusively for call-to-action buttons, critical alerts, and interactive focus states—it appears sparingly but unmistakably, commanding user attention. Secondary (#3f84c3, a professional blue) supports data visualization, secondary actions, and informational elements. The surface stack is anchored in near-black (#1d1d1d for surface, #0a0a0a for surface-dim) to reduce eye strain during extended use and to convey technical sophistication. On-surface text is pure white (#ffffff) for maximum contrast and readability; on-surface-variant (#c5c5c5) provides a softer alternative for secondary text and disabled states. The outline color (#747474) is used for borders and divid

Typography

The type system pairs Raleway (display and headline scales) with Urbanist (body and label scales), creating a clear visual distinction between structural hierarchy and content. Raleway's geometric precision conveys technical authority; Urbanist's humanist warmth makes dense information approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; headline-lg (40px, 600 weight) introduces key sections; headline-md (28px, 600 weight) breaks up content blocks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 weight, 24px line-height) serves as the default for form labels and card content. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and small

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing flexibility for both desktop and tablet layouts while maintaining visual control. The gutter is fixed at 24px, creating consistent breathing room between columns and sections. Spacing follows a semantic scale: xs (4px) for micro-interactions and icon spacing, sm (12px) for compact component padding, md (24px) for standard section margins and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The container-max-width of 1280px ensures that content never stretches beyond comfortable reading width on ultra-wide displays. White-space is used aggressively to separate concerns: a minimum of lg spacing (40px) separates major sections (hero, features, testimonials), while

Elevation & Depth

Depth is achieved through a restrained shadow system and strategic use of surface-container layers rather than dramatic drop shadows. Level 1 (Base): the primary surface (#1d1d1d) with no shadow, establishing the foundation. Level 2 (Standard Card/Container): surface-container (#1d1d1d) with a 1px border at outline-variant (#54687d) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background. Level 3 (Elevated Modal/Overlay): surface-container-high (#282828) with a 1px border at outline (#747474) and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), signaling modal

Shapes

The shape philosophy is "Purposeful Geometry"—rounded corners are used strategically to signal function rather than applied uniformly. Buttons use full (9999px) border-radius to create pill-shaped affordances that are unmistakably clickable; this high curvature communicates action and reduces perceived friction. Input fields also use full radius (9999px) to align with button affordances and create a cohesive interaction language. Cards and containers use lg (1rem / 16px) radius, providing subtle softness without sacrificing the technical aesthetic. Smaller UI elements (badges, list items) use

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Button-primary uses the full primary color (#ff4a48) with white text, 44px height, 8px vertical / 24px horizontal padding, and full (9999px) border-radius. On hover, transition to primary-fixed-dim (#ff4a48) with a 200ms ease-in-out transition and apply box-shadow: 0 4px 12px rgba(255, 74, 72, 0.2) to lift the element. Button-secondary uses a transparent background with a 1px border at outline-variant (#54687d), white text, and the same 44px height and full radius; on hover, apply surface-container-high (#282828) background and transition text to primary (#ff4a48) over 200ms. Button-ghost is reserved for tertiary actions and uses transparent background with primary text; on hover, apply

Do's and Don'ts

**Do**

• Do use primary (#ff4a48) exclusively for high-priority CTAs, focus states, and critical alerts—never for decorative elements or secondary content.
• Do maintain a minimum of lg spacing (40px) between major sections to create visual breathing room and reduce cognitive load in enterprise interfaces.
• Do apply full (9999px) border-radius to all buttons and input fields to create an unmistakable interaction language and signal affordance.
• Do use Raleway for all display and headline text to convey technical authority; reserve Urbanist for body and label copy to maintain approachability.
• Do include a 3px focus ring at rgba(255, 74, 72, 0.1) on all interactive elements for keyboard accessibility and visual feedback.
• Do transition all state changes (hover, focus, active) over 150–200ms using ease-in-out timing to provide smooth, professional feedback.

**Don't**

• Don't use primary (#ff4a48) for body text, backgrounds, or decorative elements—it must remain reserved for interaction and hierarchy.
• Don't apply border-radius less than DEFAULT (0.5rem) to buttons or inputs; this reduces their affordance and confuses users about interactivity.
• Don't mix Raleway and Urbanist at the same scale; maintain clear visual separation between structural hierarchy (Raleway) and content (Urbanist).
• Don't use shadows larger than 0 8px 24px rgba(0, 0, 0, 0.25)—excessive depth contradicts the minimalist aesthetic and reduces visual clarity.
• Don't apply color transitions longer than 200ms; slower transitions feel sluggish and reduce perceived responsiveness in enterprise workflows.
• Don't use secondary (#3f84c3) or tertiary (#35e28f) as primary action colors—these are reserved for data visualization, secondary actions, and status indicators.