EDOLUS

Overview

EDOLUS is a precision-engineered interactive 3D platform that embodies **Technological Minimalism**—a design philosophy that strips away ornament to reveal pure function and geometric clarity. The brand serves creators, technologists, and immersive-experience enthusiasts who demand both aesthetic restraint and technical sophistication. The visual language is dominated by a deep, near-black canvas (#1d292c) punctuated by crisp white (#ffffff) and cool grays (#c4c7c7), creating a high-contrast, almost monochromatic environment that evokes the clarity of a precision instrument or a dark-mode code editor. The emotional response is one of focused intensity: users feel they are entering a controlled, purposeful space where every pixel serves a function. The brand personality is austere yet approachable—technical without being cold, minimal without being sterile. Voice: declarative, precise, unadorned. Example: 'Load the experience. Adjust audio. Begin.'

Colors

The color system is built on a **high-contrast monochromatic foundation** with strategic accent restraint. The primary surface is a deep charcoal (#1d292c, rgb(29, 41, 44)), which serves as the canvas for all interactive elements. This dark foundation is paired with pure white (#ffffff) as the primary accent—used exclusively for CTAs, critical UI elements, and the hero logo. The secondary accent is a cool gray (#c4c7c7), deployed for supporting text, disabled states, and secondary UI chrome. Tertiary grays (#6c757d, #505050) provide hierarchy for less-critical information and borders. The outline color (#666666) is used for subtle dividers and input borders; outline-variant (#505050) for disabled or muted states. Error states use a restrained red (#ff4444) only when necessary. All surfaces

Typography

The type system pairs **General Sans** (a geometric, humanist sans-serif) for display and body text with **JetBrains Mono** (a technical monospace) for UI labels, progress indicators, and system feedback. This pairing creates a dual-voice system: General Sans communicates warmth and clarity at large scales (display: 96px, headline-lg: 40px), while JetBrains Mono reinforces technical precision at small scales (label-md: 14px, label-sm: 12px, letterSpacing: 0.1em–0.15em). Display text uses a light weight (300) and tight line-height (1.04) to maximize impact in the hero; body text uses regular weight (400) and generous line-height (1.5–1.6) for readability. Monospace labels are always uppercase and letter-spaced (0.1em–0.15em) to evoke system output or technical readouts. When displaying prog

Layout

The layout follows a **fixed-width, centered grid model** with a maximum container width of 1280px. The page uses a 12-column grid with a 24px gutter, providing flexibility for both desktop and responsive layouts. Vertical rhythm is maintained through a strict 8px spacing unit: margins and padding are always multiples of 8px (4px, 12px, 24px, 40px, 64px). The hero section occupies the full viewport (100vw × 100svh) with centered content; the logo is positioned at 50% top/left with transform: translate(-50%, -50%). Section separation uses lg spacing (40px) between major content blocks. The CTA button is centered within its container with 2.75rem margin-top (44px) on desktop, reducing to 1.75rem (28px) on mobile. All text content is padded with clamp(24px, 6vw, 64px) horizontally to ensure r

Elevation & Depth

Depth is conveyed through **discrete shadow layers and surface-color shifts**, not through blur or transparency. Level 1 (Base): the background surface (#1d292c) with no shadow. Level 2 (Standard Card): surface-container-low (#131a1e) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift. Level 3 (Elevated/Modal): surface-container-high (#2a3a40) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), indicating significant separation. Hover states transition from Level 2 to Level 3 with a 0.3s ease timing function. The splash screen overlay uses a semi-transparent black layer (rgba(

Shapes

The shape philosophy is **Geometric Precision**—favoring sharp, right-angled corners with minimal rounding. The default border-radius is 0.5rem (8px), applied to buttons, inputs, and cards. Larger containers use 1rem (16px) for a subtle softening without compromising the technical feel. The CTA button uses a custom corner treatment: four 4px × 4px white corner marks (created via ::before pseudo-element with background-image: linear-gradient) positioned 6–8px outside the button edges, expanding to 4px on hover. This creates a 'targeting reticle' effect that reinforces precision and interactivit

Components

Action Elements **Button Primary** uses background-color: #ffffff, color: #1d292c, padding: 1.2rem 3rem (19.2px vertical, 48px horizontal), font-family: JetBrains Mono, font-size: 0.75rem (12px), letter-spacing: 0.1em, and border-radius: 0.5rem (8px). On hover, the background shifts to #d0d0d0 and padding expands slightly (0.3s transition). The button includes a ::before pseudo-element with four corner marks (4px × 4px white gradients) positioned at top: -6px, left: -8px, etc., which animate to top: -4px on hover, creating an expanding targeting effect. On mobile, padding reduces to 0.96rem 2.4rem and font-size to 0.6rem (9.6px).

**Button Secondary** uses background-color: transparent, border: 1px solid #666666, color: #ffffff, and the same padding/typography as primary. On hover, bac

Do's and Don'ts

**Do**

• Do use white (#ffffff) exclusively for primary CTAs and critical interactive elements—it is the brand's signature accent and must never be diluted or overused.
• Do maintain strict contrast ratios: on-surface text (#ffffff) on surface (#1d292c) achieves 18.5:1 WCAG AAA compliance; secondary text (#c4c7c7) achieves 10.2:1.
• Do apply monospace typography (JetBrains Mono, 0.1em–0.15em letter-spacing) to all system feedback, progress indicators, and UI labels to reinforce technical precision.
• Do use the 8px spacing unit consistently: all margins and padding must be multiples of 8px (4, 12, 24, 40, 64) to maintain visual rhythm.
• Do transition between surface colors and shadows on hover/focus states using 0.3s cubic-bezier(0.4, 0, 0.2, 1) to create a sense of responsive precision.

**Don't**

• Don't introduce gradients, blur effects, or glassmorphism—the aesthetic is austere and technical, not ethereal or soft.
• Don't use colors outside the defined palette; every hex value must be a named token to maintain system integrity.
• Don't apply border-radius greater than 1rem (16px) except for fully rounded elements (50% or 9999px); sharp corners are a brand signature.
• Don't mix typefaces within a single component; General Sans is for body/display, JetBrains Mono is for labels/system text—never reverse these roles.
• Don't animate opacity or transform without specifying a cubic-bezier timing function; all transitions must use 0.3s ease or 0.3s cubic-bezier(0.4, 0, 0.2, 1) for consistency.