DAYY®

Overview

DAYY® is a digital innovation consultancy that orchestrates strategy, design, and technology to transform ambitious enterprises. The brand embodies **Architectural Minimalism**—a design philosophy that strips away ornament to reveal essential structure, prioritizing clarity and precision over decoration. The visual language is deliberately austere: a near-black primary (#141a22) paired with pure white surfaces, creating stark contrast that demands attention without distraction. This aesthetic evokes confidence, expertise, and forward momentum—the emotional response is one of clarity and capability. The brand serves C-suite executives and innovation leaders who value directness and substance over trend.

The voice is measured, strategic, and unapologetically direct. DAYY® speaks in declarative sentences with active verbs, avoiding hedging language or corporate softness. Vocabulary emphasizes transformation, velocity, and partnership: "orchestrate," "lead," "impact," "rethink." The tone is never breathless or hyperbolic; instead, it conveys earned authority. Example sentence in brand voice: "We move from insight to execution in weeks, not quarters—because speed without strategy is noise."

Colors

The color system is built on a **monochromatic-plus-accent** model where near-black (#141a22) and pure white (#ffffff) form the structural foundation, with carefully calibrated grays providing intermediate surfaces. Primary (#141a22) is the brand's signature dark tone, used for all primary CTAs, navigation, and text hierarchy—it commands attention through contrast rather than saturation. On-primary (#ffffff) ensures maximum legibility at all sizes. The surface stack progresses from pure white (surface: #ffffff) through subtle grays (surface-dim: #f2f2f2, surface-container-low: #f2f2f2) to darker neutrals (surface-container-highest: #e0e0e0), enabling visual layering without color noise. Secondary (#5a6268) is a mid-tone gray reserved for supporting text and disabled states. Tertiary (#0b0d

Typography

The type system uses a single sans-serif family (ftSystemBlank) across all scales, reinforcing the architectural minimalism aesthetic. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and brand moments; headline-lg (40px, 600 weight, -0.02em) anchors section introductions; headline-md (28px, 600 weight, -0.01em) structures subsections. Body-lg (18px, 400 weight, 0.005em) and body-md (16px, 400 weight, 0.005em) form the reading hierarchy, with generous 28px and 24px line-heights ensuring legibility on light backgrounds. Label-md (14px, 600 weight, 0.01em) is used for UI labels, buttons, and metadata. Label-sm (12px, 500 weight, 0.055em tracking, ftSystemMono) is the monospace variant for technical content, timestamps, and navigation breadcrumbs. All type uses neg

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px (104.5rem), centered with mx-auto. The gutter is 24px (md spacing) on desktop, reducing to 16px (sm spacing) on tablet and 12px on mobile. White-space is treated as a structural element: section separation uses lg spacing (40px) vertically, creating breathing room between content blocks. The container padding is 24px on desktop (md gutter), 16px on tablet, and 12px on mobile, ensuring content never touches viewport edges. Horizontal rhythm follows the 4px unit system: all margins, padding, and gaps are multiples of 4px (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px). Cards and containers use md padding (24px) internally, with lg spacing (40px) between major sections. The grid is fluid on mobile (single column, full-

Elevation & Depth

Depth in this system is achieved through subtle shadows and surface color shifts rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 2px rgba(20, 26, 34, 0.06)) for cards and minor containers, md (0 4px 12px rgba(20, 26, 34, 0.08)) for modals and elevated surfaces, and lg (0 16px 40px rgba(20, 26, 34, 0.12)) for hero sections and overlays. All shadows use the primary color (rgba(20, 26, 34, ...)) to maintain chromatic consistency. Surfaces are differentiated through background color progression: base surface (#ffffff), container-low (#f2f2f2), container (#eeeeee), c

Shapes

The shape philosophy is **Architectural Sharpness**—rounded corners are used strategically to soften functional elements while maintaining structural clarity. Buttons use lg radius (1rem / 16px), creating a subtle softness that feels contemporary without compromising the austere aesthetic. Cards and containers use xl radius (1.5rem / 24px) for a more pronounced curve that signals containment and focus. Input fields use DEFAULT radius (0.5rem / 8px), a minimal curve that preserves the technical feel. Navigation pills and badges use full radius (9999px), creating perfect circles or capsules that

Components

Action Elements Buttons follow a two-state system: button-primary (background: #141a22, color: #ffffff, padding: 12px 24px, height: 48px, rounded: 1rem) for primary CTAs, and button-secondary (background: transparent, border: 1px solid #8a8e92, color: #141a22, same padding/height) for secondary actions. On hover, primary buttons transition to primary-container (#2d3449) with on-primary-container text (#e8eef5) over 150ms using cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons shift to surface-container-high (#e8e8e8) on hover. All buttons use label-md typography (14px, 600 weight, 0.01em tracking) and maintain a minimum 48px height for touch targets. Focus states apply a 3px ring at rgba(20, 26, 34, 0.1) with 2px offset.

Containers & Surfaces Cards use surface-container-lowest (#f8f

Do's and Don'ts

**Do**

• Do use primary (#141a22) for all primary CTAs, active navigation states, and text hierarchy—it is the brand's signature accent and must remain distinct from backgrounds.
• Do maintain 24px (md spacing) as the default gutter and section separator; this rhythm reinforces the architectural precision of the system.
• Do apply negative letter-spacing (-0.04em at display, -0.02em at headline-lg) to tighten large type and reinforce the minimalist aesthetic.
• Do use the full surface stack (surface → surface-container-highest) to create visual layering without introducing new colors; this preserves the monochromatic discipline.
• Do apply 150ms transitions with cubic-bezier(0.4, 0, 0.2, 1) timing to all interactive state changes (hover, focus, active) for consistent motion language.

**Don't**

• Don't introduce accent colors beyond primary (#141a22), secondary (#5a6268), and error (#d32f2f); the brand's power comes from chromatic restraint.
• Don't use rounded corners smaller than DEFAULT (0.5rem) on primary buttons or cards; this compromises the contemporary feel and readability.
• Don't apply shadows larger than lg (0 16px 40px rgba(20, 26, 34, 0.12)) except in hero or overlay contexts; excessive depth undermines the flat-yet-layered philosophy.
• Don't mix font families; ftSystemBlank is the only approved typeface for UI and body copy. ftSystemMono is reserved for label-sm and technical metadata only.
• Don't use color alone to communicate state; always pair color changes with shape, typography weight, or shadow shifts to ensure accessibility and clarity.