TheeDigital

Overview

TheeDigital is a B2B digital agency brand system designed for clarity, precision, and conversion. The aesthetic—termed 'Tech-Forward Minimalism'—combines a deep navy (#003f7c) foundation with vibrant orange (#ff6900) accents, creating visual hierarchy that guides users through complex cost estimation workflows. The brand personality is confident yet approachable: it demystifies web development pricing through interactive tools and transparent communication. Voice: direct, data-driven, never condescending. Example: 'Your WordPress site costs $8,500–$15,000. Here's exactly why.'

Colors

The color system operates on a dual-axis model: a cool, professional navy-to-blue gradient for surfaces and secondary actions, paired with a warm, energetic orange for primary CTAs and key interactions. Primary (#ff6900) is used exclusively on high-priority buttons ('Schedule a Consultation', 'Get Estimate') and interactive elements that demand immediate attention. Secondary (#003f7c) anchors the header, navigation, and hero background, establishing trust and authority. Tertiary (#00a4f2) highlights data points, links, and supplementary information. The surface stack progresses from pure white (#ffffff) for content areas through light blue tints (#eff6ff, #dce8ff) for container backgrounds, creating subtle depth without visual noise. Error states use a muted red (#c0392b) for form validati

Typography

The type system pairs Raleway (serif-free, geometric, 700–800 weights) for headlines with Space Grotesk (technical, monospace-influenced, 400–700 weights) for body and UI text. This pairing communicates both professionalism and technical competence. Display (56px, 800 weight, -0.02em tracking) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 700 weight) is reserved for section titles and calculator headings. Body-lg (18px, 400 weight, 28px line-height) ensures readability in long-form content and explanatory text. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text and form labels with subtle letter-spacing to enhance legibility at small sizes. On inputs and small text over busy backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0,

Layout

The layout uses a fixed 12-column grid with a max-width of 1180px, centered on desktop and full-width on mobile with 24px side gutters. The hero section breaks this constraint, extending full-width with a skewed bottom edge (8vw offset) to create visual separation from content below. Content flows through a 'content-grid' utility that defines three zones: full-width (edge-to-edge), breakout (wider than content but narrower than full), and content (65 characters max, ~1180px). Spacing follows a semantic scale: lg (40px) separates major sections, md (24px) divides cards and form groups, sm (12px) spaces inline elements. The calculator interface uses a 2-column layout on desktop (input panel left, results right) collapsing to single-column on mobile, with 24px gaps between sections.

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background color shifts rather than heavy drop shadows. Level 1 (Base): flat white or light blue surface (#ffffff, #eff6ff) with no shadow. Level 2 (Standard Card): 1px solid border in outline-variant (#cccccc) + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a subtle lift. Level 3 (Elevated/Modals): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) + background-color: surface-container-high (#e8f0ff), signaling modal prominence. The sticky header uses the strongest shadow (0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0

Shapes

The shape philosophy is 'Geometric Precision'—sharp, intentional corners that reflect technical competence without coldness. Buttons use full radius (9999px) to soften their impact and encourage clicks; this rounded-pill aesthetic is a proven conversion pattern in SaaS. Cards and containers use md (0.75rem / 12px) radius, balancing approachability with structure. Input fields use DEFAULT (0.5rem / 8px) radius, a subtle curve that distinguishes them from buttons while maintaining visual cohesion. The hero section's skewed bottom edge (created via CSS clip-path or SVG) uses a 45-degree angle, re

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (background: #ff6900, padding: 8px 20px, height: 40px, border-radius: 9999px) use orange with black text and a 200ms ease-in-out transition to #ff8533 on hover. Secondary buttons (transparent background, 2px border in #ff6900, same padding/height) are used for lower-priority actions and ghost-style links. Tertiary buttons (background: #003f7c, white text, 9999px radius) anchor secondary CTAs like phone numbers or contact links. All buttons apply font-weight: 600 and letter-spacing: 0.01em for visual emphasis. Focus states add a 3px box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.1) around primary buttons, providing accessible keyboard navigation feedback.

Containers & Surfaces Cards use background: #eff6ff, rou

Do's and Don'ts

**Do**

• Do use primary orange (#ff6900) exclusively on high-intent CTAs—'Schedule', 'Get Estimate', 'Calculate Now'—to create a clear visual hierarchy and drive conversions.
• Do apply the full M3 color token stack (primary-fixed, primary-fixed-dim, on-primary-fixed) to ensure consistent hover, focus, and active states across all interactive elements.
• Do pair Raleway headlines (700–800 weight) with Space Grotesk body text (400 weight) to communicate both authority and technical precision.
• Do use the 12-column grid with 1180px max-width and 24px gutters consistently across all pages to maintain rhythm and predictability.
• Do apply box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) to cards and 0 4px 12px rgba(0, 0, 0, 0.08) on hover to create subtle, professional depth.

**Don't**

• Don't use secondary navy (#003f7c) or tertiary cyan (#00a4f2) on primary CTAs—these colors are reserved for navigation, secondary actions, and data highlights.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the geometric precision aesthetic.
• Don't mix Raleway and Space Grotesk weights arbitrarily; use Raleway 700+ for headlines only and Space Grotesk 400–600 for body and UI.
• Don't exceed the elevation shadow values (lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1)) on cards or modals; heavy shadows undermine the clean, tech-forward aesthetic.
• Don't use the error color (#c0392b) for non-critical messaging; reserve it for validation errors, alerts, and destructive actions only.