Maxsum Consulting

Overview

Maxsum Consulting is a B2B managed IT services provider serving organizations across Victoria with expertise in IT infrastructure, cybersecurity, and digital transformation. The design system embodies 'Technical Confidence'—a movement that balances corporate authority with approachable clarity. The brand personality is decisive yet collaborative: it speaks to C-suite decision-makers and technical teams alike, using precise language without jargon. The UI evokes trust through clean, minimal surfaces punctuated by a vibrant orange accent (#fe5000) that signals action, innovation, and forward momentum. Every interaction feels intentional and purposeful, never cluttered. Example sentence in brand voice: 'Your technology foundation should enable today's operations while scaling toward tomorrow's ambitions—that's what we architect.'

Colors

The color system is anchored on a neutral, professional foundation (surface #ffffff, on-surface #58595b) that prioritizes readability and corporate credibility. Primary orange (#fe5000) is the signature accent—deployed exclusively on CTAs, key links, active states, and brand moments where user attention must be directed. It appears in the logo, the 'ASK MAXINE' button, and hero headlines, creating visual momentum without overwhelming the interface. Secondary blue (#3b71ca) and tertiary cyan (#0693e3) provide supporting accent roles for secondary actions, status indicators, and data visualization. The surface stack progresses from bright white (#ffffff) through carefully calibrated grays (#f7f7f7, #e6e6e6, #d3d3d3) to enable subtle depth without introducing darkness—reflecting the brand's p

Typography

The type system uses Helvetica/Arial as the primary family, reflecting the brand's no-nonsense, technical character. Headlines employ bold weights (700–800) at large sizes (28px–60px) to command attention and convey authority; body text remains at 16px with 400 weight and 24px line-height for comfortable reading in dense content. The display tier (60px, 800 weight, -0.02em letter-spacing) is reserved for hero statements and major section breaks; headline-lg (40px, 800 weight) anchors page sections; headline-md (28px, 700 weight) introduces subsections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraphs and descriptions, while label-md (14px, 600 weight, 0.01em letter-spacing) handles buttons, badges, and UI labels. Apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.08) o

Layout

The layout operates on a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) to desktop (full grid). The spacing scale uses semantic tokens: {spacing.gutter} (24px) for horizontal padding and section margins, {spacing.lg} (40px) for major section separation, and {spacing.md} (24px) for component internal padding. The hero section spans full-width with 80px vertical padding and a subtle gradient background (linear-gradient 135deg, rgba(254, 80, 0, 0.05) to rgba(59, 113, 202, 0.03)) that hints at the brand's accent colors without dominating. Content sections use 24px gutters on desktop, collapsing to 12px on tablet and 8px on mobile. Cards and containers maintain consistent 24px padding with 0.5rem border-radius for a professional,

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids darkness, maintaining the brand's bright, professional aesthetic. Level 1 (base surfaces) uses no shadow or a minimal 0 1px 2px rgba(0, 0, 0, 0.06) for subtle definition. Level 2 (cards, modals) applies 0 4px 12px rgba(0, 0, 0, 0.08) to lift elements slightly from the background. Level 3 (floating panels, overlays) uses 0 16px 40px rgba(0, 0, 0, 0.12) for pronounced separation. Hover states transition smoothly (200ms ease-in-out) from Level 1 to Level 2 shadows, signaling interactivity without jarring movement. The header uses a

Shapes

The shape philosophy is 'Geometric Precision'—sharp enough to feel technical and authoritative, yet rounded enough to remain approachable. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel modern and clickable; this applies to both primary (#fe5000 background, white text) and secondary (transparent background, #fe5000 border) variants. Cards and containers use 0.5rem (8px) border-radius for a subtle, professional corner treatment—not too sharp (which would feel cold) and not too rounded (which would feel playful). Input fields match card radius at 0.5rem. Badges and

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#fe5000) background, white text, 9999px border-radius, 8px 24px padding, and 40px height. On hover, the background darkens to #cc3d00 with a 200ms ease-in-out transition. The button-secondary variant inverts this: transparent background, #fe5000 2px border, #fe5000 text, same radius and padding. Focus states add a 3px rgba(254, 80, 0, 0.1) box-shadow for keyboard accessibility. The 'ASK MAXINE' CTA in the header exemplifies primary button styling at 14px font-size with 8px 24px padding.

Containers & Surfaces Cards use {colors.surface} (#ffffff) background, 0.5rem border-radius, {spacing.md} (24px) padding, and a 1px solid {colors.outline-variant} (#d9d9d9) border. The

Do's and Don'ts

**Do**

• Do use {colors.primary} (#fe5000) exclusively for primary CTAs, active states, and brand-defining moments—it's the visual signature that distinguishes Maxsum from competitors.
• Do maintain generous whitespace (40px+ vertical margins between sections) to reflect the brand's preference for clarity and professionalism over density.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to create a smooth, intentional interaction feel.
• Do use Helvetica/Arial at 800 weight for headlines to project technical authority and confidence without appearing cold or impersonal.
• Do keep border-radius consistent: 9999px for buttons and badges, 0.5rem for cards and inputs, reinforcing the geometric precision aesthetic.

**Don't**

• Don't use orange (#fe5000) for backgrounds or large surface areas—it's an accent color for interactive elements and brand moments, not a canvas.
• Don't apply shadows exceeding 40px blur radius; the system prioritizes clarity over theatrical depth, maintaining the bright, professional aesthetic.
• Don't mix serif fonts or script typefaces; Helvetica/Arial is the sole typographic family, reinforcing the no-nonsense, technical brand character.
• Don't use the secondary blue (#3b71ca) or tertiary cyan (#0693e3) as primary CTAs; they support secondary actions and data visualization only.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or below {spacing.md} (24px) on containers; the brand values breathing room and legibility over compact layouts.