DOSS

Overview

DOSS is an Adaptive ERP and Operations Cloud platform designed for enterprises that demand precision, scalability, and real-world operational intelligence. The brand serves operations leaders, supply chain professionals, and resource planners who have outgrown traditional ERP systems and spreadsheet workflows. The design system embodies 'Technical Minimalism'—a disciplined aesthetic that pairs a sophisticated dark charcoal canvas (#161616) with a vivid electric blue accent (#0d3dfc) to create visual clarity and signal actionability without ornamentation. The UI evokes a sense of control, efficiency, and forward momentum: every interaction feels intentional, every data point is legible, and every CTA commands attention through color contrast rather than visual noise.

The brand voice is direct, pragmatic, and grounded in operational reality. DOSS speaks to practitioners, not theorists—the language is concrete, the examples are specific, and the tone avoids breathless marketing speak. Vocabulary patterns emphasize capability ('unleash', 'adapt', 'unify', 'automate', 'analyze', 'store'), operational outcomes ('real-world operations', 'global value chain', 'adaptive resource platform'), and technical precision. Example sentence in brand voice: 'Adapt your resource allocation in real time, connect disparate systems into a single source of truth, and automate the workflows that drain your team's capacity.'

Colors

The DOSS color system is built on a dark-first philosophy optimized for data-dense interfaces and extended screen time. The primary surface is a deep charcoal (#161616), which serves as the canvas for all content and reduces eye strain in operational dashboards. The surface stack progresses from #0a0a0a (surface-container-lowest, used for recessed elements and secondary backgrounds) through #2d2d2d (surface-container-highest, reserved for elevated modals and focus states), providing a full range of depth without introducing color. Primary (#0d3dfc) is the brand's signature electric blue—a vivid, high-contrast accent used exclusively on call-to-action buttons ('Book a demo'), active navigation states, focus rings (applied as 3px box-shadow: 0 0 0 3px rgba(13, 61, 252, 0.1)), and interactive

Typography

The DOSS typography system uses PPNeueMontreal as the primary typeface, a geometric sans-serif that conveys technical precision and modern efficiency. The system defines eight levels: display (60px, 700 weight, -0.04em tracking) for hero headlines like 'DOSS Operations Cloud is the ERP evolved'; headline-lg (40px, 600 weight, -0.02em tracking) for section titles; headline-md (28px, 600 weight, -0.01em tracking) for subsection headers; title-lg (20px, 600 weight) for card titles and modal headers; body-lg (18px, 400 weight) for introductory paragraphs and descriptive copy; body-md (16px, 400 weight) for standard body text and form labels; label-md (14px, 600 weight, 0.01em tracking) for button text, badges, and UI labels; and label-sm (12px, 500 weight, 0.02em tracking) for helper text, tim

Layout

DOSS uses a 12-column grid system with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full-width data dashboards). The spacing scale is semantic and hierarchical: unit (8px) is the baseline; xs (4px) is reserved for micro-spacing within components (e.g., icon-to-label gaps); sm (12px) separates related elements within a card; md (24px) is the primary gutter between sections and the standard padding for cards and containers; lg (40px) separates major content blocks and defines vertical rhythm between hero and body sections; xl (64px) is used for page-level spacing and section breaks. White space is treated as a first-class design element: the dark background (#161616) is never fully saturated with content. Cards and containers use md

Elevation & Depth

Depth in DOSS is conveyed through a restrained shadow system and strategic use of the surface container stack, avoiding the visual noise of multiple shadow layers. The elevation scale defines four levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of inline elements like badges or small cards; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and form inputs, creating a clear visual lift from the base surface; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and elevated panels that demand focus; and xl (0 32px 68px rgba(0, 0, 0, 0.3)) for full-screen overlays and

Shapes

DOSS employs a 'Functional Geometry' shape philosophy: rounded corners are used sparingly and purposefully to signal interactivity and reduce visual harshness without introducing organic or playful aesthetics. The rounded scale defines six levels: sm (0.25rem / 4px) for minimal rounding on form inputs and small UI elements, creating a subtle softness; DEFAULT (0.5rem / 8px) for standard form controls and inline components; md (0.75rem / 12px) for cards and container backgrounds, balancing softness with technical precision; lg (1rem / 16px) for larger cards, modals, and elevated surfaces; xl (1

Components

Action Elements Buttons are the primary interaction mechanism in DOSS and are designed for high visibility and clear affordance. The button-primary component uses the brand's signature electric blue (#0d3dfc) background with full (9999px) border-radius, 12px vertical and 28px horizontal padding, and a 44px minimum height. Text is set to label-md (14px, 600 weight) in on-primary (#f9f9f9) to ensure legibility. On hover, button-primary transitions to inverse-primary (#0b34d6) with a 200ms ease-in-out transition, creating a subtle darkening that signals interactivity without jarring color shifts. Button-secondary uses the secondary color (#e6e3e0) for lower-priority actions like 'Sign in' or secondary CTAs; on hover, it transitions to secondary-container (#ccc6bf). Button-ghost provides a

Do's and Don'ts

**Do**

• Do use primary (#0d3dfc) exclusively for high-priority CTAs and interactive states—it is the brand's signature accent and must remain visually distinct.
• Do apply md (24px) padding and spacing consistently across cards, containers, and sections to maintain visual rhythm and breathing room.
• Do use the full rounded scale (9999px for buttons, md for cards, DEFAULT for inputs) to signal component type and interactivity without introducing organic or playful aesthetics.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-in-out timing to provide smooth, predictable feedback.
• Do maintain a minimum contrast ratio of 4.5:1 for all text on background colors, using on-surface (#f9f9f9) on dark backgrounds and on-secondary (#161616) on light backgrounds.
• Do use the surface container stack (surface-container, surface-container-high, surface-container-highest) to convey depth and hierarchy without introducing new colors.

**Don't**

• Don't use primary (#0d3dfc) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive components and focus states.
• Don't apply shadows deeper than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to standard cards; use the surface container stack instead to maintain visual cohesion.
• Don't introduce new colors outside the defined palette (primary, secondary, tertiary, error, outline, surface stack)—consistency is critical for operational clarity.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—arbitrary rounding breaks the technical aesthetic and reduces visual coherence.
• Don't apply text-shadow or text-outline effects except on small labels over busy backgrounds (data tables, grid overlays) where contrast is critical.
• Don't animate transitions faster than 150ms or slower than 300ms; use 200ms as the default for interactive state changes to feel responsive without appearing jarring.