Nottingham Design Skill
Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
Quick reference
- Brand: University of Nottingham (UoN). UK, China (UNNC) and Malaysia (UNMC) campuses.
- Tagline: "A world beyond ordinary."
- Voice: Inquisitive, warm, refined, spirited. First-person plural ("we"). British English.
- Primary colour: Nottingham Blue
#10263B— must be dominant in every composition. - Supporting accents: Max 2 per asset — Jubilee Red
#B91C2E, Mandarin Orange#F98109, Rebel's Gold#DEB406, Pioneering Pink#D7336C, Civic Purple#792D85, Forest Green#005F36, Bramley Apple#93D500, Trent Turquoise#37B4B0, Malaysia Sky Blue#009BC1. - Neutrals: Portland Stone
#FAF6EFpreferred over pure white as digital background. - Type: Circular Pro for Latin (substituted with Manrope when no licensed files), HarmonyOS Sans SC for Simplified Chinese (UNNC), Lora for editorial flourish.
- Shapes: Squares. Border-radius defaults to 0; max 4–8px on cards / inputs.
- No black anywhere — body copy is set in Nottingham Blue.
Files in this skill
| File | Purpose |
|---|---|
README.md |
Full brand context, content fundamentals, visual foundations, iconography |
colors_and_type.css |
All design tokens as CSS variables — drop into any HTML file |
assets/ |
Logos, marks, illustration placeholder |
fonts/ |
Circular Std, HarmonyOS Sans SC |
preview/ |
Static card examples of every token group — handy as design reference |
ui_kits/website/ |
Pixel-leaning recreation of the public marketing site, with reusable JSX components |
Working with this skill
- Always include
colors_and_type.css(or its tokens inline) at the top of any new HTML. - Use Nottingham Blue as the dominant colour. If a supporting accent appears, it's an accent — under half the asset's colour weight.
- Default border-radius to 0. This is the single most important visual deviation from generic web design. Square corners.
- Body copy is Nottingham Blue, never black.
- No emoji in formal communications. Acceptable on social.
- British English throughout. Organisation, recognise, programme.
- Sentence case for headings, navigation and buttons.
