Canvas Design System — DESN 368 Course Variant
The 368 variant shares the S26 backbone (spacing, tables, data rows, WCAG compliance) but replaces the base system's brutalist monospace aesthetic with a card-based, multi-color, warmer visual language rooted in the EWU Eagle brand.
If S26 base is a government form, 368 is a modern dashboard. Same information density, different emotional register. Students immediately know which course they're in.
Body text in the Canvas-native sans stack. Clean, warm, and sturdy enough to survive LMS font substitution without losing hierarchy.
Body small — secondary descriptive text with reduced emphasis.
Meta text in the Canvas-native mono stack for dates, file sizes, and technical labels.
Body text in the Canvas-native sans stack. The rounded 368 personality now comes from layout, color, and spacing instead of imported fonts.
Body small — secondary descriptive text with reduced emphasis.
Meta text in the Canvas-native mono stack for dates, file sizes, and technical labels.
Web Design Fundamentals · Spring 2026
Web Design Fundamentals · Spring 2026
Red sections — action items, requirements, due dates, rubrics.
Blue sections — readings, external tools, info, references.
Green sections — technical guides, tool setup, success criteria.
Neutral sections — no colored left border, standard card.
Red sections — action items, requirements, due dates, rubrics.
Blue sections — readings, external tools, info, references.
Green sections — technical guides, tool setup, success criteria.
Neutral sections — no colored left border, standard card.
This is an informational callout using the blue accent.
This is a danger/important callout using the red accent.
This is a success callout using the green accent.
This is a warning callout using the amber accent.
This is an informational callout using the blue accent.
This is a danger/important callout using the red accent.
This is a success callout using the green accent.
This is a warning callout using the amber accent.
Learn to inspect, debug, and optimize responsive layouts using Chrome and Firefox developer tools.
Open WorkshopLearn to inspect, debug, and optimize responsive layouts using Chrome and Firefox developer tools.
Open WorkshopDesign is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
Design is not just what it looks like and feels like. Design is how it works.
— Steve Jobs
| Week | Topic | Status |
|---|---|---|
| 1 | HTML Foundations | Complete |
| 2 | CSS Box Model | Active |
| 3 | Flexbox & Grid | Upcoming |
| Week | Topic | Status |
|---|---|---|
| 1 | HTML Foundations | Complete |
| 2 | CSS Box Model | Active |
| 3 | Flexbox & Grid | Upcoming |
Inline blue link for resources and red link for actions.
Inline blue link for resources and red link for actions.
| Color | Hex | Ratio | Status |
|---|---|---|---|
| Text | #393E41 | 10.77:1 | PASS |
| Text secondary | #656D76 | 5.22:1 | PASS |
| Eagle Red | #B7142E | 6.62:1 | PASS |
| Eagle Red (text) | #9A1125 | 8.42:1 | PASS |
| Eagle Blue (text) | #006BA6 | 5.72:1 | PASS |
| Eagle Green (text) | #2B7015 | 6.09:1 | PASS |
| Color | Hex | Ratio | Status |
|---|---|---|---|
| Text | #E6EDF3 | 13.86:1 | PASS |
| Text secondary | #8B949E | 6.15:1 | PASS |
| Text muted | #858E98 | 5.07:1 | PASS |
| Eagle Red | #F04E64 | 5.39:1 | PASS |
| Eagle Blue | #33C8F2 | 9.63:1 | PASS |
| Eagle Green | #7FDE45 | 11.21:1 | PASS |
| Property | Base S26 | DESN 368 |
|---|---|---|
| Font pair | Canvas Sans + Canvas Mono | Canvas Sans + Canvas Mono |
| Accent color | Blue (#0969DA) | Red + Blue + Green (multi) |
| Header style | 72px monospace number, 3px border | Red-top card with pill badge |
| Sections | Numbered counters with rules | Cards with colored left borders |
| Badges | Stamped (rectangular, 2px border) | Pill (rounded, 1px border) |
| Banners | Two-part slug + body | Card with label + body |
| Border weight | 3px structural | 1px subtle, 4px accent left |
| Border radius | 3px | 6px |
| Visual feel | Government form | Modern dashboard |
S26 Design System · DESN 368 Variant v1.0 · WCAG 2.1 AA Compliant · 2026-03-27