Signal is the design system for the university's digital experiences: one shared language of tokens, components and patterns, so every page communicates clearly.
Why “Signal”
Good interfaces are about clarity over noise. Signal turns a busy brand palette and years of one-off CSS into a clean, predictable stream of decisions. Every affordance should be obvious: what you can press, where you are, and what happened. The noise-to-signal waveform you will see across this site is our reminder.
Do
Make the next step obvious, with one primary action per view
Use the same component for the same job everywhere
Let the tokens carry the brand
Don't
Add decoration that competes with the content
Restyle components locally with one-off CSS
Rely on colour alone to communicate
What you get
Speed: build pages from tested components instead of starting from scratch.
Consistency: the same tokens power every component, so brand changes happen in one place.
Accessibility: WCAG 2.2 AA colour pairings, focus states and keyboard support are built in.
Theming: four on-brand colourways (Purple, Forest, Marine and Maroon) switch with a single class.
Less waste: no more 317 !important rules and 76 font sizes.
Add a theme class to <html>. Purple is the default and also applies to :root. Any element can switch colourway on its own.
HTML
<html lang="en-GB" class="sig-theme-purple">
…
<section class="sig-theme-forest">
<!-- every component in here uses the Forest colourway -->
</section>
3 · Use components and tokens
Copy markup from any story with Show code. When you write custom CSS, use only tier 2 (--sig-theme-*) and tier 3 tokens.
Caslon Doric is licensed through Adobe Fonts. Load it with the university's kit, before the Signal CSS. Signal falls back to Public Sans, then to the system sans-serif.
SCSS
Breakpoints, the size() helper, focus mixins and typography mixins ship in _tokens.scss.
Use content-brand-knockout text only on brand surfaces
Use error red 700 for error text
Accent text on white: fails
Don't
Put heliotrope, lime, sky or marigold text on white (1.3–2.4:1)
Remove focus outlines
Signal v1.0.1 · Last updated 9 November 2026
Browser support
Signal supports the last two major versions of evergreen browsers, and degrades gracefully in older ones.
Support matrix
Browser
Support
Chrome, Edge (desktop and Android)
Last 2 versions
Firefox
Last 2 versions + ESR
Safari (macOS and iOS)
Last 2 major versions
Samsung Internet
Last 2 versions
Internet Explorer
Not supported. Content still renders as unstyled HTML.
Features relied on
CSS custom properties (tokens)
:focus-visible
CSS grid and aspect-ratio
<details> and <dialog>
Signal v1.0.1 · Last updated 9 November 2026
Tone of voice
We sound warm, direct and confident, like a helpful member of staff talking to a prospective student.
Our voice
We are
So we
We avoid
Warm
write to “you” and say “we”
cold, institutional phrasing
Direct
lead with the answer
preamble and jargon
Confident
back claims with evidence
superlatives without proof
Inclusive
use plain English and avoid idioms
assumptions about background
Examples
Do
“Book your Open Day”
“You'll need 112 UCAS points”
Don't
“Click here to register your interest in attending”
“Applicants are required to possess…”
Signal v1.0.1 · Last updated 9 November 2026
Writing for the web
People scan web pages. Write so the important information is the first thing they see.
Rules
Put the most important information first
Use sentence case for headings, buttons and labels
Keep sentences under 25 words
Use lists for three or more items
Write numbers as numerals
Avoid PDFs where a web page would work
Links and buttons
Link text describes the destination
Button text starts with a verb
Never use “click here”
Signal v1.0.1 · Last updated 9 November 2026
Resources
Downloads and references for designers and developers.
Downloads
Figma
Planned A Figma library with variables that mirror the three token tiers.
Further reading
Brad Frost and Ian Frost: Subatomic: A Complete Guide to Design Tokens
W3C: Web Content Accessibility Guidelines (WCAG) 2.2
Design Tokens Community Group format specification
Signal v1.0.1 · Last updated 9 November 2026
Changelog
All notable changes to Signal. Signal follows semantic versioning.
1.0.1 · 9 November 2026
Patch
Signal wave rebuilt as a bar wave: square bars grow from a dot to full height in turn, so one peak travels left to right. Noise bars on the left jitter at random before resolving into the clean wave.
The wave uses only theme tokens (accent bars, heliotrope noise and frames) and the system's ease-in-out curve, and animates with transforms instead of layout.
Header mark and favicon updated to the bar wave. The mark runs three cycles on load and while hovered or focused, then stops on a peak so it always rests as a hill.
Intro hero redesigned: the lockup is centred with space above and below the name, the version badge sits under the tagline, the mark is removed, and the bars fade to a trail behind each peak.
Decorative elements page updated to describe and show the new wave.
Reduced motion pauses the wave in place rather than hiding it.
1.0.0 · 6 November 2026
Initial release
Three-tier token architecture with 169 definitions, 219 usage tokens and 89 component tokens
Purple, Forest, Marine and Maroon themes, all passing WCAG 2.2 AA
18 components, 8 patterns and 4 layout primitives
Signal icon set: 24 stroke icons on a 24px grid
Replaces the legacy --ehu-colors-* aliases. See the migration table under System model.
Signal v1.0.1 · Last updated 9 November 2026
Contributing
Signal grows through contributions. This is how an idea becomes a component.
Process
Check. Search Signal. Can an existing component or variant do the job?
Propose. Describe the user need, with evidence and examples.
Design. Use tokens only. Cover every state: default, hover, focus, active, disabled and error.
Build. Write semantic HTML first. Use tier 2 and tier 3 tokens, with no !important.
Test. Run axe, a keyboard walkthrough, two screen readers, 400% zoom and every theme.
Document. Add a page with a playground, stories, guidance and tokens.
Release. Add a changelog entry and the right status badge.
Definition of done
Works in all four themes
Passes WCAG 2.2 AA
Responsive from 320px up
Documented with at least one story per variant
Peer-reviewed by design and engineering
Signal v1.0.1 · Last updated 9 November 2026
Foundations
Foundations are the visual language behind every component: colour, typography, space, shape, motion and iconography. They are delivered as design tokens.
Colour is the strongest carrier of the brand. Each ramp keeps the exact brand colour at a fixed step, and the in-between steps are interpolated in OKLab so every state has a real colour.
Colour roles (tier 2)
Use colour by role, never by name. A role says what the colour is for, and each theme decides which brand colour fills it. Every tile below follows the theme selected in the toolbar, and each content role is shown on the surface it is meant for.
Background roles are surfaces. brand-knockout is the main brand surface, brand the highlight band and accent the call-to-action fill.
Content roles are text and icons. knockout and brand-knockout only sit on brand surfaces, on-accent only on accent.
Border roles cover rules, input edges and the focus ring. default-hover is the one to use for input edges, because it passes 3:1.
Aabrand#3a0c51Brand-coloured text on light surfaces
Aabrand-hover#6f2e9cLink hover
Aabrand-knockout#d883ffHighlight text on brand surfaces
Aaknockout#ffffffText on dark surfaces
Aaon-accent#3a0c51Text on accent fills
Aadisabled#767676Disabled text
Border
default#b3b3b3Inputs at rest
default-hover#767676Inputs on hover. Passes 3:1 as a non-text edge
subtle#e6e6e6Dividers and card edges
strong#1d1d1dEmphasised rules
knockout#ffffffBorders on dark surfaces
brand#3a0c51Brand rules, outline buttons, the focus ring
accent#baf02dAccent rules, stat and quote edges
disabled#e6e6e6Disabled controls
Shadow
shadow offset#d883ffSignature offset-block shadow colour. Each theme picks the colour that frames its photography.
Utility
Each utility colour comes as a set: a light tint for the background, a dark tone for text, a mid tone for the edge and a solid knockout fill. The four sets are the same in every theme.
ErrorText passes 4.5:1 on this tint
error-knockout
background#fff2ed
content#a8301b
border#c43a21
background-knockout#a8301b
WarningText passes 4.5:1 on this tint
warning-knockout
background#fef6e8
content#754a00
border#e1a113
background-knockout#ffba1b
SuccessText passes 4.5:1 on this tint
success-knockout
background#effaf1
content#1b693d
border#1e8443
background-knockout#1b693d
InfoText passes 4.5:1 on this tint
info-knockout
background#eff8fe
content#1e3ca1
border#4d75ff
background-knockout#1e3ca1
Show the full token tables
Background
Token
References
Resolves to (current theme)
Use
--sig-color-neutral-white
#ffffff
Page and card surface
--sig-color-neutral-50
#f7f7f7
--sig-color-purple-50
#fdf3ff
Tinted section surface
--sig-color-purple-100
#f6ddff
--sig-color-neutral-black
#000000
Maximum-contrast dark surface
--sig-color-purple-300
#d883ff
Highlight band, e.g. course search
--sig-color-purple-400
#b162e1
--sig-color-purple-800
#3a0c51
Primary brand surface: header, hero, cards
--sig-color-purple-700
#541d75
--sig-color-lime-300
#baf02d
Call-to-action fill
--sig-color-lime-400
#9ed122
--sig-color-neutral-200
#e6e6e6
--sig-color-transparent-25
rgba(0, 0, 0, 0.25)
--sig-color-transparent-90
rgba(0, 0, 0, 0.9)
--sig-color-red-50
#fff2ed
--sig-color-red-700
#a8301b
--sig-color-yellow-50
#fef6e8
--sig-color-yellow-300
#ffba1b
--sig-color-green-50
#effaf1
--sig-color-green-700
#1b693d
--sig-color-blue-50
#eff8fe
--sig-color-blue-700
#1e3ca1
Content
Token
References
Resolves to (current theme)
Use
--sig-color-neutral-900
#1d1d1d
Body text
--sig-color-neutral-black
#000000
--sig-color-neutral-600
#666666
Meta, captions
--sig-color-purple-800
#3a0c51
Brand-coloured text on light surfaces
--sig-color-purple-600
#6f2e9c
--sig-color-purple-300
#d883ff
Highlight text on brand surfaces
--sig-color-neutral-white
#ffffff
Text on dark surfaces
--sig-color-purple-800
#3a0c51
Text on accent fills
--sig-color-neutral-500
#767676
--sig-color-red-700
#a8301b
--sig-color-yellow-800
#754a00
--sig-color-green-700
#1b693d
--sig-color-blue-700
#1e3ca1
Border & shadow
Token
References
Resolves to (current theme)
Use
--sig-color-neutral-300
#b3b3b3
--sig-color-neutral-500
#767676
--sig-color-neutral-200
#e6e6e6
--sig-color-neutral-900
#1d1d1d
--sig-color-neutral-white
#ffffff
--sig-color-purple-800
#3a0c51
--sig-color-lime-300
#baf02d
--sig-color-neutral-200
#e6e6e6
--sig-color-red-600
#c43a21
--sig-color-yellow-400
#e1a113
--sig-color-green-600
#1e8443
--sig-color-blue-500
#4d75ff
Token
References
Resolves to (current theme)
Use
--sig-color-purple-300
#d883ff
Signature offset-block shadow colour
Brand palette (tier 1)
Each tile shows the text colour that contrasts best with the swatch (W = white, B = black), with its ratio and WCAG grade. Click a token name to copy it.
Red · 500 is maple red, 700 is the accessible error tone
50B 19.2 AAA#fff2edon white 1.1:1
100B 16.9 AAA#ffe0d7on white 1.2:1
200B 13.0 AAA#ffbcadon white 1.6:1
300B 9.8 AAA#f79883on white 2.1:1
400B 7.1 AAA#ed7159on white 3.0:1
500B 5.1 AA#e04528on white 4.2:1
600W 5.3 AA#c43a21on white 5.3:1
700W 6.8 AA#a8301bon white 6.8:1
800W 8.7 AAA#8f220fon white 8.7:1
900W 11.1 AAA#771403on white 11.1:1
Neutral · greys plus white and black
50B 19.6 AAA#f7f7f7on white 1.1:1
100B 18.4 AAA#f0f0f0on white 1.1:1
200B 16.8 AAA#e6e6e6on white 1.2:1
300B 10.0 AAA#b3b3b3on white 2.1:1
400B 6.9 AA#949494on white 3.0:1
500B 4.6 AA#767676on white 4.5:1
600W 5.7 AA#666666on white 5.7:1
700W 8.5 AAA#4d4d4don white 8.5:1
800W 12.6 AAA#333333on white 12.6:1
900W 16.9 AAA#1d1d1don white 16.9:1
whiteB 21.0 AAA#ffffffon white 1.0:1
blackW 21.0 AAA#000000on white 21.0:1
Transparent
rgba(0, 0, 0, 0.25)
rgba(0, 0, 0, 0.6)
rgba(0, 0, 0, 0.9)
Using colour
Do
Use brand-knockout surfaces for heroes and headers
Use one accent action per view
Check new pairings on the Accessibility page
Don't
Put accent, heliotrope or sky text on white
Mix colourways within one component
Use colour alone to signal state
Signal v1.0.1 · Last updated 9 November 2026
Typography
Caslon Doric is a confident grotesque with a lot of character. Signal uses it at five weights, across 16 presets in six roles.
Typography presets (tier 2)
Presets combine family, weight, size, line height, letter spacing and transform. Larger presets step down on mobile, and the switch happens at the md breakpoint. Use the utility class or SCSS mixin.
Display
Campaign headlines and hero titles. One per page at most.
There's no better way to experience what Edge Hill is really like than by seeing it for yourself.
Weight 30022px / 1.64Mobile 20px / 1.60
body-default.sig-u-typography-body-default
There's no better way to experience what Edge Hill is really like than by seeing it for yourself.
Weight 40018px / 1.56
body-sm.sig-u-typography-body-sm
There's no better way to experience what Edge Hill is really like than by seeing it for yourself.
Weight 40016px / 1.50
Meta
Tags, dates and small uppercase labels.
meta-default.sig-u-typography-meta-default
Event · 07 November
Weight 70014px / 1.43Tracking 0.0625remUppercase
meta-sm.sig-u-typography-meta-sm
Event · 07 November
Weight 70012px / 1.33Tracking 0.0625remUppercase
Primitives (tier 1)
Typography
Caslon Doric is the brand typeface. It is licensed through Adobe Fonts, so load it with the university's own kit. Public Sans is the open fallback used in this document. The stack ends in sans-serif, which fixes the serif fallback the audit found.
Space creates rhythm and groups related things. Signal uses a 4px base unit, and most layouts need only the 12, 24 and 48px steps.
Spacing scale (tier 1)
Spacing
The spacing scale is built on a 4px (0.25rem) base unit. Tokens are named by their pixel value, the same convention the course uses for type. In SCSS, size(n) returns n × 0.25rem.
00px
0.25rem4px
0.5rem8px
0.75rem12px
1rem16px
1.5rem24px
2rem32px
3rem48px
4rem64px
6rem96px
8rem128px
Spacing roles (tier 2)
Token
References
Resolves to (current theme)
Use
--sig-spacing-0
0
--sig-spacing-4
0.25rem
--sig-spacing-8
0.5rem
--sig-spacing-12
0.75rem
--sig-spacing-24
1.5rem
--sig-spacing-48
3rem
--sig-spacing-64
4rem
--sig-spacing-96
6rem
Rhythm
sm (12px): inside components, between a label and its input
md (24px): between components, and as card padding
lg (48px): between groups inside a section
xl (64px): between sections
Signal v1.0.1 · Last updated 9 November 2026
Grid & breakpoints
Layouts use a 12-column grid at desktop, 8 at tablet and 4 at mobile, inside a 1200px container.
Breakpoints
Name
SCSS
Min width
Columns
sm
$sig-bp-sm
390px
4
md
$sig-bp-md
768px
8
lg
$sig-bp-lg
1144px
12
xl
$sig-bp-xl
1500px
12 (wider gutters)
Columns at each breakpoint
The column count changes at two of the four breakpoints. Gutters stay at 24px throughout, and the outer margin grows from 24px to 48px at tablet.
Mobileup to 767px
1234
Columns
4
Gutter
24px
Margin
24px
Four columns. Most content spans all four, so the grid mainly sets gutters.
Tablet768 to 1143px
12345678
Columns
8
Gutter
24px
Margin
48px
Eight columns. A main and aside split 5 + 3, cards go two-up.
Desktop1144px and up
123456789101112
Columns
12
Gutter
24px
Margin
48px
Twelve columns inside a 1200px container. Cards go three-up, main and aside split 8 + 4.
Live grid
The highlighted row shows the columns available at the current width. The dark blocks are content, each labelled with its span at desktop, tablet and mobile. Use the viewport control in the toolbar to see them reflow.
123456789101112
Full widthmd 8 · sm 4
Main · span 8md 5 · sm 4
Aside · span 4md 3 · sm 4
span 6md 4 · sm 2
span 6md 4 · sm 2
span 4md 4 · sm 2
span 4md 4 · sm 2
span 4md 8 · sm 4
span 3md 2 · sm 2
span 3md 2 · sm 2
span 3md 2 · sm 2
span 3md 2 · sm 2
HTML
<div class="sig-grid">
<div style="--span:8; --span-md:5; --span-sm:4">Main</div>
<div style="--span:4; --span-md:3; --span-sm:4">Aside</div>
</div>
<!-- or set the column count for a nested grid -->
<div class="sig-grid" style="--sig-grid-cols-sm:2; --sig-grid-cols-md:4">…</div>
Signal v1.0.1 · Last updated 9 November 2026
Shape & elevation
Signal is square. Instead of soft shadows, elevation comes from the offset block, a hard, coloured shadow that echoes the brand's framed photography.
Primitives
Borders
Radius
0rem
0.25rem
62.4375rem
Width
0.0625rem
0.125rem
0.25rem
0.5rem
Shadows
Shadow primitives are stored as separate parts (x, y, blur, spread), as in the course. Tier 2 joins them into complete box-shadow values and supplies the colour. The offset block is EHU's signature shadow: a hard, coloured offset with no blur.
Motion explains change: it never decorates. Durations are short, easing is gentle, and everything stops when someone has asked for reduced motion.
Durations (tier 2)
Five durations cover everything. Press and fade-quick are for things people see tens of times a day, so they are near-instant. The longer two are for things that move across the screen. Press Play to run each one.
press0.1s
100msButton press feedbacktransform: translateY(1px) on :active
fade-quick0.15s
150msHover, colour and opacity changesbackground-color, color and border-color on hover
move-quick0.3s
300msDropdowns, accordions, cards liftingtransform on cards; accordion panels entering
fade-long0.4s
400msOverlays and toasts fading inopacity on dialog backdrops and toasts
move-long0.6s
600msProgress bars and page-level movementwidth on progress bars; the sidebar drawer
The scale (tier 1)
Durations are named by their value in milliseconds. Components use the tier 2 roles above, never these directly.
100ms
150ms
300ms
400ms
600ms
Easing
Built-in curves are too weak to read, so Signal ships two strong ones. Never use ease-in on an interface: it starts slowly, which delays the moment the user is watching for. Press Play to compare how each curve travels.
ease
easeHover and colour. The browser default is fine for tiny changes.
ease-out
cubic-bezier(0.23, 1, 0.32, 1)Entering, exiting and lifting. A fast start and a long settle, so it feels quick.
ease-in-out
cubic-bezier(0.77, 0, 0.175, 1)Moving while on screen: a tab indicator, a reorder, a panel sliding across.
What to use when
Interaction
Duration
Easing
Properties
Button hover (underline, invert)
fade-quick
ease
background-color, color, border-color
Button press
press
ease
transform: translateY(1px)
Card lift and media zoom
move-quick
ease-out
transform, box-shadow
Accordion panel entering
move-quick
ease-out
opacity, transform (via @starting-style)
Tooltip or dropdown
fade-quick
ease-out
opacity, transform from scale(0.97)
Modal, drawer, toast
fade-long
ease-out
opacity, transform. Exit the way it entered
Progress bar
move-long
ease-out
width (the one tolerated layout property)
Tab indicator, reorder
move-quick
ease-in-out
transform
Keyboard shortcuts, command palette
none
none
Instant. Anything used 100+ times a day never animates
Rules
Motion explains change: feedback, where something came from, or a state change. If you can't name the purpose, don't animate.
Anything used 100+ times a day, such as a keyboard shortcut or command palette, never animates.
Enter from an already-visible state: scale(0.97) and opacity: 0, never scale(0).
Use transitions, not keyframes, for anything a user can trigger twice in a second, so motion retargets instead of restarting.
Exit the way it entered. A toast that slides up leaves downwards.
Hover motion only on real pointers: wrap transform hovers in @media (hover: hover) and (pointer: fine).
A global prefers-reduced-motion rule reduces every duration to 0.01ms and stops looping animations after one cycle.
Signal v1.0.1 · Last updated 9 November 2026
Layers
Named layers replace the 16 ad-hoc z-index values found in the audit.
Layer tokens
Token
References
Resolves to (current theme)
Use
--sig-z-index-0
0
--sig-z-index-100
100
--sig-z-index-200
200
--sig-z-index-300
300
--sig-z-index-400
400
--sig-z-index-500
500
Signal v1.0.1 · Last updated 9 November 2026
Icons
The Signal icon set has 24 icons drawn on a 24px grid, with 2px square-cap strokes to match the brand's square geometry. Click an icon to copy its helper call.
Icon set
Usage
Icons support text and rarely replace it
Decorative icons get aria-hidden="true"
Standalone icons need role="img" and an aria-label
Decorative elements carry the Signal idea without competing with the content.
The signal waveform
Scattered noise settles into a steady wave: square bars that grow from a dot to full height in turn, so one peak travels across the band. Use it only in hero banners and section breaks, never behind body text.
Offset frame
An image with the offset-lg shadow in the theme's shadow colour.
Section rule
Highlights
Signal v1.0.1 · Last updated 9 November 2026
Token reference
This is every token in Signal. Filter by name and switch themes in the toolbar to see tier 2 and tier 3 values resolve.
Tested, documented and ready to use in production.
Beta
Ready to use, though the API may change in a minor release. Feedback is welcome.
New
Added in this release.
Planned
On the roadmap but not yet available.
Signal v1.0.1 · Last updated 9 November 2026
Button
Stable
Buttons let people take an action: submitting a form, starting a journey, or opening a dialog. Signal buttons are square, high-contrast and use the same weight and padding across every variant.
Use one primary button per view. Use brand or secondary for the other actions.
Use <button> for actions and <a> for navigation, with the same classes.
Group related buttons in .sig-button-group.
Never set colours on a button directly. Switch the theme or use a variant.
For content designers
Start with a verb: “Book your Open Day”, not “Open Day booking”.
Write in sentence case, with no full stop.
Keep labels under 5 words. Leave the detail to the surrounding content.
Don't repeat the same label for different actions on one page.
When to use this component
Starting a key journey, such as applying, booking or ordering a prospectus
Submitting or resetting a form
Opening a dialog or revealing content
When not to use this component
Linking to supporting information within a sentence. Use a link instead.
Listing many navigation options. Use a link grid or navigation.
Showing status. Use a tag or status indicator.
Accessibility
For content designers
Button text must make sense on its own. Avoid “Click here” and “More”.
If an icon is the only content, give it a descriptive aria-label.
For developers
The focus ring is a 4px outline in the brand colour, or marigold on dark surfaces. Never remove it.
Use aria-pressed for toggles, aria-expanded + aria-controls for disclosure and aria-haspopup for menus.
Prefer the native disabled attribute. For a link styled as a button, use aria-disabled="true" and remove the href.
The minimum target size is 48 × 48px, which is above the 24px WCAG 2.2 minimum.
Keyboard
Key
Behaviour
Tab
Moves focus to the button
Enter
Activates the button or link
Space
Activates a <button>. Links don't respond to Space.
Playground
Change the controls to update the live preview and the generated code. The preview follows the theme, background and viewport chosen in the toolbar.
Stories
Primary
Use the primary button for the single strongest action on a page. It uses the theme's accent fill: grass green in Purple and Forest, marigold in Marine and Maroon.
Show code
HTML
<button class="sig-button sig-button--primary" type="button">Book your Open Day</button>
Brand
Use the brand button for a solid secondary action, or for search and submit buttons inside highlight bands.
Filled buttons keep their fill on hover and underline the label, so the colour never darkens. Bordered buttons invert to the knockout fill. Pressing nudges the button down 1px for 100ms. The is-hover, is-active and is-focus classes exist only for documentation like this.
Text inputs let people enter a single line of text. Labels sit above the field, hints come before the input, and error messages come before the field they relate to.
If there's a limit, show a live character count announced with aria-live="polite".
For content designers
Tell people roughly how much to write.
Don't ask for the same information twice.
When to use this component
Open, multi-sentence answers
When not to use this component
Single-line answers. Use a text input.
Accessibility
For content designers
Explain any word or character limit before the field.
For developers
Throttle character-count announcements so screen readers aren't flooded.
Stories
With character count
Include your course of interest if you have one.
You have 500 characters remaining
Show code
HTML
<div class="sig-field">
<label class="sig-field__label" for="ta1">How can we help?</label>
<p class="sig-field__help" id="ta1h">Include your course of interest if you have one.</p>
<textarea class="sig-field__input sig-field__input--textarea" id="ta1" aria-describedby="ta1h ta1c" maxlength="500"></textarea>
<p class="sig-field__count" id="ta1c" aria-live="polite">You have 500 characters remaining</p>
</div>
Design tokens
These are the tier 2 and tier 3 tokens this component uses. Values update with the theme.
Token
References
Value (current theme)
--sig-theme-color-background-default
#ffffff
--sig-theme-color-border-default-hover
#767676
Signal v1.0.1 · Last updated 9 November 2026
Select
Stable
A select lets people choose one option from a long list. Use it sparingly. Radios are usually clearer for seven options or fewer.
Over imagery, use the brand tag and inset it by sm so it reads as part of the card.
Open DayShow code
HTML
<span class="sig-fpo" role="img" aria-label="Students in the library" style="display:block;position:relative;aspect-ratio:16/9;max-width:24rem">
<span class="sig-tag sig-tag--brand" style="position:absolute;left:var(--sig-theme-spacing-sm);top:var(--sig-theme-spacing-sm)">Open Day</span>
</span>
Design tokens
These are the tier 2 and tier 3 tokens this component uses. Values update with the theme.
Token
References
Value (current theme)
--sig-theme-color-background-default
#ffffff
--sig-theme-color-content-brand
#3a0c51
--sig-theme-color-background-brand-knockout
#3a0c51
Signal v1.0.1 · Last updated 9 November 2026
Notification
Stable
Notifications communicate a message about the page, a task or the system. Each one has an icon, a title and a short message, and only one should be visible per region.
These are the tier 2 and tier 3 tokens this component uses. Values update with the theme.
Token
References
Value (current theme)
--sig-color-purple-800
#3a0c51
--sig-theme-color-content-brand
#3a0c51
Signal v1.0.1 · Last updated 9 November 2026
Accordion
Stable
An accordion shows and hides sections of related content, such as module lists and FAQs. It is built on native <details>, so it works without JavaScript.
<ol class="sig-steps">
<li data-state="done">Your details</li>
<li data-state="done">Choose a course</li>
<li aria-current="step">Upload documents</li>
<li>Review and submit</li>
</ol>
Design tokens
These are the tier 2 and tier 3 tokens this component uses. Values update with the theme.
Token
References
Value (current theme)
--sig-color-purple-800
#3a0c51
--sig-color-lime-300
#baf02d
Signal v1.0.1 · Last updated 9 November 2026
Status indicator
New
The status indicator is a Signal original. Signal-strength bars plus a text label communicate the state of a service at a glance: operational, degraded, outage or maintenance.
Give one number per stat, with a short label and a source.
Round numbers sensibly, and don't mix formats.
When to use this component
Evidence on course and landing pages
Course facts
When not to use this component
Data that needs comparing. Use a table or chart.
Accessibility
For content designers
Write the number as people would say it, for example “97%”, not “97 per cent”.
For developers
The visual size of the number doesn't change its heading level. Don't use heading tags for numbers.
Playground
Change the controls to update the live preview and the generated code. The preview follows the theme, background and viewport chosen in the toolbar.
Stories
Stat
97%of our graduates are in work or further study within 15 monthsGraduate Outcomes 2024
Show code
HTML
<div class="sig-stat">
<span class="sig-stat__value">97%</span>
<span class="sig-stat__label">of our graduates are in work or further study within 15 months</span>
<span class="sig-stat__source">Graduate Outcomes 2024</span>
</div>
Use <figure>, <blockquote> and <figcaption>, or blockquote with a footer.
For content designers
Keep quotes short, under 40 words.
Always attribute: name, course and year.
When to use this component
Student and staff testimonials
When not to use this component
Decorative emphasis of ordinary copy
Accessibility
For content designers
Don't put quote text in images.
For developers
The quote marks are typographic, not decorative images.
Stories
Testimonial
“The placements gave me the confidence to start my career straight after graduation.”
Show code
HTML
<blockquote class="sig-quote">
<p>“The placements gave me the confidence to start my career straight after graduation.”</p>
<footer><cite>Amira Khan</cite>, Midwifery BSc (Hons), 2025</footer>
</blockquote>
Design tokens
These are the tier 2 and tier 3 tokens this component uses. Values update with the theme.
Token
References
Value (current theme)
--sig-color-lime-300
#baf02d
--sig-color-purple-800
#3a0c51
Signal v1.0.1 · Last updated 9 November 2026
Table
Stable
Tables present data people need to compare. Signal tables have a brand header and subtle row striping.
<section class="sig-hero">
<div class="sig-hero__body">
<h1 class="sig-hero__title">Don't miss our last Open Day of the year</h1>
<p class="sig-hero__text">There's no better way to experience campus life than seeing it for yourself. Join us on Saturday 21 November 2026.</p>
<a class="sig-button sig-button--primary sig-button--on-knockout" href="#">Book your Open Day <svg class="sig-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true" focusable="false"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a>
</div>
<span class="sig-fpo sig-hero__media" role="img" aria-label="Students walking across campus"></span>
</section>
Guidance
Write the headline as a benefit or invitation, in under 10 words
Use one primary button
Image alt text describes the scene, unless the image is decorative
Design tokens
Token
References
Value (current theme)
--sig-color-purple-800
#3a0c51
--sig-color-neutral-white
#ffffff
Signal v1.0.1 · Last updated 9 November 2026
Course search
Stable
Course search is the most important task on the site, so it sits in a heliotrope highlight band.