Odin Digital

Overview

Odin Digital is an Australian digital marketing agency that specialises in industry-specific expertise across SaaS, healthcare, legal, real estate, and financial services. The brand embodies 'Precision Minimalism'—a design philosophy that pairs clean, professional typography with strategic accent colour placement to convey authority, clarity, and data-driven confidence. The aesthetic is deliberately restrained: a white-dominant surface with deep navy (#0f172a) as the secondary anchor, punctuated by a vibrant burnt-orange primary (#ea550b) that commands attention on CTAs and key messaging. This colour hierarchy reflects the brand's core promise: cutting through noise with focused, measurable results.

The voice is consultative and assured—never breathless or hyperbolic. Odin speaks to C-suite decision-makers and marketing leaders with precision, using concrete metrics ("$237M+ in client revenue generated", "4.7X average ROAS") and industry-specific language. The tone avoids jargon-heavy abstractions; instead, it grounds claims in tangible outcomes. Example sentence in brand voice: "We don't believe in one-size-fits-all. Our team brings deep expertise across 40+ industries—understanding your challenges, regulations, and growth levers."

Colors

The colour system operates on a three-tier hierarchy: surface (white #ffffff), secondary anchor (navy #0f172a), and primary accent (burnt-orange #ea550b). Primary (#ea550b) is reserved exclusively for call-to-action buttons, key links, accent text (e.g., "Your Language" in the hero), and interactive focus states. It appears sparingly but with high visual impact—approximately 6% of the page by frequency. Secondary (#0f172a) serves as the dominant text colour and structural element, providing the professional backbone. The surface stack uses a carefully calibrated grey scale (surface-container-low #f3f4f6, surface-container #e5e7eb, surface-container-high #d1d5db) for subtle layering in cards, inputs, and hover states without introducing visual clutter. Error states use #dc2626 (red) for val

Typography

The type system pairs Playfair Display (serif, 700 weight) for headlines and display text with Inter (sans-serif, 400–600 weight) for body and UI copy. This pairing communicates sophistication (serif) grounded in modern clarity (sans-serif). Display-level text (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (48px, 700 weight) anchors subsections; body-md (16px, 400 weight, 24px line-height) is the default reading size for copy blocks. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text and UI labels to ensure legibility at small sizes. On small labels over busy backgrounds or dark overlays, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to maintain readability. The line-height is set to 1.5 (unitless

Layout

The layout follows a 12-column grid with a fixed max-width of 1280px, centred on the viewport. The container uses 24px horizontal padding (gutter) on mobile and tablet, scaling to 40px (lg spacing) on desktop. Page rhythm is established through lg spacing (40px) between major sections (hero, industry cards, testimonials, CTA footer), with md spacing (24px) separating subsections and card groups. The hero section occupies 100% viewport height with centred content; the primary CTA button is positioned 24px below the hero copy. Card grids use 24px gap between items (md spacing). Whitespace is treated as a design element—negative space around text and buttons reinforces the minimalist aesthetic and guides the eye toward primary actions. The container max-width of 1280px prevents line lengths f

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layered backgrounds. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for small UI elements like badges and input fields; md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and buttons; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Cards and buttons employ the md shadow by default; on hover, they transition to lg shadow over 200ms to signal interactivity. Input fields use a 1px solid border in surface-container-high (#d1d5db) with a 3px inset focus ring in rgba(234, 85, 11,

Shapes

The shape philosophy is 'Architectural Clarity'—sharp, intentional corners that convey precision and professionalism. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel modern and approachable while maintaining formality. Cards and containers use lg radius (1rem / 16px) for a soft-but-structured appearance. Input fields use DEFAULT radius (0.5rem / 8px) for a balanced, utilitarian feel. Small UI elements (badges, toast notifications) use full radius (9999px) to distinguish them as secondary components. The radius scale is applied consistently: no element uses a radius

Components

Action Elements Buttons are the primary interactive component. The primary button uses a burnt-orange background (#ea550b), white text (#ffffff), full border-radius (9999px), and 10px vertical / 20px horizontal padding (44px total height). On hover, the background transitions to #c94507 (darker orange) over 200ms. The button applies md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) at rest and lg shadow on hover. Secondary buttons use a transparent background with a 2px solid border in primary (#ea550b) and primary text; on hover, the background fills with primary-container (#fff5f0). Ghost buttons (used for tertiary actions) have no border, transparent background, and on-surface text; they transition to surface-container-high (#d1d5db) on hover. All buttons use label-md typography (14px, 600

Do's and Don'ts

**Do**

• Do use the primary colour (#ea550b) exclusively on CTAs, key accent phrases, and focus states—never on body text or backgrounds.
• Do maintain at least 24px (md spacing) between major sections to preserve the minimalist aesthetic and guide visual flow.
• Do apply full border-radius (9999px) to all buttons to reinforce the modern, approachable brand personality.
• Do use Playfair Display (serif, 700 weight) for headlines and Inter (sans-serif, 400–600 weight) for body copy to balance sophistication with clarity.
• Do transition all interactive elements over 150–200ms with ease-out timing to signal state changes smoothly.
• Do use md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) as the default elevation for cards and buttons; reserve lg shadow for hover and modal states.

**Don't**

• Don't use the primary colour (#ea550b) on body text, backgrounds, or non-interactive elements—it must remain reserved for high-impact CTAs.
• Don't apply border-radius smaller than 0.25rem (4px) to any element; this risks appearing dated and harsh.
• Don't mix serif and sans-serif fonts within a single text block; maintain clear separation (Playfair for headlines, Inter for body).
• Don't use shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements; reserve extreme elevation for modals and overlays.
• Don't reduce spacing below md (24px) between major sections; this collapses the visual hierarchy and contradicts the minimalist philosophy.
• Don't apply text-shadow to body text or headlines; reserve it only for small labels over busy backgrounds (0 1px 2px rgba(0, 0, 0, 0.15)).