# Architectural Clarity - design and interaction specification

## Visual direction

An ivory masthead leads into a navy editorial hero. A pale-mint italic phrase, a large architectural portal, fine brass contours and a teal primary action create one coherent signature. The subsequent page alternates ivory, white, blue-grey and navy, instead of giving every section the same background and card treatment.

Original assets are reused, not represented as photographs of the office or real operating facilities. The hero retains a conceptual-illustration caption. Thin SVG pathways and thresholds are decorative and hidden from assistive technology.

## Palette

| Token | Value | Use |
|---|---|---|
| Navy | #16324F | Hero, prominent sections, headings, brand |
| Ivory | #F7F2EA | Editorial canvas, light panels |
| Teal | #147D76 | Primary CTA backgrounds and selected pathway |
| Teal ink | #116B65 | Small teal text on light surfaces; darker derivative for contrast |
| Blue-grey | #E8EEF5 | Process section and selected service |
| Mint | #B8E3DB | Supporting emphasis on navy |
| Brass | #B58A4A | Decorative strokes and dots, not light-background body text |
| Charcoal | #17212B | Primary body text |
| Muted ink | #536472 | Secondary text on white/ivory |
| White | #FFFFFF | Text on teal, form and resource surfaces |

Do not use ivory text on teal for small labels; use white. Do not use brass for essential small text against ivory. Visual contrast checks in the QA report are calculated colour-pair checks, not a complete rendered contrast audit.

## Typography and rhythm

Source Serif 4: editorial headlines, quotes, service titles. Inter: body, navigation, buttons and annotations. No font files are bundled. Fallbacks are defined.

Desktop header: 80px. Small-screen header: 68-72px. The desktop header becomes fixed only after 160px and only when its height is no more than 15% of the visible viewport. A reserved slot prevents a layout jump. Small-screen sticky behaviour is disabled.

Desktop content: maximum 1240px, with a dedicated outside margin for the 54px contact rail. Narrow-screen gutters: 18-24px. Section spacing: usually 52-96px. Larger headline sizes are reduced by viewport rather than forced into fixed-height containers.

## Component library

1. **Portal hero:** responsive image with preserved aspect, optical arch crop, fine offset path, compact editorial caption and overlapping annotation card. No text rendered into the image.
2. **Starting-point selector:** three native buttons with `aria-pressed`, supporting line-art illustrations and a contextual detail panel. The result is orientation only, not an assessment or questionnaire scoring system.
3. **Service explorer:** four buttons update one adjacent visual detail panel. All selections remain keyboard-operable; updates have brief polite announcements. Its CTA presets only a general inquiry category.
4. **Human-led practice section:** an abstract architectural quote panel beside ownership-based copy. No synthetic portrait, invented biography or testimonial presentation.
5. **Connected process:** three numbered stages connected by a drawn route. On mobile the route becomes a simple vertical line. The stages are a working approach, not a promise about government outcomes.
6. **Employer feature:** navy panel, structured network illustration, three responsibility tags and a clearly employer-specific CTA. No recruitment implication.
7. **Reference cards:** actual official source links; no invented articles, publication dates or trust logos.
8. **FAQ:** native `details` / `summary` controls, no auto-opening carousel.
9. **Contact panel:** human introductory copy and a clearly labelled demonstration form. A visible warning says to use fictional information only. No data is transmitted or persisted.
10. **Footer:** full navigation, languages, contact email, prototype/legal controls, service boundary, disclaimer and a large decorative wordmark.

## Motion specification

- Hero contour: one draw animation, 2.7 seconds, then stationary.
- Process route: one 1.7-second draw when the section enters view.
- CTA arrow: one 1.9-second invitation on page load, no repeating pulse.
- Button/arrow hover: small displacement, typically 2-3px.
- Image depth: fine-pointer-only tilt, under one degree each direction; no moving text or controls.
- Reading indicator: updated only on user scroll.
- Service/path selection: a 650ms border emphasis, not a large panel movement.
- No autoplay video, continuously running carousel, sound, particle swarm, fake availability counter or urgency timer.

Pause effects is available at the top and in the footer. The operating system's reduced-motion preference takes precedence. The implementation disables non-essential animation and hover displacement when requested. Text and primary content are never hidden awaiting an observer.

References: W3C Understanding SC 2.2.2, https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html ; W3C Understanding SC 2.3.3, https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html .

## Persistent CTA

At wide widths it occupies an outside gutter; on narrow screens it becomes a compact safe-area-aware bottom bar. It is available by default and can be minimized. It yields to the mobile menu, dialogs, likely on-screen keyboard, demonstration form and overlapping focused controls. It does not hide a control that already holds focus.

The CTA goes to an initial-inquiry section, not to a booking calendar. In this preview even that form is a local demonstration. Actual booking should remain disabled in staging.

## Copy principles

Lead with a person's intent: a future, a family, a question, an employer's responsibility. Offer an understandable next action, not better approval odds. Do not equate hiring a representative with a favourable result. Do not create fear, scarcity, deadlines or unavailable appointment slots for persuasion.

Ownership is described without stereotyped imagery. Exact professional status must be verified separately. All credentials, policies, prices, response-time promises and booking availability remain excluded unless confirmed.