Switch between the rendered Visual preview and the Raw DESIGN.md.
The Stellenbosch University design system embodies institutional prestige tempered with forward-thinking accessibility. It balances deep, sophisticated burgundy and purple tones with warm gold accents, creating an atmosphere of heritage, academic excellence, and transformation. The aesthetic draws from the university's South African context, incorporating generous whitespace, contemporary typography, and purposeful use of imagery to convey community, leadership, and inclusive progress. The design language communicates authority while remaining approachable, leveraging strong contrast and deliberate color orchestration to guide users through complex institutional content.
Key Characteristics
#61223B): Core brand color used across navigation, buttons, and key interactive elements; represents institutional authority and tradition#420083): Secondary primary used for accent highlights, hover states, and emphasis; provides visual hierarchy differentiation#280050): Deepest primary for prominent headings and critical CTAs; maximum visual weight#CAA258): Warm, aspirational highlight for call-to-action buttons, secondary navigation links, and decorative elements; communicates transformation and forward momentum#BBAACC): Soft purple used for subtle backgrounds, borders, and muted interactive states; provides visual softness#480922): Darkest burgundy variant for extreme contrast on white backgrounds or premium content sections#A60A3D): Interactive hover state for purple elements; provides warm, energetic feedback#303133): Primary text color for body copy, labels, and standard content; high contrast and readability#FFFFFF): Primary surface and text color on dark backgrounds#000000): Maximum contrast text and definitive borders#8E9294): Secondary text, disabled states, and subtle dividers#E6E6E6): Fine borders, dividing lines, and subtle separation#ECEFF1): Subtle off-white backgrounds for cards and containers#EBEAEA): Alternative light surface for layered content#F3F8FD): Cooler light background for forms and input areas; provides visual distinction from neutral white#BE0606): Primary error state for validation, alerts, and destructive actions#DC4405): Secondary error indicator for warnings and cautions#FFF200): Warning state for cautionary messages and alertsPrimary: SU Raleway, Raleway, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Secondary: AIOA Rubik, Rubik, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif
Monospace (Code): Courier New, monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display H1 | SU Raleway | 61px | 700 | 72px | 0px | Hero headlines, page titles |
| Heading H2 | SU Raleway | 12px | 600 | 12px | 0px | Micro-headings, badges |
| Heading H3 | SU Raleway | 25px | 700 | 32px | 0px | Section subheadings |
| Heading H4 | SU Raleway | 12px | 300 | 14px | 0px | Secondary headings, refinement |
| Heading H5 | SU Raleway | 19px | 500 | 22px | 0px | Tertiary headings, labels |
| Heading H6 | SU Raleway | 18px | 500 | 19px | 0px | Minor headings, footer titles |
| Body Large | SU Raleway | 18px | 400 | 24px | 0px | Primary body text, content |
| Body Label | SU Raleway | 16px | 400 | 21px | 0px | Form labels, input descriptions |
| Button | SU Raleway | 16px | 400 | 16px | 0px | Call-to-action text |
| Link Primary | AIOA Rubik | 18px | 400 | 23px | 0px | Interactive link text |
| Link Small | AIOA Rubik | 15px | 400 | 19px | 0px | Footer and secondary links |
| List Item | SU Raleway | 18px | 600 | 24px | 0px | List content with emphasis |
| Caption | SU Raleway | 12px | 400 | 16px | 0px | Image captions, footnotes |
#61223B#FFFFFF16px 20px32px16px52px (minimum)#420083, transform scale 1.02#280050#BBAACC, text #8E9294#FFFFFF#30313316px 20px3px solid #61223B32px16px52px (minimum)#F3F8FD, border color #420083#ECEFF1, border color #2800503px solid #BBAACC, text #8E9294transparent#61223B12px 16px2px solid transparent8px16pxrgba(193, 34, 59, 0.08), border 2px solid #61223Brgba(193, 34, 59, 0.16)2px solid #CAA258#CAA258#FFFFFF16px 20px8px16px52px (minimum)#B8934B, transform translateY -2px#A682390px 8px 16px rgba(202, 162, 88, 0.24)#61223B#FFFFFF50%65px65px#420083, transform scale 1.08#280050#FFFFFF#30313318px0px1px solid #E6E6E60px 2px 8px rgba(0, 0, 0, 0.08)0px 6px 16px rgba(0, 0, 0, 0.12), transform translateY -2pxlinear-gradient(135deg, #61223B 0%, #420083 100%)#FFFFFF52px 40px0px0px 12px 32px rgba(0, 0, 0, 0.16)300pxrgba(97, 34, 59, 0.88)#FFFFFF28px 32px0px 0px 36px 0pxblur(8px)1px solid rgba(255, 255, 255, 0.16)#FFFFFF#3031331px solid #E6E6E60px12px 16px40px2px solid #61223B, box shadow 0px 0px 0px 3px rgba(193, 34, 59, 0.12)2px solid #BE0606, background rgba(190, 6, 6, 0.04)#8E9294#FFFFFF#3031330px12px 12px 12px 54px40pxinset 0px 0px 0px 1px #E6E6E612px left, size 24pxinset 0px 0px 0px 2px #61223B#FFFFFF#3031331px solid #E6E6E60px16px120px2px solid #61223B, box shadow 0px 0px 0px 3px rgba(193, 34, 59, 0.12)#3031338px* in #BE0606#61223B72px#FFFFFF0px 40px0px 2px 8px rgba(0, 0, 0, 0.1)#CAA258, border-bottom 3px solid #CAA258#BBAACC, transition color 150ms easergba(0, 0, 0, 0.04)#30313316px 0px1px solid #E6E6E61px solid #E6E6E6#61223B, text-decoration underline#8E9294/ in #8E9294#303133#61223B, text-decoration underline#303133#FFFFFF40px#CAA258, transition color 150ms easergba(255, 255, 255, 0.72)#61223B#FFFFFF6px 12px12px#61223B#420083#CAA258, text color #303133#2D7C3D, text #FFFFFF#BE0606, text #FFFFFF#FFF200, text #303133Base Unit: 4px
Scale Sequence: 4px, 8px, 12px, 16px, 20px, 28px, 32px, 36px, 40px, 44px, 52px, 56px, 64px, 72px, 80px
Usage Context:
4px – Micro-adjustments, icon spacing, tight component padding8px – Dense UI, icon padding, minimal spacing12px – Form label spacing, caption margins16px – Standard padding, button internal spacing20px – Card padding, section spacing28px – Gap between heading and subtext32px – Container padding, moderate section margins36px – Gap between major content blocks40px – Large padding, page section margins44px – Vertical rhythm for stacked sections52px – Hero section padding, major vertical spacing56px – Full page margin, max spacing between sections1400px (full desktop content area)40px on desktop, 28px on tablet, 16px on mobile24px (desktop), 20px (tablet), 16px (mobile)The design system prioritizes generosity with space to convey institutional confidence and aid cognitive processing. Minimum spacing between major content sections is 40px vertically; spacing between related elements is 20px. Negative space functions as a design element, not merely the absence of content. Margins are always larger than padding to create clear breathing room between major layout zones.
0px – Buttons, cards, inputs (modern angular aesthetic)8px – Ghost buttons, secondary containers12px – Badge elements, small pill shapes18px – Image corners (subtle softening)32px – Primary buttons, emphasized CTAs36px – Image bottom corners (curved hero treatment)50% – Icon buttons, avatar circles, perfect roundness| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, box-shadow: none | Cards on neutral background, form inputs, primary navigation |
| Elevation 1 | 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, subtle hover lift |
| Elevation 2 | 0px 6px 16px rgba(0, 0, 0, 0.12) | Hovered cards, dropdown menus, floating actions |
| Elevation 3 | 0px 12px 32px rgba(0, 0, 0, 0.16) | Modals, hero cards, prominent overlays |
| Elevation 4 | 0px 20px 48px rgba(0, 0, 0, 0.20) | Dialog boxes, expanded modals, z-index apex |
| Inset Focus | inset 0px 0px 0px 2px #61223B + 0px 0px 0px 3px rgba(193, 34, 59, 0.12) | Focused form inputs, keyboard navigation |
Shadow Philosophy: Shadows are reserved and subtle, prioritizing clarity over depth. Most components use no shadow by default. Elevation 1 is appropriate only for interactive hover states or layered cards. Modals and critical overlays employ Elevation 3–4. All shadows use rgba(0, 0, 0, 0.x) with opacity-based darkening to remain compatible with any background color.
#61223B) for all primary CTAs and main navigation elements#CAA258) as a warm accent to highlight secondary actions and draw attention to opportunities for forward movement16px font size for all interactive text; body text must be 18px or larger52px minimum vertical spacing between major content sections1px borders (#E6E6E6) for standard cards to maintain clarity20px) inside containers to ensure comfortable whitespace2px solid #61223B border outline#000000) for body text; rely on #303133 for maximum legibility and sophistication12px in form inputs or 16px in button text areas32px on buttons or smaller than 0px on cards without explicit justification3px border width on outlined buttons; maintain visual elegance with thin, defined strokes28px of vertical space between a heading and its supporting paragraph#61223B) or white (#FFFFFF) palette without brand approval| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px – 767px | 4-column grid, 16px container padding, font sizes reduced 2–4px, navigation collapses to mobile menu, stack all sections vertically, buttons full width |
| Tablet | 768px – 1023px | 6-column grid, 28px container padding, 24px gutter, navigation remains horizontal, cards display in 2-column grid, buttons remain fixed width but justified |
| Desktop | 1024px – 1399px | 12-column grid, 40px container padding, 24px gutter, full navigation visible, cards in 3+ column layout, max width applied |
| Large Desktop | 1400px and above | Full 12-column grid maintained, max width container (1400px) centered, increase section spacing to 56px, scale typography up 4–8% |
44px × 44px (all interactive elements on mobile)52px height (minimum), 20px horizontal padding16px line height with minimum 6px vertical padding above and below44px height, spaced minimum 12px apart horizontally40px height (mobile), 48px (touch-optimized variants)52px × 52px minimum on mobile, 65px × 65px on desktop8px to prevent accidental taps500px to 300px to 200px40px → 28px → 16px as viewport shrinks61px (desktop) to 36px (tablet) to 28px (mobile); body text 18px → 16px → 14pxwidth: 100%), fixed width on tablet/desktop12px padding; centered boxes with max 600px width on desktop#61223B)#61223B)#CAA258)#303133)#F3F8FD)#FFFFFF)#61223B)#61223B)#FFFFFF)#BE0606)#BBAACC)0px 6px 16px rgba(0, 0, 0, 0.12))#61223B), white text (#FFFFFF), 16px padding vertical/horizontal (16px 20px), 32px border radius, no border, minimum 52px height#FFFFFF), dark text (#303133), 3px solid #61223B border, 32px radius, 16px 20px padding, no shadow#61223B), white text (#FFFFFF), 18px font size, 72px height on primary header#61223B), links on dark backgrounds are white (#FFFFFF); never use default blue#FFFFFF), thin 1px solid #E6E6E6 border, 12px 16px padding, 40px height, focus state is 2px solid #61223B with 3px outer shadow in rgba purple1px border in #E6E6E6, 18px padding, no radius, Elevation 1 shadow; hover state adds Elevation 2 shadow and transform: translateY(-2px)40px vertical; headings to body paragraphs is minimum 28px; margins always exceed padding61px, h3 25px, h5/h6 18px–19px, body 18px, buttons/labels 16px, links 18px (AIOA Rubik), captions 12px32px for primary emphasis, 8px for secondary, 0px for cards and inputs; images use 0px 0px 36px 0px for curved bottom treatment16px padding (vs. 40px desktop), reduce font sizes 2–4px, stack columns to single column, make buttons full width, collapse navigation to hamburger menu16px font on interactive elements, minimum 44px × 44px touch targets, visible focus states on all keyboard navigation, WCAG AA contrast compliance on all text