Seddon Digital · HR Gurus · September 2026

Your design system, ready for Claude Design

The colours, fonts, spacing and button rules from the new site, packaged so Claude Design can use them. Add it once, and every page your team designs starts from the same palette and type the website runs on.

Adding it to Claude Design

  1. In Claude Design, open the design system panel and choose Import design system.
  2. Paste this link:
    https://github.com/Chiraly/hr-gurus-design-system
  3. Once it is in, set it as the design system for HR Gurus work. If your Claude admin wants to lock it so every design starts from it, that option is there too.

If the link asks you for access when you paste it, tell Hilary and she will open it up.

Why it matters

A page designed on the site's own colours, type and spacing is already most of the way to being a real page on the site. Pushing it across becomes a short step rather than a rebuild, and nothing arrives off-brand because the design never left the brand.

What is in it

PartWhat it gives Claude Design
ColoursThe six brand colours from your Preddy Creative guideline sheet, the dark teal ground and panel colours from your homepage design, and the rule for each: what may carry text, and on which surface.
TypePoppins for headings, DM Sans for body, the size ramp for both, and the reading width.
Spacing and shapeThe spacing steps, section rhythm, corner radii and layout widths the site uses.
Buttons, cards and formsHow each looks and behaves, with the measured contrast of every colour pairing, so what you design is legible by construction.

How it stays current

It is generated from the website itself, not typed up by hand. When the site's design changes, Seddon regenerates it, updates the link and lets you know to re-import. Two live references always win if anything ever disagrees: