Planning Direct

Web Styleguide

Brand applied to the web build: League Spartan type scale, the PD palette, and a basic component set. Treatments where the brand guide is silent are our proposals, drawn from the guide's stated intent.

Status: proposed, pending Damian's sign-off. Amber and red status colours, the neutral grey ramp, button treatment and radii are our suggestions to confirm or adjust.

Brand Colours

PD Dark Green
Primary
#196131
PD Navy
Secondary (co-primary in guide)
#00416A
PD Rich Green
Accent
#53B478
PD Pale Green
Surface (light)
#82B29B
PD Chalk
Surface (off-white)
#F6FCF9

Tints follow the guide as opacity percentages of the base colour. PD Dark Green is never tinted per the guide.

Neutrals (proposed UI ramp)

Grey 100
Backgrounds, disabled fill
#F2F3F4
Grey 300
Input borders
#C8CCD1
Grey 500
Brand eyebrow grey
#9D9D9C
Grey 700
Muted text
#5F656D

Status Colours

Success
= PD Rich Green (on-brand)
#53B478
Warning
Proposed amber
#E0991E
Error
Proposed red
#C0392B
Info
= PD Navy
#00416A

Success uses the brand bright green with its 20% tint as the surface. Amber and red are our proposals for Damian's approval - chosen to sit calmly with the green/navy palette rather than shout.

Typography

h1.mega · 96/100 · -2px · Bold 700

Clarity, by design

h1 · 64/68 · -1.5px · Bold 700

Main page heading

h2 · 44/48 · -0.5px · Semibold 600

Section heading

h3 · 28/40 · 0 · Semibold 600

Sub-heading

body · 16/24 · 0 · Regular 400

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, with a visible inline example link sitting in the accent green, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

caption · 12/16 · 0 · Medium 500

Figure 1. Caption text for images, tables and figures.

Buttons

Primary CTA is the bright green (PD Rich Green), deepening to PD Dark Green on hover. Accessibility flag: white on the resting bright green is around 2.4:1, below the 4.5:1 AA target for body-size text - fine for large/bold labels, but worth either nudging the resting green slightly darker or confirming with Damian.

Surfaces

Card

Chalk background, dark ink, a 1px Pale Green hairline border and an 8px radius.

Call-out

Rich Green accent bar on its 20% tint - the guide's use for "drawing attention to call-out boxes".

Feature panel

Navy background with Chalk text for sidebars and feature blocks. Larger 16px radius.

Alerts & Status Messages

Success. Your answers have been saved.
Heads up. A couple of fields still need attention before you continue.
Something is missing. Please add a valid postcode to continue.
For reference. Permitted development rules vary by property type.

Form Field (with focus + error states)

Tab to this field to see the focus ring.

That postcode does not look complete.

Corner Radii (4px grid)

4px tight
8px default
16px large