Dayos

Overview

Dayos is an enterprise AI automation platform that replaces legacy business process teams by deploying intelligent agents directly into Oracle, Workday, and SAP systems. The design system embraces Architectural Minimalism—a philosophy that prioritizes structural clarity, geometric precision, and purposeful restraint. The aesthetic is deliberately austere: a pure white canvas with jet-black typography creates an environment of absolute focus, while vibrant accent colors (neon green #00fd74, hot pink #ff7ef2, and bright orange #ff6838) punctuate key interactions and data insights. This contrast evokes a sense of cutting-edge innovation tempered by enterprise reliability—the visual equivalent of a high-precision instrument.

The brand voice is direct, confident, and unadorned. Dayos speaks in declarative statements without marketing flourish: "We don't sell managed services to the enterprise. We provide the AI that does the work." The vocabulary is technical yet accessible, favoring active verbs and concrete outcomes over abstract benefits. Tone is never breathless or hyperbolic; instead, it conveys earned authority through specificity. Example: "Production-ready in 2 weeks. A new agent every year, lowering your support cost the longer you run Hero."

Colors

The color system operates on a principle of maximum contrast and intentional hierarchy. Primary (#000000) is pure black, deployed on all interactive elements, navigation, and body text—it commands attention through absolute darkness against the white surface. Secondary (#00fd74, neon green) and Tertiary (#ff7ef2, hot pink) are high-saturation accent colors reserved for status indicators, success states, and brand-distinctive highlights. The error color (#ff6838, vibrant orange) maintains visual consistency with the accent palette while signaling caution or warnings.

Surface colors range from pure white (#ffffff) to light grays (#f3f3f3, #e5e5e5, #dbdbdb), creating subtle depth without sacrificing legibility. The outline color (#979797, mid-gray) is used for borders and dividers at 1px wei

Typography

The type system is built on two custom typefaces: SuisseIntlCond (condensed, for headlines) and SuisseIntl (regular, for body and UI). SuisseIntlCond is deployed at display (130px, 700 weight, -0.03em letter-spacing) and headline scales (80px–64px) to create dramatic visual hierarchy with minimal vertical space. The condensed width compresses letterforms horizontally, reinforcing the brand's architectural precision. SuisseIntl serves body copy at 18px (body-lg) and 16px (body-md) with 400 weight and 0em letter-spacing, ensuring maximum legibility at smaller sizes. All headlines use uppercase text-transform and line-height ratios between 0.9–1.0, creating tight, confident compositions. Labels (14px, 600 weight) are used on buttons and badges with 0.01em letter-spacing for subtle emphasis. O

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1280px, centered on desktop and fluid on mobile (full-width with 24px gutter padding). Section spacing follows a semantic scale: lg (40px) separates major content blocks, md (24px) divides subsections, and sm (12px) creates breathing room between related elements. The hero section occupies 100vh with asymmetric composition—left-aligned text (60% width) paired with right-aligned 3D illustration (40% width). Body text is set to 18px line-height 28px (1.56 ratio) for comfortable reading. Margins between sections are 96px on desktop, 32px on mobile, creating a rhythm that feels both spacious and intentional. The design avoids centered layouts; instead, it favors left-aligned text and right-aligned imagery, reinforcing

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color gradients or transparency effects. The elevation system defines three levels: Level 1 (Base, no shadow) for primary surfaces; Level 2 (Standard cards, 0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements and lifted content; Level 3 (Modals and popovers, 0 8px 24px rgba(0, 0, 0, 0.12)) for the highest-priority overlays. Shadows use pure black with low opacity (6–12%) to avoid darkening the white surface. No blur-based glassmorphism or backdrop-filter effects are used; instead, the system relies on geometric separation an

Shapes

The shape philosophy is Geometric Precision—a balance between sharp architectural edges and human-friendly roundness. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel modern and approachable, contrasting with the austere black-and-white palette. Cards and containers use lg (1rem / 16px) border-radius for subtle softness without compromising the minimalist aesthetic. Input fields use DEFAULT (0.5rem / 8px) radius for a more technical, form-like appearance. Badges and accent elements use full radius to emphasize their role as highlights. The rationale: full-radius but

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses full border-radius (9999px), 48px height, 12px 32px padding, and pure black background (#000000) with white text. On hover, the background shifts to primary-container (#2f2f2f, a slightly lighter black) with a 200ms ease-out-cubic transition. The button-secondary variant uses a transparent background with a 2px solid black border, maintaining the same dimensions. Focus states add a 3px outline at rgba(0, 0, 0, 0.08) with 0px offset. All buttons use label-md typography (14px, 600 weight) for consistency.

Containers & Surfaces Cards use surface-container-lowest (#f9f9f9) background with lg border-radius (16px) and md padding (24px). The default shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On h

Do's and Don'ts

**Do**

• Do use pure black (#000000) for all primary text and CTAs—it commands attention and reinforces the minimalist aesthetic.
• Do deploy secondary green (#00fd74) and tertiary pink (#ff7ef2) sparingly on success states, highlights, and brand-distinctive accents to maintain visual impact.
• Do apply full border-radius (9999px) to all buttons and primary CTAs to signal action and approachability.
• Do use SuisseIntlCond at display and headline scales with -0.03em letter-spacing and 0.9–1.0 line-height for dramatic, confident typography.
• Do maintain 24px gutter padding on mobile and 40px lg spacing between major sections to create rhythm and breathing room.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and lifted elements for subtle depth without visual clutter.

**Don't**

• Don't use near-black or near-white grays as primary colors—the system relies on pure black (#000000) and pure white (#ffffff) for maximum contrast.
• Don't apply accent colors (green, pink, orange) to body text or large surface areas; reserve them for interactive elements and status indicators.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; the system favors full radius on buttons and lg radius on containers.
• Don't add blur, transparency, or glassmorphism effects; the design system is built on geometric precision and shadow-based elevation, not translucency.
• Don't center-align large text blocks; favor left-aligned text with right-aligned imagery to reinforce architectural clarity.
• Don't exceed 200ms transition timing on interactive states; keep animations snappy and predictable using ease-out-cubic easing.