The Blue Hierarchy

# The Blue Hierarchy

# Summary

A clean, authoritative government-inspired design system built on a bold blue-and-white palette, generous whitespace, and strong typographic hierarchy. The aesthetic communicates trust, accessibility, and civic clarity — drawing from the Queensland Government's official web presence to create a modern, service-oriented UI.

# Style

The style is defined by its institutional confidence: bold sans-serif headings, a dominant royal blue (#09549f) paired with deep navy (#003366) and crisp white (#ffffff). The design avoids decorative excess in favor of functional clarity, soft-radius cards, and diagonal geometric accents that add subtle dynamism. Every element serves a purpose — this is design that earns trust through consistency and readability.

## Spec

Create an accessible, government-grade UI with strong visual hierarchy and service-first design patterns.

- **Palette**: Primary blue (#09549f), deep navy (#003366), dark navy (#00264d) for footer/dark sections. Backgrounds alternate between white (#ffffff) and light gray (#f5f5f5). Accent blue (#0071bc) for interactive elements. Text: white (#ffffff) on dark, near-black (#232323) on light.
- **Typography**: Headlines in a geometric sans-serif ('Plus Jakarta Sans' or 'Inter', weight 700-800), with generous sizing (2.5rem–3.5rem for heroes). Body text in the same family at weight 400-500, 16-18px, line-height 1.6. All text optimized for readability with -0.01em tracking on headings.
- **The Diagonal Accent**: Key section transitions use a CSS clip-path or skewed pseudo-element to create a subtle diagonal edge (approximately 3-4 degrees), adding movement between content blocks without disrupting the institutional feel.
- **Border Radius**: Consistently soft — 12px for cards, 8px for buttons and inputs, 20px for image feature cards. Pill-shaped tags use full border-radius (9999px).
- **Micro-interactions**: Buttons use 200ms ease transitions on background-color. Cards lift with a subtle box-shadow transition (0 4px 20px rgba(0,0,0,0.08)) on hover. Links use underline-offset-4 with color transitions to accent blue.

# Layout & Structure

The structure follows a clear top-down service hierarchy: utility bar → branded header → search-forward hero → content cards → informational grid → dark footer. Generous vertical padding (80-120px per section) creates breathing room. Max content width of 1200px, centered.

## Utility Bar

Slim top bar (36-40px height) in deep navy (#00264d). Small text (13px) in white with right-aligned utility links (e.g., "Find services", "Business", "Contact us"). Acts as a trust signal and secondary navigation.

## Navigation / Header

White or light background (#ffffff), height 72-80px. Left-aligned logo/brand mark. Right-aligned primary search bar with a solid blue (#09549f) search button. Below, a secondary nav row in light gray (#f0f0f0) with a home icon and "Menu" dropdown. Clean horizontal divider (1px #e0e0e0) or subtle shadow to separate from content.

## Hero Section

Full-width blue (#09549f) background section, 50-60vh height. Large white headline (3rem-3.5rem, weight 700) left-aligned within the content container. Below the headline, a prominent search input — white background, large (56px height), with a bordered "Search" button. Beneath the input, a row of pill-shaped quick-link tags (border: 1px solid rgba(255,255,255,0.5), background transparent, white text, border-radius: 9999px) for popular searches. Optional subtle diagonal stripe pattern in the background at 5-8% opacity for texture.

## Featured Banner / Alert Section

Full-width deep navy (#003366) section with a diagonal top edge (clip-path or skew transform). Contains a bold white headline and optional hero image on the right. Used for priority announcements or campaigns. The diagonal creates visual energy while maintaining the authoritative tone.

## Content Cards Grid

White or light gray (#f5f5f5) background section. Uses a responsive grid: 2 large feature cards (with hero images, rounded corners 16-20px, blue gradient overlays) + 1 sidebar column of stacked text-only link cards. Feature cards have: image at top (aspect-ratio 16/10), padding 24-32px, bold blue headline (#09549f) with underline on hover, gray body text (#4a4a4a), and a date stamp in small muted text (#888). The entire card is clickable with a hover lift effect.

## Information / Services Grid

3 or 4-column grid of service cards on white background. Each card: white background, subtle border (1px solid #e8e8e8) or light shadow, 24px padding, an optional small icon or colored top-border accent (4px solid #09549f). Bold heading, concise description, and a "Learn more →" link in accent blue. Cards have 12px border-radius and hover shadow transition.

## Footer

Dark navy (#003366) background with white/light text. 4-column layout: Column 1 — brand name + "Contact us" with phone, social icons (simple line-style), and a bordered "Contact us" button (border: 1px solid rgba(255,255,255,0.4)). Column 2 — utility links (Help, Copyright, Privacy, Accessibility, Jobs). Column 3 — feedback prompt with a bordered "Leave your feedback" button. Column 4 — cultural acknowledgement text in slightly reduced opacity (0.85). Bottom copyright bar in smaller text. All links have underline on hover with 150ms transition.

# Special Components

## Diagonal Section Divider

A CSS technique to break up the boxy government feel with subtle angular transitions.

Use a pseudo-element (::before or ::after) with a clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%) on the receiving section, or a skewY(-2deg) transform on a wrapper. The diagonal should be subtle (2-4 degrees maximum) and always transition from a lighter section to a darker one. Ensure content within is counter-rotated or positioned to remain straight.

## Quick-Link Pill Tags

Horizontal row of interactive tag buttons for surfacing popular actions.

Each tag: display inline-flex, padding 8px 20px, border: 1px solid rgba(255,255,255,0.5), border-radius: 9999px, background: transparent, color: #ffffff, font-size: 14px, font-weight: 500. On hover: background transitions to rgba(255,255,255,0.15) over 200ms. Tags wrap naturally on smaller screens. Preceded by a bold "Popular" label.

## Feature Card with Image Overlay

Large content cards that combine photography with text information.

Container with border-radius: 16px, overflow: hidden. Image section at top with aspect-ratio: 16/10 and object-fit: cover. Optional gradient overlay (linear-gradient(to top, rgba(0,53,102,0.7), transparent)) on the image for text legibility if text is overlaid. Content padding: 28px 24px. Title in bold (#09549f or white depending on context), body in #4a4a4a at 15px, date in #999 at 13px. Entire card wrapped in an anchor tag. Hover: translateY(-2px) with box-shadow: 0 8px 24px rgba(0,0,0,0.1) over 300ms ease.

## Bordered Action Button

A secondary button style used in dark contexts (footer, banners).

Padding: 12px 28px. Border: 1px solid rgba(255,255,255,0.4). Background: transparent. Color: #ffffff. Border-radius: 8px. Font: 15px weight 600. On hover: background transitions to rgba(255,255,255,0.1), border-color to rgba(255,255,255,0.7) over 200ms. Maintains an accessible 4.5:1+ contrast ratio against dark backgrounds.