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 #FAF6EF preferred 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

Working with this skill

1. Always include colors_and_type.css (or its tokens inline) at the top of any new HTML.
2. Use Nottingham Blue as the dominant colour. If a supporting accent appears, it's an accent — under half the asset's colour weight.
3. Default border-radius to 0. This is the single most important visual deviation from generic web design. Square corners.
4. Body copy is Nottingham Blue, never black.
5. No emoji in formal communications. Acceptable on social.
6. British English throughout. Organisation, recognise, programme.
7. Sentence case for headings, navigation and buttons.