Brand System

Brand system  /  Layout

Layout

The 1200px grid, the 4px spacing scale, responsive breakpoints, shape language, elevation, section rhythm, motion tokens, and iconography system.

Section 06 Layout Standards

Grid & Container

One unified container width, consistent gutters, and an underlying 12-column grid. Standardizing constraints ensures diverse screens and portal pages feel like a coherent product.

1200px

Maximum content width. On ultra-wide monitors, content centers gracefully while outer margins expand.

--maxw: 1200px

24px

Horizontal container gutter, dropping to 16px below 640px. The guaranteed minimum boundary from the viewport edge.

--gutter: 24px

12 Columns

Underlying responsive column count. Most layouts use simple integer fractions: halves (6 col), thirds (4 col), or quarters (3 col).

display: grid

The 12-Column Grid Specimen

12 responsive columns with 24px gutters within a 1200px centered container.

Standard Layout Archetypes

Layout Name Desktop (≥ 980px) Tablet (640–979px) Mobile (< 640px) Primary Application
Centred Masthead 840px max-width, centred Full container width Full container width Section intros, documentation headers, lead statements.
Three-Up Cards 3 columns (4 col each) 2 columns 1 column Core divisions, system features, service pillars.
Four-Up Grid 4 columns (3 col each) 2 columns 1 column Brand values, hardware specs, download tiles.
Split 50/50 1 : 1 ratio, 48px gap Stacked vertically Stacked vertically, text first Copy beside interactive diagrams, images, or forms.
Full-Bleed Band 100vw bleed, inner 1200px Same Same Brand Navy sections, enterprise CTAs, closing statements.

Spacing Scale (4px Base Grid)

A 13-step scale rooted in a 4px geometric base. Every margin, padding, and gap resolves strictly to one of these tokens. Click any token to copy.

4px Tight icon-to-label gaps, badge inner padding.
8px Button icon gaps, chip vertical padding.
12px Gap between button pairs, card small padding.
16px Grid gap on mobile, list item separation.
20px Card internal padding on tablet.
24px Container gutter, standard grid gap.
32px Standard desktop card padding.
40px Gap between section titles and card grids.
48px Subsection vertical separation.
56px Major component padding.
64px Section padding on mobile.
80px Section padding at mid desktop widths.
104px Hero & major section padding on desktop.

Responsive Breakpoints

Four verified viewport targets. Every layout must be verified at 390px, 768px, 1200px, and 1440px+.

Breakpoint Width Target Device Layout Adaptation
Mobile < 640px iPhone, Android (390px) Single column. Type steps down. Gutters drop to 16px. CTAs go full width.
Tablet 640px – 979px iPad, Tablets (768px) Two-column card grids. Splits stack vertically. Navigation switches to drawer.
Desktop 980px – 1399px Laptops & Displays (1200px) Full 3- and 4-column grids. Side rail navigation pinned. Full type scale.
Large Display ≥ 1400px 4K Monitors & Desktops (1920px) Container caps at 1200px / 1380px wide. Margins absorb remaining width.

Shape & Corner Radius

A modern, refined corner radius system engineered for enterprise technology. Corners are subtly rounded (8px–12px) for cards, while status badges use pill shapes.

Cards — 12px (--rad-md)

Buttons — 8px (--rad-base)

Inputs — 8px (--rad-base)

Badges — Pill (--rad-pill)

Dividers & Hairline Borders

The universal divider across the system is 1px solid #DDE6F0 (var(--line)). On hover, borders deepen to #C4D6EA (var(--line-strong)); they never change width.

Elevation & Shadows

Three elevation steps, tinted with Brand Navy (rgba(0, 51, 117, ...)) rather than muddy neutral black, producing crisp optical depth.

Small Elevation

0 2px 8px rgba(0,51,117,.04)

Resting cards, stat tiles, input fields.

Base Elevation

0 8px 24px rgba(0,51,117,.06)

Hovered cards, dropdown menus, flyouts.

Large Elevation

0 16px 40px rgba(0,51,117,.10)

Search modal panels, dialog drawers, toast popups.

Section Rhythm & Alternation

Long pages require visual pace. Alternating full-width section fields ensures users navigate structured layers intuitively.

01. Hero Masthead — White canvas with clear lead copy. White Canvas
02. System Directory — Soft Ice field with 3-up card modules. Soft Ice (#F6F9FD)
03. Value Highlight Band — Brand Navy field for mission & value peaks. Navy (#003375)
04. Technical Detail Specs — White canvas with data tables and specimens. White Canvas
05. Footer Foundation — Deep Midnight Navy anchoring the page base. Midnight Navy

Motion Tokens & Transitions

Snappy, smooth, and purposeful. Motion should confirm user intent rather than distract.

Token Duration Timing Curve Application
--t-fast 120ms cubic-bezier(.16, 1, .3, 1) Button click presses, toggle switches, active chips.
--t-base 180ms cubic-bezier(.16, 1, .3, 1) Hover lifts, border transitions, color cross-fades (Default).
--t-slow 260ms cubic-bezier(.16, 1, .3, 1) Modal panel fade-ins, mobile drawer slide, accordions.
Reduced Motion is Mandatory: All CSS transitions and animations must be neutralized under @media (prefers-reduced-motion: reduce).

Iconography System

Functional, vector-stroke icons drawn on a 24×24 pixel grid with 2.0px stroke weights and round join/cap terminations.

Style & Stroke

Outline vectors, 24×24 viewBox, 1.8px–2.2px stroke, round caps and joins, no solid fills.

Dynamic Colour

Icons always inherit currentColor so they automatically stay in sync with adjacent text.

Plate Proportions

Icons measure roughly 50% of their containing plate (24px in a 52px plate, 17px in a 34px plate).

Icon Plate Hierarchy

52px · Card Plate

52px · Sky Accent

52px · Lime ELV

34px · List Plate

26px · Inline Plate