Design System

Identity

Color System

Derived from the existing brand red (#e13a44) paired with a premium dark research base. One accent color, committed fully — no secondary colors competing.

/* Base layers */
--color-base:     #0a0a0f;   /* page background — near-black, slight blue cast */
--color-surface:  #14141c;   /* cards, sections, elevated elements */
--color-overlay:  #1e1e28;   /* nav, modals */

/* Accent — the only color in the system */
--color-accent:        #e13a44;
--color-accent-hover:  #f04454;
--color-accent-glow:   rgba(225,58,68,0.15);

/* Text — never pure white on dark (too harsh) */
--color-text-primary:   rgba(255,255,255,0.92);
--color-text-secondary: rgba(255,255,255,0.55);
--color-text-muted:     rgba(255,255,255,0.35);

/* Structure */
--color-border:   rgba(255,255,255,0.08);
--color-divider:  rgba(255,255,255,0.06);

Typography

One font family — Outfit — with a bi-weight system (900 for headlines, 300 for body). One family executed with discipline reads more premium than two families competing. Variable font: one file, all weights 100–900.

/* Fluid type scale (320px → 1440px viewport) */
--text-caption: clamp(0.75rem, 0.5rem + 0.625vw, 0.875rem);   /* 12 → 14px */
--text-sm:      clamp(0.875rem, 0.625rem + 0.781vw, 1rem);     /* 14 → 16px */
--text-base:    clamp(1rem, 0.818rem + 0.568vw, 1.125rem);     /* 16 → 18px */
--text-lg:      clamp(1.125rem, 0.875rem + 0.781vw, 1.375rem); /* 18 → 22px */
--text-xl:      clamp(1.375rem, 0.875rem + 1.563vw, 1.875rem); /* 22 → 30px */
--text-2xl:     clamp(1.875rem, 1.125rem + 2.344vw, 2.75rem);  /* 30 → 44px */
--text-3xl:     clamp(2.75rem, 1.625rem + 3.516vw, 4.25rem);   /* 44 → 68px */
--text-hero:    clamp(4.25rem, 2rem + 7.031vw, 7rem);          /* 68 → 112px */

/* Weight roles */
/* 900: hero headlines | 800: h1 | 700: h2 | 600: h3 */
/* 500: labels, nav   | 300: body on dark  | 200: animation start state */

Motion System

Functional only. Every animation reveals something, transitions somewhere, or confirms an action. Nothing moves for decoration.

/* Easing signature — expo.out. Fast snap, graceful settle. */
--ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
--ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);

/* Durations */
--duration-fast:      300ms;  /* button states */
--duration-base:      650ms;  /* card entrances, section reveals */
--duration-slow:      900ms;  /* hero elements */
--duration-cinematic: 1200ms; /* cargo door clip-path */

/* Stagger between sequential elements */
/* tight: 80ms | base: 120ms | open: 200ms */

Signature Animation: Cargo Door Reveal

Every major section opens like a cargo door as the user scrolls into it. A clip-path animates from inset to full width — a physical metaphor. No competitor has this.

/* CSS implementation */
html.js-ready [data-cargo] {
  clip-path: inset(5% 3% 5% 3% round 6px);
  opacity: 0;
  transition: clip-path 1.1s var(--ease-out), opacity 0.4s var(--ease-out);
}
html.js-ready [data-cargo].revealed {
  clip-path: inset(0% 0% 0% 0% round 0px);
  opacity: 1;
}

Layout

Asymmetric editorial grid. Symmetric grids read as templates — asymmetry signals intentional design. Sections alternate between dense and open to create visual rhythm.

• —Container max: 1280px with clamp(32px, 6vw, 96px) padding
• —Section vertical padding: clamp(80px, 10vw, 160px) — premium sites breathe
• —Hero: 7/5 split — content left, visual right
• —Services: 8-column grid with 1px border treatment
• —Stats: full-width with statistics as typographic heroes
• —Team: 2-column — headshot grid left, office photo right

Competitive Differentiation