Instructure Brand Design System Deep Dive

1. Brand Overview

Instructure’s visual identity is unapologetically utilitarian with a tech-academic undertone. They’re not chasing flashy gradients or playful microinteractions — this is software that wants to look dependable and professional first, approachable second. You can tell they’ve built this for education platforms, LMS admins, and institutional buyers, not just students. The vibe: “We’re serious about learning, but we’re not boring.”

The dark navy (#061c30) anchors the entire experience. It’s heavy, trustworthy, and plays well against bright accents. This is the kind of color you see in enterprise dashboards, but here it’s softened by generous spacing and rounded corners. They sprinkle in a clear, optimistic blue (#1779ba) for logo and link accents — just enough to keep things from feeling too corporate.

Typography is all CircularXX — a geometric sans that’s crisp without being sterile. It’s modern, but not the kind of modern you get from pure Helvetica. CircularXX has subtle warmth in its curves, which works for a brand trying to bridge “software” and “human learning.”

Spacing is on an 8px scale, which keeps layout decisions tight and consistent. They’re clearly using Tailwind CSS (confirmed from arbitrary values in the markup), so the system is atomic at heart. This makes the design predictable for developers — every margin, padding, and gap is a multiple of 4 or 8px.

They’re not shy with border radii. You’ll see 100px pills, 25px rounded CTAs, and 50% circles alongside softer 10px cards. Corners are consistently rounded, which gives the interface a friendly edge.

Overall, the philosophy is: strong foundation colors, minimal ornamentation, generous space, and consistent corner language. It’s the kind of system where you could swap out the content for any other SaaS platform and it would still hold up — but the subtle brand accents make it recognizably Instructure.

2. Color System

2.1 Primary Colors

The main brand color is deep navy #061c30 (rgb(6, 28, 48)). This is the anchor — backgrounds for sticky headers, button borders, and primary text. The psychology is obvious: stability, authority, trust. In education tech, you want your platform to feel like it will be around for decades, not disappear next semester.

Secondary accents lean toward blue: #1779ba (rgb(23, 121, 186)) for logo and link highlights. This is a mid-brightness blue, energetic but still professional. There’s also a darker secondary #0e1721 (rgb(14, 23, 33)) used for text and button backgrounds.

Competitors in the LMS space (like Blackboard) go even darker and flatter; Instructure’s palette is slightly more open and approachable thanks to these clean blues.

2.2 Complete Palette

Here’s the extracted palette:

The site defines an exhaustive CSS variable set:

--color-purple-200: oklch(.902 .063 306.703)
--color-purple-300: oklch(.827 .119 306.383)
--color-zinc-100: oklch(.967 .001 286.375)
...
--color-black: #000
--color-white: #fff
...

These aren’t all visible at once — they’re part of the Tailwind config. But they give them flexibility for campaigns, illustrations, or theming.

2.3 Color Relationships

Contrast is solid between #061c30 and #ffffff — easily WCAG AA for large text, probably AAA. The accent blue #1779ba on white is borderline for small text but works fine for links with bold weight.

Dark mode isn’t explicitly implemented, but the palette supports it — #0e1721 could easily replace white as a background, with lighter neutrals for text.

2.4 Usage Guide

• Works well: Navy (#061c30) + white for primary sections. Accent blue (#1779ba) for CTAs.
• Avoid: Using bright accent colors on dark navy without sufficient padding — they can vibrate.
• Functional colors: The oklch variables cover reds, greens, yellows for status messages. Use them exactly as defined; don’t invent new shades.

3. Typography

3.1 Font Families

Everything is circularxx with fallbacks Arial, Helvetica. Sources include Google Fonts (Manrope, Noto Sans KR, Noto Sans JP) — possibly for internationalization.

CircularXX is a custom geometric sans — it’s clean, even-weighted, and plays perfectly with the grid.

3.2 Type Scale

…and so on, covering every minor variation.

3.3 Hierarchy

They’re not shy about big headings — 64px is huge for web. This creates strong page anchors. The smaller heading weights (500, 600) give flexibility for sub-sections without overpowering.

Body and link text stay in the 16–18px range — comfortable for reading. Captions drop to 12–14px but maintain high line height for legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. They use multiples and half-steps:

4.2 Layout

Breakpoints are dense — from 320px up to 1440px, with granular steps (426px, 530px, etc.). This is a responsive system tuned for many device widths.

Tailwind CSS is present, so container widths are likely max-w values, with utility classes handling padding/gap.

5. Visual Elements

Border Radius

They use a wide range:

• 0px — sharp edges for menus
• 2px — buttons
• 8px — inputs
• 10px — cards, menus
• 20px — divs/spans
• 25px — CTAs (“Let’s Connect”)
• 50% — circular buttons/avatars
• 100px — pill buttons

This is consistent: functional elements get small radii, CTAs get big friendly curves.

Shadows

Mostly subtle:

• rgba(20, 61, 80, 0.07) 0px 0px 30px 10px — soft ambient
• Occasional stronger: rgba(20, 61, 80, 0.15) 0px 20px 50px 10px

No heavy drop shadows — depth is minimal.

Borders

• 1px solid rgba(0,0,0,0.1) — dividers
• 2px solid #fff — light accents
• 1px solid #0e1721 — button outlines

6. Components

6.1 Buttons

Variant 1 (Pill):

• Default: bg #061c30, color #061c30, radius 100px, no border.
• Hover: bg #1eaedb, color #fff, border 1px solid #cc4b37.
• Focus: bg #1eaedb, outline 2px solid #000.

Variant 2 (Dark Rect):

• Default: bg #0e1721, color #fff, padding 12px 10px, radius 2px, border 1px solid #0e1721.
• Hover/focus same as above.

Variant 3 (Light Rect):

• Default: bg #f0f2f3, color #4279b6, padding 12px 10px, radius 2px.

6.2 Links

Multiple styles:

• White text links that turn #3860be on hover.
• Navy links (#061c30) with same hover.
• Accent links (#1779ba) for emphasis.
• Bold blue links (#0e68b3).
• Underlined blue (#4279b6).

6.3 Forms

Inputs have 8px radius, 1px borders in light gray. Focus likely changes border color (based on Tailwind defaults).

6.4 Cards

Cards use 10px or 24px radius, light shadows, and 24px padding.

7. Design Tokens

:root {
  /* Colors */
  --color-navy-deep: #061c30;
  --color-white: #ffffff;
  --color-logo-blue: #1779ba;
  --color-dark-charcoal: #0e1721;
  --color-black: #000000;
  --color-royal-blue: #0e35b3;
  --color-mid-gray: #555555;
  --color-purple-200: oklch(.902 .063 306.703);
  /* ... include all provided CSS vars ... */

  /* Typography */
  --font-circularxx: "circularxx", Arial, Helvetica;
  --font-manrope: "Manrope";
  --font-noto-sans-kr: "Noto Sans KR";
  --font-noto-sans-jp: "Noto Sans JP";

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --space-80: 80px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 20px;
  --radius-xxl: 25px;
  --radius-full: 50%;
  --radius-pill: 100px;

  /* Shadows */
  --shadow-soft: rgba(20, 61, 80, 0.07) 0px 0px 30px 10px;
  --shadow-strong: rgba(20, 61, 80, 0.15) 0px 20px 50px 10px;
}

8. AI Coding Assistant Prompt

# Instructure Design System Specification

You are an Instructure design expert. Build UIs matching their visual language exactly.

## Brand Context
Instructure’s design language is professional, academic, and approachable. It uses deep navy for trust, bright blues for accents, and generous spacing on an 8px grid. Rounded corners soften the utilitarian structure.

## Color Palette
- Navy Deep: #061c30 — Headers, sticky nav, button borders
- White: #ffffff — Page background, text on dark
- Logo Blue: #1779ba — Logo, link highlights
- Dark Charcoal: #0e1721 — Body text, button backgrounds
- Black: #000000 — Region switcher link
- Royal Blue: #0e35b3 — Accent elements
- Mid Gray: #555555 — Onetrust modal buttons
- All functional colors via CSS vars (reds, greens, yellows, purples) — Status messages, alerts

## Typography
- Primary font: "circularxx", Arial, Helvetica
- International fonts: "Manrope", "Noto Sans KR", "Noto Sans JP"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 64px | 700 | 1.13 | Page titles |
| H1-alt | 60px | 600 | 1.60 | Hero subtitles |
| H2 | 48px | 700 | 1.17 | Section headings |
| H3 | 40px | 700 | 1.20 | Subsection headings |
| Body | 16px | 400 | 1.60 | Paragraph text |
| Link | 18px | 400 | 1.00 | Inline links |
| Button | 13.12px | 600 | 1.40 | CTA buttons |
| Caption | 12px | 400 | 3.00 | Footnotes |

## Spacing & Grid
Base: 8px grid.
Scale: 4px, 8px, 10px, 16px, 20px, 24px, 32px, 40px, 60px, 80px.
Map:
- Button padding: 12px vertical, 10px horizontal
- Card padding: 24px
- Section gap: 40px
- Hero padding: 60–80px

## Border Radius
- none: 0px — menus
- sm: 2px — buttons
- md: 8px — inputs
- lg: 10px — cards
- xl: 20px — large containers
- xxl: 25px — prominent CTAs
- pill: 100px — pill buttons
- full: 50% — circular buttons/avatars

## Shadows & Depth
- Soft: rgba(20, 61, 80, 0.07) 0 0 30px 10px
- Strong: rgba(20, 61, 80, 0.15) 0 20px 50px 10px

## Component Specifications

### Primary Button
Default: bg #061c30, color #061c30, radius 100px, border none.
Hover: bg #1eaedb, color #fff, border 1px solid #cc4b37.
Focus: bg #1eaedb, color #fff, border 1px solid #000, outline 2px solid #000.

### Secondary Button
Default: bg #0e1721, color #fff, padding 12px 10px, radius 2px, border 1px solid #0e1721.
Hover/focus: same as primary hover.

### Light Button
Default: bg #f0f2f3, color #4279b6, padding 12px 10px, radius 2px, border none.

### Navigation Links
White text links hover to #3860be.
Navy links hover to #3860be.
Accent links #1779ba hover to #3860be.
Bold links #0e68b3 hover to #3860be.
Underlined links #4279b6 lose underline on hover.

### Input Fields
Border: 1px solid #d1d1d1, radius 8px, padding 8px.
Focus: border-color accent blue, outline none.

### Cards
Radius: 10px or 24px, padding 24px, shadow soft.

## Layout & Responsive Rules
Max content width: fluid up to 1440px.
Page padding: 16px mobile, 40px desktop.
Grid gap: multiples of 8px.
Breakpoints: 320, 375, 426, 530, 768, 1024, 1280, 1440.

## Interaction Rules
Transition: 150ms ease for state changes.
Focus indicators: 2px solid black.
Disabled states: 50% opacity.

## DO List
- Use only colors from palette.
- Maintain 8px grid.
- Use CircularXX for headings and body.
- Keep corner language consistent.
- Respect hover/focus styles exactly.

## DON'T List
- Don’t invent new accent colors.
- Don’t mix sharp and rounded corners.
- Don’t use heavy shadows.
- Don’t stretch images.

## Code Examples

```css
.btn-primary {
  background: #061c30;
  color: #061c30;
  padding: 12px 20px;
  border-radius: 100px;
  font-weight: 400;
  font-size: 13.12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  color: #fff;
  border: 1px solid #cc4b37;
}
.btn-primary:focus {
  outline: 2px solid #000;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-shadow: rgba(20, 61, 80, 0.07) 0px 0px 30px 10px;
}

.input {
  border: 1px solid #d1d1d1;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #1779ba;
  outline: none;
}

---

## 9. Summary

**TL;DR** — Instructure’s design system is an 8px-grid, navy-and-blue anchored visual language with CircularXX type, consistent rounded corners, and restrained shadows. It’s built for trust and clarity, not playfulness.

**Brand Keywords**:
- academic-professional
- trust-heavy
- grid-consistent
- friendly-rounded
- tech-approachable