digitalhero

Overview

digitalhero is a web design agency that transforms ambitious brand visions into impactful digital experiences. The brand operates within a **High-Contrast Minimalist** aesthetic—a design philosophy that strips away visual noise to amplify signal. The UI canvas is dominated by deep blacks (#0a0a0a) and neutral grays (#a3a3a3, #6b6b6b), creating a professional, tech-forward foundation. Against this austere backdrop, a signature neon-lime accent (#bdee63) punctuates key interactions, CTAs, and brand moments, evoking energy, innovation, and forward momentum. The emotional response is one of clarity and precision: users feel guided, not overwhelmed.

The brand voice is direct, confident, and unpretentious. Vocabulary favors concrete action over flowery abstraction: "Transform ideas into impactful digital experiences" rather than "Elevate your vision." Tone is collaborative and grounded—the agency positions itself as a partner in growth, not a mystical creative force. Example sentence in brand voice: "We turn complex ideas into pixel-perfect products that your users actually want to use."

Colors

The color system operates on a principle of **maximum contrast with strategic accent deployment**. The primary surface stack uses deep blacks and charcoals (#0a0a0a, #111111, #1a1a1a, #2a2a2a, #313131) to establish a premium, focused environment. Text and interactive elements sit atop this dark foundation using a muted neutral (#a3a3a3 for primary body text, #6b6b6b for secondary). The primary accent color is lime-green (#bdee63), used exclusively on primary CTAs ("Book a free call"), hover states, and brand-critical moments. This high-saturation accent creates immediate visual hierarchy and draws the eye without requiring size or weight manipulation. Secondary accents include a tech-blue (#3b9eff) for secondary information and a purple (#d19dff) for tertiary highlights or status indicator

Typography

The type system uses a single typeface family—dhero (with fallback to ui-sans-serif, system-ui)—to reinforce visual cohesion and avoid decorative distraction. The hierarchy is built on size and weight rather than font switching: display (76px, 600 weight) anchors hero sections, headline-lg (48px, 600) leads major sections, headline-md (32px, 600) subsections, and body-md (16px, 400) carries primary content. All headings apply a tight negative letter-spacing (-2px to -0.5px) to create a compressed, modern feel that echoes the minimalist aesthetic. Body text uses -0.5px letter-spacing for subtle tightness without sacrificing readability. Label and tag text (12–14px, 500 weight) appears on badges, buttons, and metadata. The system applies text-rendering: optimizeLegibility and -webkit-font-sm

Layout

The page layout uses a fixed 12-column grid with a max-width container of 1280px, centered with padding-inline: 20px on mobile. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard component padding and section gaps, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The gutter (20px) defines the horizontal breathing room on smaller viewports. Hero sections use min-height: 88vh to create immersive entry points, while content sections stack with mt: lg (40px) or mt: xl (64px) between them. Cards and containers use padding: md (24px) internally, with gap: md (24px) between sibling cards in a grid. The system favors generous white-space over cramped layouts—negative space is treated as a desi

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic layering. The elevation scale defines three levels: sm (0 1px 3px rgba(0, 0, 0, 0.12)) for subtle card borders and input focus states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard card hover and modal elevation, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for prominent modals and floating elements. Accent-colored elements (primary buttons, lime-green badges) receive a colored shadow on hover: box-shadow: 0 3px 8px rgba(189, 238, 99, 0.25), creating a subtle glow that reinforces the accent's ene

Shapes

The shape philosophy is **Geometric Precision**—a balance between sharp utility and approachable softness. Border-radius follows a deliberate scale: sm (6px) for small UI elements like tags and badges, DEFAULT (8px) for buttons and standard inputs, md (12px) for card corners and larger containers, lg (16px) for prominent cards and modals, xl (24px) for hero sections and full-width containers, and full (500px) for pill-shaped buttons and circular avatars. The rationale: smaller radii (6–8px) feel technical and controlled, appropriate for form inputs and micro-interactions; medium radii (12–16px

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#bdee63), textColor: {colors.on-primary} (#0a0a0a), padding: 10px 20px, height: 44px, rounded: {rounded.DEFAULT} (8px), and fontWeight: 500. On hover, the button-primary-hover state shifts to backgroundColor: {colors.primary-container} (#d4ff70) and adds boxShadow: 0 3px 8px rgba(189, 238, 99, 0.25) to create a glowing effect. On active/press, button-primary-active applies transform: scale(0.98) for tactile feedback. The button-secondary uses a neutral background ({colors.surface-container-high}, #2a2a2a) with a 1px border at {colors.outline-variant}, and transitions to a lighter background on hover. All buttons use transition: all 150ms cubic-bezier(0.4,

Do's and Don'ts

**Do**

• Do use the lime-green accent (#bdee63) sparingly—reserve it for primary CTAs, hover states, and brand moments to maintain visual impact and avoid accent fatigue.
• Do maintain the dark surface stack (#0a0a0a to #313131) as the foundation; never lighten the page background beyond #141414 without explicit brand approval.
• Do apply negative letter-spacing (-0.5px to -2px) to all headings to reinforce the compressed, modern aesthetic and visual hierarchy.
• Do use the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing for all interactive state changes to create a snappy, responsive feel.
• Do pair the muted neutral text color (#a3a3a3) with sufficient contrast ratios (4.5:1 minimum for body text) by ensuring dark backgrounds remain below #333333.

**Don't**

• Don't use the primary accent (#bdee63) for body text, backgrounds, or non-interactive elements—it will dilute its signal and create visual chaos.
• Don't apply rounded corners larger than {rounded.lg} (16px) to buttons or form inputs; they will feel playful rather than professional.
• Don't mix typefaces; the dhero family is the sole typographic voice—system fallbacks are for rendering only, never intentional design choices.
• Don't use box-shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.2)) on standard components; the dark background already provides sufficient depth through borders and surface layering.
• Don't lighten the on-surface text color (#a3a3a3) below #7b7b7b for body copy—readability will suffer on the dark background.