DESIGN.md

name	Acoruss
description	Technology consulting agency empowering businesses through software, AI, and strategy.
colors	warm-maroon deep-ember amber-gold charred-earth warm-smoke ash-brown warm-cream parchment soft-blue muted-sage warm-gold ember-red #7A1C1C #3D1C1C #C8956A #0F0D0B #1A1612 #2C2520 #F5F0EB #E8E2DA #5B9BD5 #5B9B6B #D4A843 #C94444
typography	display headline title body label fontFamily fontSize fontWeight lineHeight letterSpacing Inter, ui-sans-serif, system-ui, sans-serif clamp(2.25rem, 5vw, 3.75rem) 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter, ui-sans-serif, system-ui, sans-serif clamp(1.5rem, 3vw, 2.25rem) 700 1.2 -0.01em fontFamily fontSize fontWeight lineHeight Inter, ui-sans-serif, system-ui, sans-serif 1.25rem 600 1.4 fontFamily fontSize fontWeight lineHeight Inter, ui-sans-serif, system-ui, sans-serif 1rem 400 1.6 fontFamily fontSize fontWeight lineHeight letterSpacing Inter, ui-sans-serif, system-ui, sans-serif 0.75rem 500 1.25 0.05em
rounded	sm md lg full 8px 12px 16px 9999px
spacing	sm md lg xl section 8px 16px 24px 32px 80px
components	button-primary button-primary-hover button-ghost button-ghost-hover card-surface card-surface-hover nav-pill input-field backgroundColor textColor rounded padding {colors.warm-maroon} #FFFFFF {rounded.full} 10px 20px backgroundColor textColor #8B2222 #FFFFFF backgroundColor textColor rounded padding transparent {colors.warm-cream} {rounded.md} 8px 12px backgroundColor textColor rgba(255, 255, 255, 0.1) {colors.warm-cream} backgroundColor textColor rounded padding rgba(15, 13, 11, 0.6) {colors.warm-cream} {rounded.lg} 20px backgroundColor rgba(15, 13, 11, 0.7) backgroundColor textColor rounded padding rgba(26, 22, 18, 0.75) {colors.warm-cream} {rounded.full} 12px 20px backgroundColor textColor rounded padding {colors.warm-smoke} {colors.warm-cream} {rounded.md} 12px 16px

Design System: Acoruss

1. Overview

Creative North Star: "The Fireside Counsel"

A trusted advisor's space: warm, composed, assured. The interface evokes the feeling of sitting in a well-appointed study with someone who has solved this problem before. Every surface carries the warmth of dark timber and ember-glow accents. The system never shouts, never dazzles with cheap tricks; it earns trust through craft, consistency, and restraint in the right places.

This system rejects displaced or scattered designs, generic template aesthetics, flashy gimmickry, and cold corporate impersonality. It is an agency's own proof of work: if the site itself doesn't feel expertly made, nothing it claims matters.

The color strategy is Committed: warm maroon carries identity across dark surfaces, with amber-gold as a secondary voice for emphasis. The palette works in tight harmony; no color arrives without purpose.

Key Characteristics:

• Dark warm ground with layered glass surfaces
• Single-font system (Inter) using weight and scale for hierarchy
• Pill-shaped primary CTAs that feel solid and inviting
• Godrays and subtle radial gradients for atmospheric depth
• Scroll-triggered fade animations at restrained energy
• Glass-effect navbar floating above content

2. Colors

A palette of embers and ash: warm darks dominate, punctuated by maroon identity and amber-gold sparks.

Primary

• Warm Maroon (#7A1C1C): The brand voice. CTAs, headings, active states, and any element that says "this is Acoruss." Used sparingly on dark surfaces for maximum contrast and authority.

Secondary

• Deep Ember (#3D1C1C): Darker sibling of the primary. Card fills in variety contexts, section differentiation, and subtle tonal shifts. Never competes with primary; it recedes.

Tertiary

• Amber Gold (#C8956A): The warm accent. Featured elements, star ratings, emphasis text, hover highlights. Brings warmth and approachability to the maroon's authority.

Neutral

• Charred Earth (#0F0D0B): The deepest dark. Page background, footer ground. Almost black, but warm.
• Warm Smoke (#1A1612): Primary surface for cards and elevated containers. The "resting" background for interactive elements.
• Ash Brown (#2C2520): Borders, dividers, subtle separators. The lightest of the darks.
• Warm Cream (#F5F0EB): Primary text on dark. Off-white with warmth; never clinical.
• Parchment (#E8E2DA): Secondary text, body copy at reduced emphasis. Slightly muted.

Named Rules

The Ember Hierarchy Rule. Maroon is identity. Gold is emphasis. The darks are structure. If gold is touching maroon directly, one of them is wrong. They address different emotional registers and should not compete in the same element.

3. Typography

Display Font: Inter (with ui-sans-serif, system-ui fallback) Body Font: Inter (same stack)

Character: A single-font system that derives all personality from weight contrast and optical sizing. Inter's variable axis (opsz 14-32) keeps small text crisp and large text elegant. The system avoids typographic spectacle; authority comes from scale and weight, not decorative faces.

Hierarchy

• Display (700, clamp(2.25rem, 5vw, 3.75rem), line-height 1.1, tracking -0.02em): Hero headlines only. Bold, tight, commanding.
• Headline (700, clamp(1.5rem, 3vw, 2.25rem), line-height 1.2, tracking -0.01em): Section headings. Same weight as display, stepped down.
• Title (600, 1.25rem, line-height 1.4): Card headings, sub-section titles. Semibold, not bold.
• Body (400, 1rem, line-height 1.6, max 65-75ch): Running text. Regular weight, generous leading for readability on dark backgrounds.
• Label (500, 0.75rem, tracking 0.05em, uppercase): Section badges, pill labels, metadata. Small, tracked out, uppercase.

Named Rules

The Weight Gap Rule. Adjacent hierarchy levels must differ by at least one full weight step (e.g., 700 to 500, never 600 to 500). If two text elements feel the same weight at a glance, one of them is at the wrong level.

4. Elevation

This system uses layered glass over warm darkness. Depth is conveyed through translucent surfaces with backdrop-blur, not traditional drop shadows. The dark gradient ground (hero-gradient) establishes the base plane; glass-effect elements float above it with subtle borders at low opacity.

Shadows appear only on hover as a state response, never at rest. The resting state is flat-with-blur; the active state lifts with shadow.

Shadow Vocabulary

• Card hover lift (0 12px 40px rgba(0, 0, 0, 0.3)): Applied via .card-hover:hover. Elements rise 4px on Y-axis simultaneously.
• Navbar ambient (shadow-sm via DaisyUI): Minimal shadow on the floating pill navbar. Barely perceptible; border does the heavy lifting.

Named Rules

The Flat-at-Rest Rule. Surfaces are flat at rest. No resting shadows. Shadows appear only as a response to interaction (hover, press, drag). If a card has a shadow without being hovered, the shadow is wrong.

5. Components

Buttons

Solid and grounded. Buttons feel like they have weight.

• Shape: Full pill radius (9999px) for primary CTAs; medium radius (12px) for ghost/nav buttons
• Primary: Warm maroon fill (#7A1C1C), white text, padding 10px 20px, font-semibold. Often includes a trailing arrow icon.
• Hover / Focus: Background lightens slightly (#8B2222), focus ring 2px solid amber-gold with 2px offset. No scale or bounce.
• Ghost: Transparent background, warm-cream text, 12px radius. Hover reveals white at 10% opacity.

Cards / Containers

Glass surfaces that float on the dark ground.

• Corner Style: Generous curves (16px radius)
• Background: Base-100 at 60% opacity with 4px backdrop-blur (dashboard), or glass-effect (rgba(26,22,18,0.75) + 16px blur + saturate 180%) for marketing surfaces.
• Border: 1px, base-300 at 50% opacity (dashboard) or base-content at 5% opacity (marketing). Subtle; structure without division.
• Internal Padding: 20px standard, 16px for stat cards.
• Hover: translateY(-4px) + shadow (0 12px 40px rgba(0,0,0,0.3)). The card lifts toward you.

Inputs / Fields

Warm, recessive, ready.

• Style: Warm-smoke background (#1A1612), warm-cream text, 12px radius, subtle border.
• Focus: 2px solid amber-gold outline with 2px offset. Unmistakable but not aggressive.
• Error: Ember-red (#C94444) border, red text below.

Navigation

A floating glass pill that feels permanent and trustworthy.

• Style: Glass-effect background, full-width max 6xl, pill shape (rounded-full), fixed at top with 12-16px inset from edges.
• Links: Ghost buttons at 14px, medium weight. No active-state underline; relying on context.
• Mobile: Drawer overlay from left, same glass background.
• CTA: Primary button (pill, maroon fill) at navbar-end. "Get Started" with arrow icon.

Section Badges (signature component)

Small uppercase pills that introduce sections. Amber-gold dot indicator on the left, tracked-out text, base-content at muted opacity. They announce topic without demanding attention.

6. Do's and Don'ts

Do:

• Do use the warm maroon (#7A1C1C) exclusively for CTAs and primary interactive elements. Its rarity is its power.
• Do tint every "black" toward the warm hue. #0F0D0B, not #000000. The system has no true black or true white.
• Do use the glass-effect (backdrop-blur 16px + saturate 180%) for floating navigation and elevated marketing surfaces.
• Do maintain the weight gap between adjacent text levels (700 → 500 → 400, never adjacent values).
• Do use scroll-triggered fade-in-up animations (0.6s ease-out) for content entering the viewport.
• Do keep section spacing generous (80px between major sections) to let dark backgrounds breathe.

Don't:

• Don't use displaced or scattered elements that feel like unrelated parts stitched together. Every section must feel like it belongs to the same warm room.
• Don't use generic template patterns, stock imagery, or hollow marketing copy. This site is proof of craft.
• Don't use flashy gimmickry, excessive particle effects, or spectacle over substance.
• Don't use cold, impersonal corporate styling. No clinical whites, no steel grays, no detachment.
• Don't use border-left or border-right greater than 1px as colored accent stripes.
• Don't use gradient text (background-clip: text).
• Don't use bounce or elastic easing. Ease-out with exponential curves only.
• Don't use resting shadows. Shadows respond to interaction, never decorate at rest.
• Don't use true #000000 or #FFFFFF anywhere. Every neutral is tinted warm.