Daos Tech

Overview

Daos Tech is an enterprise-grade operational platform designed for streaming studios and agencies managing complex workflows at scale. The brand embodies 'Technical Precision Minimalism'—a design philosophy that combines austere dark surfaces with electric blue accents to convey reliability, speed, and operational clarity. The UI prioritizes information density and rapid decision-making, using high-contrast typography (Outfit for headlines, Plus Jakarta Sans for body) and strategic color highlights to guide users through complex data. The emotional response is one of control and confidence: users feel they are operating sophisticated infrastructure, not struggling with friction. Voice: direct, data-informed, never marketing-speak. Vocabulary emphasizes operational outcomes ('reduce friction diaria', 'estabilizar cabinas', 'acelerar rentabilidad') over feature lists. Example sentence in brand voice: 'Your cloud infrastructure is now 99.8% online—transmissions stable, payouts processed, no manual intervention required.'

Colors

The color system is anchored in a near-black surface stack (#030712 base, progressing through #0b1220, #111827, #1f2937, #334155) that creates visual depth without sacrificing readability. Primary (#1d4ed8) is the electric blue used exclusively on CTAs, focus states, and critical interactive elements—it commands attention against the dark background with 96.5% contrast ratio (WCAG AAA). Secondary (#fbbf24, amber) and Tertiary (#34d399, emerald) are reserved for status indicators, success states, and accent highlights in testimonials and partner sections. The outline tokens (#4b5563, #374151) define subtle borders on cards and inputs, maintaining visual separation without harshness. On-surface (#e5e7eb) is the primary text color for body copy, while on-surface-variant (#9ca3af) is used for

Typography

The type system enforces a clear hierarchy through weight and size rather than color variation. Outfit (600–900 weights) is reserved for display, headlines, and titles, communicating authority and precision; its tight tracking (-0.02em on display, -0.015em on headline-lg) creates a technical, engineered feel. Plus Jakarta Sans (400–700 weights) handles all body, label, and UI text, providing warmth and readability at small sizes. The display level (56px, 800 weight, -0.02em tracking) is used only for hero H1s; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 700 weight) for subsection headers. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and feature descriptions; body-md (16px, 400 weight, 24px line-height) for card content and standard paragraphs

Layout

The layout employs a 12-column grid with a max-width of 1280px, centered with auto margins. The hero section uses a 3-column decision grid (grid-template-columns: repeat(3, minmax(0, 1fr))) at desktop, collapsing to 1 column on mobile (≤640px). Section padding follows a semantic scale: hero uses 5rem top / 4rem bottom (80px / 64px), partners and testimonials use 4rem vertical (64px), FAQ uses 4rem top / 5rem bottom (64px / 80px). Horizontal padding is 1.5rem (24px) on desktop, reducing to 1rem (16px) on tablet and 0.82rem (13px) on mobile. The gutter between cards is consistently 1rem (16px) in grids, 0.75rem (12px) in FAQ lists. Container max-widths vary by section: hero and partners use 1280px, testimonials use 1200px, FAQ uses 980px. White-space philosophy prioritizes breathing room aro

Elevation & Depth

Depth is conveyed through layered shadows and subtle gradients rather than bright highlights. The base elevation uses no shadow (Level 1: surface). Standard cards (Level 2: decision cards, testimonials) employ box-shadow: 0 12px 34px rgba(2, 6, 23, 0.45)—a soft, spread shadow that suggests the card floats 12px above the background. On hover, decision cards transition to box-shadow: 0 10px 20px rgba(2, 6, 23, 0.35) while translating -2px on the Y-axis, creating a subtle lift effect. Elevated elements (Level 3: modals, dropdowns) would use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3). Button focus

Shapes

The shape system follows 'Technical Softness'—rounded corners are used to humanize the austere dark interface without sacrificing precision. Buttons use rounded-md (12px / 0.75rem) for a balanced, approachable feel; cards use rounded-lg (16px / 1rem) for decision cards and testimonials, creating visual distinction from buttons. FAQ items and input fields use rounded-md (12px). The full radius (9999px) is reserved for category badges and pill-shaped UI elements (e.g., 'Pronto • 75%' dev badges). The rationale: smaller radii (8–12px) on interactive elements (buttons, inputs) convey precision and

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#1d4ed8), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 44px, rounded: {rounded.md} (12px), and box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2). On hover, the background transitions to {colors.primary-fixed-dim} (#3b82f6) with box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3), creating a lifted effect. Focus state applies box-shadow: 0 0 0 2px {colors.surface}, 0 0 0 4px {colors.primary}. The button-secondary component uses backgroundColor: rgba(9, 15, 30, 0.94), border: 1px solid {colors.outline-variant}, and the same padding/height/radius as primary. On hover, it transitions to backgroundColor: {colors.surface-container-high} (#1f2937). All

Do's and Don'ts

**Do**

• Do use the primary blue (#1d4ed8) exclusively on CTAs and focus states—never on decorative elements or backgrounds.
• Do apply the lg spacing token (40px) between major sections to create breathing room and visual hierarchy.
• Do use Outfit for all headlines and titles; reserve Plus Jakarta Sans for body, labels, and UI text.
• Do employ the decision card gradient (170°, rgba(9,14,29,0.92) to rgba(7,12,24,0.9)) for entry-point containers to guide user journeys.
• Do apply box-shadow: 0 12px 34px rgba(2, 6, 23, 0.45) to standard cards for consistent depth without visual clutter.
• Do use rounded-md (12px) on buttons and inputs, rounded-lg (16px) on cards, to signal precision vs. openness.

**Don't**

• Don't use secondary (amber #fbbf24) or tertiary (emerald #34d399) as primary CTAs—they are reserved for status and accent roles.
• Don't apply shadows with X or Y offsets; use 0px 0px spread for all shadows to maintain visual consistency.
• Don't mix Outfit and Plus Jakarta Sans at the same size/weight level; maintain clear typographic hierarchy.
• Don't use rounded-full (9999px) on buttons or cards—reserve it for badges and pill-shaped elements only.
• Don't apply gradients to more than 20% of card surfaces; excessive gradients dilute the technical aesthetic.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements; maintain minimum touch targets of 44px height.