Color
Illinois tokensWhat This Is
Hundreds of university sites run independently, with no way to mandate consistency, only earn it. This spec documents the piece of that system with the clearest trade-off: Illini Orange, the university's most recognizable brand color, fails accessibility contrast as ordinary text. Everything here, the token rules, the Button variants, the focus-state options, exists to resolve that tension without asking any team to choose between "on-brand" and "accessible."
Scope of this document. The Sticker Sheet brings the system together in one view. Color and Button then go deeper on the contrast rules and component decisions underneath it.
It reflects the Illinois Toolkit v2 work from 2020–2023, including typography, layout, buttons, content patterns, feature components, and the campus shell.
A few things worth a closer look, each with the fuller story in Case Notes:
The system at a glance
Sticker Sheet
Foundations and components, from color and grid through the Illinois header and footer.
The signature trade-off
The Illini Orange problem
The university's most recognizable color fails contrast as text. Here's the resolution, and what it cost.
Since 2020-2023
What Changed in the Live System
A second, more precise contrast fix, and a completely different Button focus mechanism than this document originally shipped.
In practice
Accessible Names, at Scale
The same "Learn More" button, repeated on every card of a real page, and why that breaks for screen reader users.
Sticker Sheet
An at-a-glance view of the foundations and components that shaped the Illinois Digital Design System from 2020–2023. The examples use the Toolkit v2 styles and components so the system can be experienced in context.
Foundations
Typography
.il-formattedH1
Learn with purpose
H2
Explore Illinois
H3
Programs and people
H4
Make an impact
H5
Related resources
H6
More information
Body
Source Sans keeps university information readable across devices.
Responsive grid
2 → 4 → 6 → 8 → 12 columns
123456789101112
2 / 4 / 6 / 8 / 12 columns2 below 360px; 4 at 360px; 6 at 550px; 8 at 770px; 12 at 1200px.
20px → 30px margins20px below 650px; 30px from 650–1199px.
16px → 24px gutters16px below 1200px; 24px at desktop widths.
1140px contentFluid below 1200px; fixed and centered from 1200px.
Space
recurring component values8
0.5rem16
1rem20
1.25rem24
1.5rem30
1.875rem32
2rem48
3remContent and interaction
Buttons
.il-buttonAccordion
<il-accordion>What can I study?
Explore programs spanning agriculture, technology, the environment, and human health.
How do I apply?
Choose a program, review its requirements, and follow the application steps.
Introduction
<il-introduction>Discover your path. Define your future.
Illinois brings people, ideas, and disciplines together to solve problems with consequence.
Lede
<il-lede>Quote
<il-quote>Design-system principle
Illinois Digital Design System
Statistic
<il-statistic>Feature components
Call to action
<il-call-to-action>Ready to take the next step?
Find the Illinois program that connects your interests to what comes next.
Card
<il-card>Research that matters
Work with faculty and peers on questions that shape communities and the world.
Clickable card
<il-clickable-card>Student experience
Build knowledge in the classroom, then put it to work through research and collaboration.
Hero
<il-hero>
Innovating solutions every year
Icon row
Illinois icon compositionIcon rows paired the Illinois icon set with short labels and supporting text.
Image feature
<il-image-feature>
Ideas become visible
Pair a strong visual with focused content and a clear next step.
Discover student workVertical tab
<il-vertical-tab>Explore Illinois
Academics
Choose from programs designed to connect rigorous learning with practical experience.
Research
Join people working across disciplines to answer consequential questions.
Community
Find the organizations, resources, and relationships that make campus yours.
Campus shell
Color
The system is built from named tokens, not a hex value per screen: il-blue and il-orange, plus il-altgeld, il-industrial, and il-storm as support. Accessibility and Themes on this page are both built from these tokens.
il-blue#13294B
il-orange#FF5F05
il-altgeld#C84113
il-industrial#1D58A7
il-industrial-lighter-2#A6D7EB
il-storm#707070
il-storm-darker#252525
Marketing pushed hard for school colors: an early split near 40% Illini Orange, 40% Illini Blue, 20% everything else. This system's answer: il-blue and il-industrial carry text and links, il-orange stays reserved for fills and large accents, and il-altgeld and il-storm add the grays and neutrals that split didn't leave room for.
The Contrast Rule
Normal Text - 4.5:1 Minimum
Applies to regular text below 24px, or bold text below 19px. This is body copy, captions, and most link text.
Large text & UI components - 3:1 minimum
Applies to regular text at 24px+, bold text at 19px+, and to graphical/UI elements like button fills and input borders.
Two Restricted Pairings
Il-orange on white is restricted: 3.05:1, fails normal text, passes large text and UI components. Never use it for body copy, captions, or small links. Il-altgeld on il-blue is excluded: 2.9:1, fails at every size, no exception rescues it the way large text rescues orange. The full story behind both, including the numbers, is in Case Notes.
The resolution: il-blue and il-industrial carry text and link duty; il-orange is reserved for fills, large headings, and hover/focus accents. Never use it for body text, captions, or small links, regardless of how on-brand it feels. White labels on filled-orange controls are bold and 19px, so they clear the 3:1 large-text threshold.
All Pairings, Quick Reference
| Pairing | Ratio | Normal text (4.5:1) | Large text / UI (3:1) |
|---|---|---|---|
| Fails or restricted use | |||
| IL-Altgeld #C84113 on IL-Blue #13294B | 2.9:1 | Fail | Fail |
| IL-Orange #FF5F05 on White #FFFFFF - restricted to large headings | 3.05:1 | Fail | Pass |
| white #FFFFFF on il-orange #FF5F05 - restricted to bold labels at 19px+ on filled-orange controls | 3.05:1 | Fail | Pass |
| Passes at all text sizes | |||
| il-blue #13294B on white #FFFFFF - headings, body | 14.5:1 | Pass | Pass |
| white #FFFFFF on il-blue #13294B - dark-theme body | 14.5:1 | Pass | Pass |
| il-industrial #1D58A7 on white #FFFFFF - links | 7.0:1 | Pass | Pass |
| il-altgeld #C84113 on white #FFFFFF - hover/focus links | 5.0:1 | Pass | Pass |
| il-orange #FF5F05 on il-blue #13294B - dark-theme hover link | 4.8:1 | Pass | Pass |
| il-blue #13294B on il-orange #FF5F05 - current live system's orange-theme body text | 4.76:1 | Pass | Pass |
Do
Use il-orange #FF5F05 for button fills, large display headings, and hover/focus accents.
These all sit at large-text or UI-component size, where 3.05:1 passes.
Don't
Set body copy, captions, or small links in il-orange #FF5F05 on a white #FFFFFF or light background.
3.05:1 fails the 4.5:1 minimum for normal text. This text is genuinely hard to read for low-vision users.
How the tokens hold up on every page background in the system: a heading, body copy, link, and button on each, checked in context instead of a swatch grid.
Hover the links below, the color change is real and matches the current production token for each theme, confirmed against colors.css.
Orange background: il-orange
Heading - white
Program Overview
Body - il-blue
Explore requirements, faculty, and outcomes for this program.
Link - il-blue, hover black
ButtonApply Now
Heading is white (3.05:1, passes large-text/UI only). Body is il-blue instead (4.76:1, passes normal text too).
Blue background: il-blue
Heading - white
Program Overview
Body - white
Explore requirements, faculty, and outcomes for this program.
Link - white, hover il-orange
ButtonApply Now
Gray background: il-storm-95
Heading - il-blue
Program Overview
Body - il-storm-darker
Explore requirements, faculty, and outcomes for this program.
Link - il-industrial, hover il-altgeld
ButtonApply Now
White background: white
Heading - il-blue
Program Overview
Body - il-storm-darker
Explore requirements, faculty, and outcomes for this program.
Link - il-industrial, hover il-altgeld
ButtonApply Now
The system's default: the most headroom of any theme, which is why it's the fallback when a designer hasn't chosen one.
Blue Gradient background: linear-gradient, il-industrial → il-blue
Heading - white
Program Overview
Body - white
Explore requirements, faculty, and outcomes for this program.
Link - white, hover a lighter accent
ButtonApply Now
White text has to survive both ends of the gradient: 6.99:1 at the il-industrial end, 14.5:1 at the il-blue end. The hover color shown here is an approximation, see Case Notes.
Orange Gradient background: linear-gradient, orange tones
Heading - il-blue
Program Overview
Body - il-blue
Explore requirements, faculty, and outcomes for this program.
Link - il-blue, hover black
ButtonApply Now
Unlike solid Orange, the heading here is il-blue, not white: it clears 4.76:1 even at the darkest gradient stop.
Component: Button
Six variants, each with a default, hover, focus, and disabled treatment, all built from the token rules in Color. "Button" describes how this looks, not what HTML element it is: most of what reads visually as a button on a university site actually navigates to a URL, which makes it a link. See Specs for the full element-choice rule.
Solid
Outline
Outline White (dark backgrounds), and Disabled
All six, at a glance, with real hover and focus states. Try tabbing through them.
Anatomy
min-height: 48px
20px ←
→ 20px
16px vertical padding
Button Text
44px minimum height meets WCAG 2.5.5 AAA for touch and low-precision input. 24px gap when two buttons sit side by side.
Element choice: <a> vs <button>
<a href="..."> - Navigates
Use when activating it takes the user to a new URL or page section.
- Enter activates it; right-click / long-press still offers "open in new tab"
- Screen readers announce it as a link
- Covers almost every marketing/CTA button: Apply, View Program, Request Info
<button> - Performs an Action
Use when activating it does something on the current page and goes nowhere.
- Enter and Space both activate it
- Screen readers announce it as a button, not a link
- Submit a form, open a modal, toggle a menu, delete a row, and it's the only way to natively express "disabled"
The current live toolkit ships this as two separate, deliberately distinct components: Global Button Styles (anchor) and Global Button Styles (button), rather than one component with a variant flag. <a class="ilw-button ilw-theme-blue-solid" href="/apply">Apply Now</a> and <button class="ilw-button ilw-theme-blue-solid">Submit</button> are two different components that happen to look identical.
Variants - Live States
Try it: click into this page and press Tab to move focus through the buttons below. The light-blue focus background is real, not simulated, and matches the current production system.
Solid Blue - primary action<a href>
Default: il-blue fill, white text (14.5:1). Hover: fill and text swap, white background with il-blue text, underlined.
Solid Orange - secondary emphasis, large/bold label only<a href>
Label text sits at 3.05:1, which passes because it is bold and 19px. Shrinking it below the large-text threshold would make it fail. Hover: fill and text swap, same as Solid Blue.
Outline Blue<a href>
Default: il-blue text and border on white (14.5:1). Hover: fill and text swap, il-blue background with white text.
Outline Orange<a href>
Label and border sit at 3.05:1 in il-orange, the same bold/19px+ label that lets Solid Orange pass 3:1: shrink it below that and it fails. Hover: fill and text swap, il-orange background with white text.
Outline White - for dark or photo backgrounds<a href>
Default: white text/border on il-blue (14.5:1). Hover: fill and text swap, white background with il-blue text.
Disabled - any variant<button>
White background, light-gray text and border, no hover or focus treatment, disabled attribute set: not just a visual style, so assistive tech announces it correctly. The one variant that has to render as <button>, since links have no native disabled state.
States Reference
| State | Trigger | What changes |
|---|---|---|
| Default | At rest | Base fill/border/text per variant, as specified above |
| Hover | Mouse over | Background and text swap, underline added (mouse users only) |
| Focus | Any focus, keyboard or mouse | Background swaps to a light blue tint, text becomes il-blue, underline added, no outline ring |
| Active | Mouse/key down | Not separately specified in this reconstruction; no distinct pressed style is defined here |
| Disabled | disabled attribute | White background, light-gray text and border, pointer-events removed, announced as disabled by assistive tech |
Hover, focus, and disabled here match the current production system, not a 2020-2023 guess. Why, and what changed, is in Case Notes.
Code, Actual Current Production Markup
Pulled directly from the live Web Toolkit Builder in July 2026.
<a href="/apply" class="ilw-button ilw-theme-blue-solid">Apply Now</a> <button class="ilw-button ilw-theme-blue-solid">Submit</button> // theme options: ilw-theme-blue, ilw-theme-orange, ilw-theme-blue-solid, ilw-theme-orange-solid, // ilw-theme-blue-outline, ilw-theme-orange-outline, ilw-theme-blue-inverse, ilw-theme-orange-inverse // size options: ilw-button-small, ilw-button-large // width (button only): ilw-width-full
- Contrast: every default-state label meets 4.5:1, or is bold at 19px+ and meets the 3:1 large-text exception, as Solid Orange does.
- Focus is never hover-only: the focus treatment renders on any
:focus, not just:hover, so keyboard and switch-device users always see it, independent of where the pointer is. - Target size: 44px minimum height meets WCAG 2.5.5 AAA for touch and low-precision input.
- Real disabled state: uses the native
disabledattribute, not just a gray style, so screen readers announce it correctly. - Don't rely on color alone: hover and focus swap fill and text color and add an underline, not just a hue shift, for users with low color vision.
- Element matches behavior: the
<a>vs<button>choice in Specs isn't cosmetic; getting it wrong breaks right-click/open-in-new-tab or native browser history, depending on which way it's wrong.
Do
White text on the il-orange #FF5F05 fill reaches 3.05:1. At 19px and bold, the label passes the large-text threshold.
Don't
A small, regular-weight il-orange "link-styled button" like this fails 4.5:1: it looks like a button but isn't held to button-level contrast rules.
Accessible Names, the Same Button, Many Times on One Page
Contrast and focus states cover a button standing alone. Academic sites rarely show just one button: a program-listing page repeats the same CTA on every card. Learn More, Learn More, Learn More. A sighted user tells them apart by which card they're inside. A screen reader user navigating by a buttons/links list hears the same word repeated with no card context at all.
Don't
<!-- repeated on every program card, identical accessible name --> <a class="ilw-button" href="/programs/animal-sciences">Learn More</a> <a class="ilw-button" href="/programs/agribusiness">Learn More</a>
A screen reader's links list reads "Learn More, Learn More, Learn More…," each one indistinguishable.
Do
<!-- visible label stays short; accessible name adds the program --> <a class="ilw-button" href="/programs/animal-sciences"> Learn More <span class="sr-only">about Animal Sciences</span> </a>
The card still reads "Learn More" visually. The accessible name becomes "Learn More about Animal Sciences," distinct in a links list.
WCAG 2.5.3 (Label in Name) requires the accessible name to start with or contain the visible label, which is why aria-label="Animal Sciences program details" alone would fix the screen-reader problem but break voice-control users. A real example of this exact pattern is in Case Notes.
When to Use Each Variant
- Solid Blue: the one primary action on a page, like Apply Now or View Program.
- Solid Orange: sparingly, for a secondary action that still needs the brand orange, like a callout inside a promotional banner.
- Outline Blue: a secondary action next to a Solid Blue button, or anywhere a button needs to sit quietly instead of competing for attention.
- Outline Orange: the same as Outline Blue, when the on-brand orange accent fits the page better than blue.
- Outline White: dark banners or photo backgrounds, where a dark-text button would disappear.
- Disabled: only when the action is temporarily unavailable and the person benefits from seeing why. If the action just doesn't apply, remove the button instead of disabling it.
Case Notes
The story behind the spec: what the Illini Orange trade-off actually looked like, what got tested and rejected, and what's changed in the live system since 2020-2023.
The Illini Orange problem
Illini Orange is the university's most recognizable brand asset. It also fails WCAG contrast as ordinary text on white. Computed against the real token value:
IL-Orange #FF5F05 on White #FFFFFF
Body copy
3.05:1
Fails the 4.5:1 normal-text minimum. Never set body copy, captions, or small links in orange on white.
Large heading
3.05:1
Passes the 3:1 large-text minimum at 24px+ regular or 19px+ bold. Safe for headings only.
Filled control
3.05:1
Passes the 3:1 large-text minimum at 19px bold. This is why orange lives on filled controls and large accents, not on body text.
Orange isn't the only pairing that fails. Il-altgeld, the darker hover/focus red-orange, fails outright against the dark-blue theme. No size rescues it the way large text rescues orange.
IL-Altgeld #C84113 on IL-Blue #13294B
Body text
2.9:1
Fails the 4.5:1 normal-text minimum.
Large heading
2.9:1
Also fails the 3:1 large-text/UI minimum. There's no size that saves this pairing.
This is a different category of failure than orange-on-white. Orange is restricted: safe at large or bold sizes, unsafe as body text. Altgeld-on-blue is excluded: it doesn't clear either threshold at any size, which is why the original theme spec marked it "only if needed" instead of giving it a sanctioned use case the way orange got one.
Focus States, What Was Tested and Rejected
Three focus-indicator options were tested for links and headings, using the same real HTML page tested with keyboard and screen-reader users, before the dotted-outline treatment was adopted. Tab through each to compare.
Adopted - dotted outline
Paragraph Link
Rejected - solid fill
Paragraph Link
Rejected - light tint
Paragraph Link
If Tab doesn't move focus in your browser or device, this is exactly what each option looks like.
Focus, hover, and visited states were deliberately kept visually distinct from one another: a user tabbing through a page needs to tell "this is where my keyboard focus is" apart from "I've already clicked this" at a glance.
What Changed in the Live System since 2020-2023
Checking the current production colors.css (WIGG, 2025) shows the orange-contrast problem got a second, more precise fix since the 2020–2023 foundation this document is built from. A page-wide orange theme now sets body text to il-blue on il-orange, 4.76:1, which passes even the 4.5:1 normal-text minimum, not just the large-text exception this document uses for button labels. White-on-orange is kept only for the button/control accent, where large-bold text and the 3:1 UI threshold still apply.
Button's own hover, focus, and disabled behavior is a separate case: there's no surviving evidence of what the original 2020-2023 build did specifically, unlike the tested-and-rejected options above. Rather than present a guess as history, Button's Specs tab shows the verified current production system directly, confirmed against buttons.css (WIGG, 2025).
| State | Verified current behavior, shown in Button's Specs |
|---|---|
| Hover | Background and text swap, plus an underline, the same rule for every variant. An earlier draft of this reconstruction had each variant darken to a distinct color instead; that guess is corrected here. |
| Focus | Background swaps to a light blue tint with il-blue text and an underline, no outline ring, on any :focus rather than only :focus-visible. An earlier draft showed a 3px solid il-orange outline, adapted from the link/heading choice above without direct Button-specific evidence; that guess is corrected here. |
| Disabled | White background, light-gray text and border (il-storm-lighter-1), no hover or focus treatment. An earlier draft used 45% opacity instead; that guess is corrected here. |
UPDATED 2026-09-04: il-arches-90 is now resolved, against illinois.css -- the base palette buttons.css and colors.css both @import -- at #C7EDF8, a pale arches-blue tint. Button's focus background and the Disabled state's text/border color (previously il-storm, a darker gray than this table already claimed) both now use their real tokens instead of 2020-2023 stand-ins.
Accessible Names, in Practice
The repeated-CTA problem covered in Button's Guidelines is exactly the shape of the ACES Program Explorer, a project built during this same role: dozens of programs, each with its own "Explore Program" action, on one page. Any academic site with a course catalog, staff directory, or degree list has the identical problem, one visual label, applied many times, needs a distinct accessible name each time.
Governance and Authorship
Authored & reconstructed by
Melissa Waller, Director of Web Development (2020–2023)
Version
v2.0
Original system
Illinois Digital Design System, University of Illinois Urbana-Champaign, 2020–2023
Governance model, as it operated then
WIGG - propose → review → prioritize → release, ~175-person cross-campus group. Melissa co-chaired as one of five steering-committee members and led the WordPress and Design groups.
Related components
Header, hero, quote, statistics, and image features, documented separately
This is authorship and provenance for the portfolio document itself, not a claim over Illinois's current, live governance.
Sources
webtheme.illinois.edu · builder3.toolkit.illinois.edu · github.com/web-illinois/toolkit-management