Gradient Ledger - Premium Visual Direction System

Contrast checked across 3 proof surfaces

Restraint with depth.

A cinematic gradient field behaves like a material sample, not a backdrop. Drag the focus point to tune the system artifact.

Primary gradient#0F8F7B -> #221E1A

Contrast floor4.8:1 body text on warm paper

Motion rule12s drift, paused for reduced motion

Select a proof module to populate section-level layout guidance.

Northline Studio visual direction system

Draft 01

92Premium fit score

4.8Minimum contrast ratio

Purpose

Create a credible gradient visual system for an agency product that helps design leads align campaign, deck, and interface direction before production.

Layout

Open with an editable client brief beside a live gradient material specimen.
Keep proof modules directly under the artifact so visual decisions are tested immediately.
Use the right panel as the final structured brief, not a marketing aside.

Visual system

Interaction states

Selected: dark tab or teal-tinted proof with top rule.
Hover: one-pixel lift on commands, warm paper shift on proof modules.
Disabled: copy remains inactive until the brief has been compiled.
Loading: status indicator pulses while token scoring runs.
Error: low accent strength exposes contrast guidance inline.

Responsive behavior

Desktop uses a three-zone studio bench. Tablet stacks inputs, artifact, and brief. Mobile keeps compile and proof selection visible, then turns proof modules into full-width controls.

Implementation constraints

Use internal CSS variables for tokens, accessible focus states, no negative letter spacing, and reduced-motion support for canvas drift.