Case study
A basic card: badge, heading, one short paragraph, one link out — never more than one action.
Read the full story
Blue Unicorn Digital
Design System — Foundations
The colour, type, spacing, radius, shadow and icon tokens every site, app and CRM screen we build should be built from. Mobile-first, flexbox-based, WCAG AAA where practical.
Colour
One deep, AAA-safe primary blue, a near-black navy for depth, and a thistle purple accent used sparingly for highlights and calls to action. Body text sits at 22.7:1 contrast on white — well past AAA. Text Secondary sits at 10.7:1. Primary and Accent both hold 8:1+ with white button labels, not just the 4.5:1 AA minimum.
Brand
Primary
#004E8C
Primary Dark
#003D6B
Primary Light
#D6E9F8
Secondary Navy
#0A1F44
Accent Thistle
#5D3F97
Neutral
Neutral 50
#F8FAFC
Neutral 100
#F1F5F9
Neutral 200
#E2E8F0
Neutral 300
#CBD5E1
Neutral 400
#94A3B8
Neutral 500
#64748B
Neutral 600
#475569
Neutral 700
#334155
Neutral 800
#1E293B
Neutral 900
#0F172A
Semantic
Success
#16A34A
Warning
#D97706
Error
#DC2626
Info
#0284C7
Surface & Text
Surface
#FFFFFF
Background
#F8FAFC
Text Primary
#0F172A
Text Secondary
#334155
Border
#E2E8F0
Focus Ring
#5D3F97
Link example: this is a link in default, hover, visited and focus states — try tabbing to it to see the focus ring.
Typography
Plus Jakarta Sans for headings — distinctive and modern without being loud. Inter for body copy — built for screen legibility at small sizes. Line length capped near 65 characters for easy reading.
Heading One
Heading Two
Heading Three
Heading Four
Body text sits at 17px with a relaxed 1.65 line-height and a maximum width of around 65 characters, so paragraphs stay easy to scan on any device.
Small text — captions, labels, helper and metadata text.
Spacing
An 8-point scale (with a single 4px half-step). Every margin, padding and gap comes from this list — never a random value.
space-1 · 4px
space-2 · 8px
space-3 · 16px
space-4 · 24px
space-5 · 32px
space-6 · 48px
space-7 · 64px
space-8 · 96px
space-9 · 128px
Radius
Rounded corners scale with component size — small on inputs and tags, large on cards and modals, pill or circle for actions and avatars.
None
0px
0px
Small
4px
4px
Medium
8px
8px
Large
12px
12px
XL
16px
16px
Pill
999px
999px
Circle
50%
50%
Shadow & Elevation
Four elevation levels, all a soft navy-tinted shadow rather than pure black, so surfaces feel like part of the same system as the colour palette.
shadow-sm
shadow-md
shadow-lg
shadow-xl
Icons
Font Awesome Free (solid) is the standard icon library — a real, licensed icon set rather than a generic outline pack, so it reads as intentional rather than default AI-template output. Icons support text; they never replace it. Sizes: 16 / 20 / 24 / 32px.
Also on this page: every colour meets its stated contrast ratio, all interactive elements show a visible focus ring, and the whole layout is built with flexbox — no CSS grid — so it degrades predictably at any width. Motion is intentionally left out of this v1: any animation added later must respect prefers-reduced-motion.
Buttons
Hover does three things at once: the fill shifts to accent thistle (or fills solid on outline styles), the label flips to white where needed for contrast, and a Font Awesome arrow eases in — one motion, not three separate afterthoughts. Try it.
Primary
Secondary
Tertiary / Ghost
Outline
Danger
Link & icon
Full width
Buttons are built as links styled to look and behave like buttons — the same pattern used for CTAs across the site. A form's submit button uses the native Button element instead, covered in the Forms stage.
Inputs & Selectors
Every field pairs a visible label with helper or error text — never a placeholder alone. These are visual specs for the pattern; live forms are wired up with real, keyboard- and screen-reader-tested fields when a page needs one.
Full name
Jamie Reid
As it should appear on your quote.
Work email
jamie@
Enter a complete email address, like you@company.com.
Account ID
Assigned automatically
Read-only once your account is created.
Project details
Tell us what you're building…
Service
Web design & development
Checked
Focus, error and disabled states use the same colour and radius tokens as everywhere else on this page — nothing field-specific, nothing new to remember.
Cards
One purpose per card, a folded-corner badge instead of a generic top image, and a lift-and-tilt on hover rather than a flat colour swap. Same radius, shadow and spacing tokens as the rest of the page — the personality is in the details, not new rules.
Fast by default
A feature card: badge first, then a short benefit-led title and a sentence of supporting text. No CTA needed.
Most popular
Growth
£85
/month
- 5-page site, fully responsive
- Local SEO setup
- Monthly maintenance
"Blue Unicorn rebuilt our site and CRM in under a month — bookings are up and everything just works."
JR
Jamie Reid
Owner, Reid & Co
Badges, Tags & Status
Small, high-contrast labels for state and metadata. Never rely on colour alone — every one pairs colour with text.
Badges
Live
In review
Failed
New
Draft
Tags
Web design
CRM
AI Automation
Status
Online
Offline
Pending
Error
Alerts, Banners & Toasts
Alerts sit inline with content, banners span the page for site-wide notices, toasts confirm an action briefly without blocking the page. Toasts use the same tinted palette as alerts — a floating shadow signals "temporary," not a louder colour.
Alerts
SavedYour changes have been published.
Domain expiring soonRenew blueunicorndigital.com within 14 days to avoid downtime.
Payment failedWe couldn't process your card. Update your billing details to keep your site live.
Scheduled maintenanceBrief downtime expected Sunday 2–3am.
Banner
Toasts
Message sent — we'll reply within one business day.
Link copied to clipboard.
Hero
Full-bleed by design — the hero breaks out of the page's contained width to run edge-to-edge, with the content itself staying inside the same 1200px reading measure as everything else.
Web · App · AI · Software
Digital work built properly, from Glasgow
Websites, apps, CRMs and AI automation for businesses who are tired of templates that don't hold up. Blue Unicorn Digital designs and builds the whole thing — fast, accessible, and yours to grow.
Paisley & Glasgow based
WCAG AAA-minded builds
Fast turnaround
Services
A contained grid — not full width like the hero — with one icon colour per tile rotating through the brand palette so the row reads as a set, not four identical boxes.
Web Design & Development
Fast, accessible, AAA-minded websites built from scratch — no page-builder template underneath.
Apps & Software
Custom web apps and portals for the exact workflow your business runs on — not a generic SaaS shape.
AI & Automation
Practical AI: automating the repetitive parts of the business, not bolting on a chatbot for the sake of it.
CRM & Business Systems
Bespoke CRMs and back-office tools that fit how you already work, connected to the rest of your stack.
Stats band
Honest differentiators only — no fabricated client counts or made-up numbers, since we don't have a client roster yet.
100%
Mobile-first & accessible by default
<48h
Typical first response time
1:1
Direct contact with the person building it
0
Templates used — everything built from scratch
CTA band
Full width like the hero, but shorter and calmer — one message, one action, closing tone rather than opening tone.
Ready to get started?
Tell us what you're building — we'll get back to you within 48 hours.
Get a free audit
Footer
Full width navy footer with real Font Awesome social icons (LinkedIn, Instagram, Facebook) rather than emoji or default icon sets.
Contact form
Visual spec reusing the field patterns from Inputs & Selectors. Native form elements are dropped by this build tool, so the live version is wired up separately with real, keyboard- and screen-reader-tested fields.
FAQ
Static list for now. Real expand/collapse behaviour needs Oxygen's native accordion element (not this HTML-import path) — flagged as a follow-up when the live page gets built.
How is Blue Unicorn Digital different from other agencies?
Direct access to the person building your project — no account managers, no handoffs. Everything built from scratch for what your business actually needs.
Do you work with businesses outside Glasgow and Paisley?
Yes — based in Paisley/Glasgow, but we work with clients across Scotland and the UK remotely.
How long does a typical project take?
Depends on scope — a marketing site is usually a few weeks, custom apps or CRMs longer. You'll get a clear timeline before anything starts.
Do you offer ongoing support after launch?
Yes — hosting, maintenance and support arrangements are agreed up front as part of the project, not an afterthought.