Instructure UI

# Instructure UI — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Instructure (Canvas LMS). "Instructure UI" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Instructure UI
**Owner:** Instructure (Canvas LMS)
**Official documentation:** https://instructure.design/
**Visual character:** Classroom-grade dependability: Lato at homework-reading sizes, grade-state greens and reds, and WCAG rigor for every campus.

---

## Summary

Instructure's accessible React component library and design tokens underpinning the Canvas learning management platform.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Brand Blue | `#0374b5` | `--ic-brand-primary` | Primary actions and links (Canvas) |
| Text / Licorice | `#2d3b45` | `--ic-color-text` | Primary text |
| Ash Secondary | `#6b7780` | `--ic-color-ash` | Secondary text |
| White | `#ffffff` | `--ic-color-white` | Surfaces |
| Porcelain | `#f5f5f5` | `--ic-color-porcelain` | Subtle background |
| Tiara Border | `#c7cdd1` | `--ic-color-tiara` | Borders |
| Crimson Error | `#e0061f` | `--ic-color-crimson` | Errors |
| Shamrock Success | `#0b874b` | `--ic-color-shamrock` | Success and submitted work |
| Fire Warning | `#fc5e13` | `--ic-color-fire` | Warnings |

## Typography

- **Body:** Lato Extended — weights 400, 700 — `'LatoWeb', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `36px` | `45px` |
| h2 | `28px` | `35px` |
| h3 | `23px` | `29px` |
| body | `16px` | `24px` |
| small | `14px` | `21px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `36px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| large | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| resting | `0 1px 3px rgba(45,59,69,0.2)` |

## Quick start (CSS)

```css
/* Instructure UI — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://instructure.design/ */

:root {
  /* Color */
  --ic-brand-primary: #0374b5; /* Primary actions and links (Canvas) */
  --ic-color-text: #2d3b45; /* Primary text */
  --ic-color-ash: #6b7780; /* Secondary text */
  --ic-color-white: #ffffff; /* Surfaces */
  --ic-color-porcelain: #f5f5f5; /* Subtle background */
  --ic-color-tiara: #c7cdd1; /* Borders */
  --ic-color-crimson: #e0061f; /* Errors */
  --ic-color-shamrock: #0b874b; /* Success and submitted work */
  --ic-color-fire: #fc5e13; /* Warnings */

  /* Typography */
  --font-body: 'LatoWeb', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-h1: 36px /* line-height 45px */;
  --text-h2: 28px /* line-height 35px */;
  --text-h3: 23px /* line-height 29px */;
  --text-body: 16px /* line-height 24px */;
  --text-small: 14px /* line-height 21px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 48px;

  /* Radius */
  --radius-default: 4px;
  --radius-large: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-resting: 0 1px 3px rgba(45,59,69,0.2);
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Instructure UI by Instructure (Canvas LMS) — Instructure's accessible React component library and design tokens underpinning the Canvas learning management platform. Character: Classroom-grade dependability: Lato at homework-reading sizes, grade-state greens and reds, and WCAG rigor for every campus. Use a primary colour near #0374b5, the typeface "Lato Extended" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Instructure UI documentation](https://instructure.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/instructure-ui) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._