Digital Heroes

Overview

Digital Heroes is a senior development agency (NYC + Delhi) that builds custom Shopify stores, SaaS platforms, web and mobile applications for ambitious brands. The design system embodies an **Architectural Minimalism** aesthetic—clean, purposeful, and grounded in natural materials. The brand personality is confident yet approachable: precise without coldness, warm without being casual. The UI evokes a sense of editorial craftsmanship: every pixel is intentional, every interaction feels earned. The color palette draws from nature (moss greens, warm ambers, cream) and the typography pairs geometric precision (Space Grotesk for headlines) with humanist clarity (Inter for body). The emotional response is one of trust and capability: users feel they are in the hands of professionals who understand both craft and commerce.

The voice is direct, no-nonsense, and slightly irreverent. Sentences are short and punchy. The brand avoids corporate jargon and instead uses concrete, action-oriented language. Example: "We build custom software, mobile apps, web apps, and Shopify/WordPress development Solution. Done Fast, Done right, done once, the first time." The vocabulary is grounded in outcomes (shipped, delivered, scaled) rather than process. Tone is conversational but authoritative—the agency speaks as peers to founders and product leaders, not as vendors pitching services.

Colors

The color system is rooted in **warm naturalism**. Primary (#3f6b54, a sophisticated moss green) is the brand's signature accent—used on CTAs, active states, and key interactive elements. It conveys growth, stability, and environmental consciousness without feeling corporate. Secondary (#cd8a4b, a warm amber-brown) provides warmth and energy, used for highlights, badges, and supporting accents. Tertiary (#24453a, a deep forest green) anchors the system and is used for text-heavy surfaces and secondary navigation.

The surface stack is built on a warm cream (#f5f0e8) as the primary background, with a series of carefully calibrated off-whites for layering (surface-container-low: #f8f5f1, surface-container-high: #ede8e0). This creates visual hierarchy without harsh contrast. On-surface text i

Typography

The type system pairs **Space Grotesk** (geometric, confident, modern) for all headlines and interactive elements with **Inter** (humanist, warm, readable) for body copy and UI labels. This pairing creates visual tension that mirrors the brand's personality: precision meets approachability. Display (104px, 700 weight, -0.02em tracking) is reserved for hero statements and major section breaks; it commands attention without shouting. Headline-lg (48px, 600 weight) is used for section titles and card headers. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, card copy, and UI text. Label-md (14px, 600 weight, Space Grotesk) is used for button text and small interactive labels. All headlines use text-wrap: balance to prevent orphans. Apply letter-spacing: -0.02em o

Layout

The layout system uses a **12-column fluid grid** with a max-width of 1280px (container-max-width: 1280px). Sections are separated using lg spacing (40px) on mobile, xl spacing (64px) on desktop. The gutter (24px) is consistent across all breakpoints and defines the padding inside containers. White-space is generous and intentional: the brand avoids cramped layouts. Cards and form groups use md spacing (24px) for internal padding. The rhythm is calm and breathing—sections feel distinct but connected. Hero sections use a 2-column layout on desktop (text left, visual right) with md spacing (24px) between columns. Forms use a single-column layout with sm spacing (12px) between fields. Lists and navigation use md spacing (24px) between items. Breakpoints follow a mobile-first approach: base st

Elevation & Depth

Depth is conveyed through **subtle layering and soft shadows** rather than dramatic contrast. The system uses three elevation levels: Level 1 (base surface, no shadow) for the page background and card containers; Level 2 (sm shadow: 0 1px 3px rgba(0, 0, 0, 0.06)) for standard cards and input fields; Level 3 (lg shadow: 0 6px 20px rgba(0, 0, 0, 0.28)) for modals, popovers, and elevated surfaces. Hover states increase the shadow to md (0 4px 12px rgba(0, 0, 0, 0.08)) to signal interactivity. Glass surfaces (used on dark backgrounds only) employ backdrop-filter: blur(18px) with a 1px border at rg

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used consistently but not excessively, creating a balance between approachability and precision. Buttons use full radius (9999px) to feel friendly and clickable. Cards and containers use lg radius (20px) to soften edges without feeling organic. Input fields use full radius (9999px) to match buttons and create a cohesive interactive language. Small UI elements (badges, tags, focus rings) use md radius (12px). The reasoning: full radius on interactive elements (buttons, inputs) signals that they are clickable and approachable. Large

Components

Action Elements Buttons are the primary interactive element. **button-primary** uses {colors.primary} (#3f6b54) background with {colors.on-primary} (#f5f0e8) text, full radius (9999px), padding 10px 24px, and a subtle shadow (0 2px 8px rgba(63, 107, 84, 0.15)). On hover, shift to {colors.primary-fixed-dim} (#6fa37a) and increase shadow to 0 4px 12px rgba(63, 107, 84, 0.25). On active, use {colors.tertiary} (#24453a). **button-secondary** uses rgba(255, 252, 245, 0.65) background with a 1px border at rgba(63, 107, 84, 0.18), full radius, and padding 10px 20px. On hover, increase background opacity to 0.85 and strengthen the border to rgba(63, 107, 84, 0.28). Apply transition: background 140ms ease, box-shadow 140ms ease on all button states. All buttons use {typography.label-md} (Space

Do's and Don'ts

**Do**

• Do use {colors.primary} (#3f6b54) for all primary CTAs and active states—it is the brand's signature accent and must be instantly recognizable.
• Do maintain a minimum touch target size of 44px × 44px for all interactive elements (buttons, inputs, list items).
• Do apply full radius (9999px) consistently to buttons and input fields to signal interactivity and approachability.
• Do use Space Grotesk for all headlines and interactive labels; Inter for body copy and descriptions—never mix them within a single component.
• Do layer surfaces using the surface-container stack (lowest, low, DEFAULT, high, highest) to create visual hierarchy without harsh contrast.
• Do apply transition: background 140ms ease, box-shadow 140ms ease on all hover and focus states for smooth, predictable feedback.
• Do use glass surfaces (backdrop-filter: blur(18px)) only on dark backgrounds; never on light surfaces.
• Do maintain generous white-space: use lg spacing (40px) for section separation and md spacing (24px) for internal padding in cards.

**Don't**

• Don't use secondary (#cd8a4b) or tertiary (#24453a) as primary CTAs—they are supporting accents only. Primary must always be {colors.primary}.
• Don't apply shadows on light backgrounds; use subtle 1px borders at rgba(63, 107, 84, 0.12) instead to define surfaces.
• Don't mix rounded radii within a single component—buttons are full (9999px), cards are lg (20px), badges are md (12px).
• Don't use system fonts (system-ui, -apple-system, sans-serif) in the final output—always specify Space Grotesk or Inter explicitly.
• Don't apply letter-spacing greater than -0.02em on headlines; it reduces legibility. Use -0.01em or 0em for body text.
• Don't create focus states with outline: 1px—use outline: 2px solid {colors.primary} with outline-offset: 2px for accessibility.
• Don't use opacity-based text colors (rgba) for primary body text; use solid hex values (#0f1713) for maximum contrast and legibility.
• Don't exceed a max-width of 1280px (container-max-width: 1280px) for content containers—wider layouts feel unfocused and hard to scan.