Automattic
automattic.com · 1 day ago
SaveUnofficial A style guide made by SiteStyleGuide from instructure.com’s public web pages. Not affiliated with or endorsed by Instructure. The real site is instructure.com ↗
Unofficial style guide
Instructurestyle guide
Instructure’s website (instructure.com) uses circularxx for its headings and body text. Its palette is led by Light Steel Blue (#0097D3), Medium Blue (#0E35B3) and Midnight Blue (#061C30), with #061C30 text on #FEFEFE. Captured from the live site on 3 November 2026.
- Website
- instructure.com
- Typefaces
- circularxx, Apple Color Emoji, Noto Sans JP
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 3 Nov 2026 · added by @sitestyleguide
https://www.instructure.com/
Screenshot
instructure.com
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- Instructure: Leading EdTech for K–12, Higher Ed & Business
- ● 58 / 60 characters
- Meta description
- Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Discover Canvas, Impact, and Mastery to drive success.
- ● 159 / 160 characters
- Site name
- Instructure
- og:title
- Instructure: Leading EdTech for K–12, Higher Ed & Business
- Language
- en
- Theme colour
- #8eabc3
In search results
Instructurehttps://www.instructure.com/
Instructure: Leading EdTech for K–12, Higher Ed & Business
Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Discover Canvas, Impact, and Mastery to drive success.
When shared
instructure.com
Instructure: Leading EdTech for K–12, Higher Ed & Business
Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Disc…
Logo & favicons
Found as: image in the header. SVG, 225 × 31.
Logo
On white
On black
On Light Steel Blue
Favicons
1 found-
Instructure: Leading EdTech for K–12, Higher Ed & Business
Light browser tab
Instructure: Leading EdTech for K–12, Higher Ed & Business
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#061C30) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 33.3%
- Light Steel Blue 23.9%
- Medium Blue 15.7%
- Midnight Blue 13.1%
- Off White 2.5%
- Black 2.4%
- Deep Steel Blue 2.4%
- Light Grey 1.5%
- Royal Blue 1.5%
- Light Indian Red 0.7%
- Medium Spring Green 0.6%
- Orange 0.6%
- Deep Indian Red 0.4%
- Dodger Blue 0.4%
- Dark Slate Blue 0.4%
- Dim Grey 0.4%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 17.26:1 AAA
- On white
- —
Text, background, border · :is(.bg-color--dark-blue,.fa-block,.cta-standard.deep_blue,.paragraph--type--cta, .layout-builder-form>.form-actions .button--primary
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 10
- On text
- 13.83:1 AAA
- On white
- 1.25:1 Fail
Background, text, border · :is(.bg-color--primary-blue,.cta-standard.blue_primary,.paragraph--type--cta:not, #block-inst-local-tasks ul.primary li a
-
Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 96
- On text
- 1.15:1 Fail
- On white
- 19.80:1 AAA
Text, background, border · --color-black, body
-
Light Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 2 2 0 15
- On text
- 11.68:1 AAA
- On white
- 1.48:1 Fail
Background, border, text · .layout-builder-form>.form-actions .button, .field--name-moderation-state
Colours
Brand colours and accents, most used first-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 28 0 17
- On text
- 5.23:1 AA
- On white
- 3.30:1 AA large
Text, border · :where(.bg-color--dark-blue,.fa-block,.cta-standard.deep_blue,.paragraph--type--, .cta-standard.deep_blue .text-formatted a
-
Medium Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 92 70 0 30
- On text
- 1.79:1 Fail
- On white
- 9.64:1 AAA
Text, background, border · :where(.bg-color--dark-blue,.fa-block,.cta-standard.deep_blue,.paragraph--type--, .layout-builder-form>.form-actions .button--primary
-
Midnight Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 42 0 81
- On text
- —
- On white
- 17.26:1 AAA
Text, background, border · :is(.bg-color--dark-blue,.fa-block,.cta-standard.deep_blue,.paragraph--type--cta, body
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 88 35 0 27
- On text
- 3.68:1 AA large
- On white
- 4.69:1 AA
Background, text, border · .progress__bar, .menu .is-active>a
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 92 42 0 30
- On text
- 3.00:1 AA large
- On white
- 5.75:1 AA
Text, background, graphic · :is(.bg-color--dark-blue,.fa-block,.cta-standard.deep_blue,.paragraph--type--cta, .layout.bg-color--primary-blue:before
-
Light Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 63 73 20
- On text
- 3.81:1 AA large
- On white
- 4.54:1 AA
Text, background, border · .button.hollow.alert, .button-group.hollow .button.alert
-
Medium Spring Green
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 74 0 46 14
- On text
- 9.51:1 AAA
- On white
- 1.81:1 Fail
Background, text, border · .button.hollow.success, .button-group.hollow .button.success
-
Orange
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 32 100 0
- On text
- 9.29:1 AAA
- On white
- 1.86:1 Fail
Background, text, border · .button.hollow.warning, .button-group.hollow .button.warning
-
Deep Indian Red
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 61 61 22
- On text
- 3.80:1 AA large
- On white
- 4.54:1 AA
Background · .messages--error
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 100 38 0 6
- On text
- 5.34:1 AA
- On white
- 3.23:1 AA large
Background · .progress__bar
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 34 0 64
- On text
- 1.51:1 Fail
- On white
- 11.41:1 AAA
Text, border · .button.hollow:focus, .button.hollow.primary:focus
-
Dim Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 1 24 66
- On text
- 2.31:1 Fail
- On white
- 7.46:1 AAA
Background, border · #block-inst-local-tasks ul.primary li:nth-child(4n+2) a:hover, #block-inst-local-tasks ul.primary li:nth-child(4n+2) a
Gradients
-
linear-gradient(#0000,#00000026)
-
linear-gradient(90deg,#ffffff1a,#0000)
-
linear-gradient(#e7e7df, #f0f0f0)
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
circularxx
Aa
300
Aa
700
circularxx
Self-hosted · weights 300, 400, 500, 700 · body, headings · shown in a stand-in if you don’t have it
Aa
400
Apple Color Emoji
System font, or not loaded on this page · body · shown in a stand-in if you don’t have it
Aa
300
Aa
700
Noto Sans JP
Google Fonts · weights 300, 400, 500, 700 · headings
Aa
300
Aa
700
Noto Sans KR
Google Fonts · weights 300, 400, 500, 700 · headings
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS
Heading 1
3rem · 48 px / normal
weight 700 · circularxx
Instructure
Heading 2
2.5rem · 40 px / 3rem
weight 700 · circularxx
Instructure: Leading EdTech for K–12, Higher Ed…
Heading 3
2rem · 32 px / 2.5rem
weight 700 · circularxx
Instructure: Leading EdTech for K–12, Higher Ed…
Heading 4
1.5rem · 24 px / 2rem
weight 700 · circularxx
Instructure: Leading EdTech for K–12, Higher Ed…
Heading 5
1rem · 16 px / 1.5rem
weight 700 · circularxx
Instructure: Leading EdTech for K–12, Higher Ed…
Heading 6
.75rem · 12 px / 1.25rem
weight 700 · circularxx
Instructure: Leading EdTech for K–12, Higher Ed…
Body
— / 1.6
weight 400 · circularxx
Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Discover Canvas, Impact, and Maste…
Paragraph
14px / 1.2
Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Discover Canvas, Impact, and Maste…
Small
80%
Empower learning with Instructure’s LMS and edtech solutions for K–12, higher education, and businesses. Discover Canvas, Impact, and Maste…
Button
100% / 1
none
Get started
Link
16px / .875
weight 400
Read more about Instructure
Sizes in use
Most common across the site- 48pxline 1.15 · 13 rules
- 40pxline 3rem · 17 rules
- 32pxline 2.5rem · 31 rules
- 30px11 rules
- 24pxline 2rem · 18 rules
- 16pxline .875 · 96 rules
- 14pxline 1.2 · 15 rules
- 12pxline 1.25rem · 18 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.cta-standard .inner .buttons .field--name-field-p-cta-primary a · #FFFFFF · radius 25px
Link
Read our latest news today.
a · #1779BA
Corner radius
- 25px · 17×
- 2px · 14×
- 1.5rem · 13×
- 50% · 9×
- 10px · 5×
- 10em · 2×
Shadows
- 0 0 5px #cacaca
- 0 0 10px rgba(10,10,10,.7)
- 1px 11px 21px #89898926
- -8px 0 0 #77b259
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
640
767
768
1024
1100
1280
1440
1536
On a scale of 0 to 1536 px.
Content widths (max-width)
1536 px
1440 px
1280 px
1024 px
768 px
640 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ● FineThe title is 58 characters, short enough to show in full in search results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does Instructure use?
- Instructure’s website uses three typefaces: circularxx (headings and body text), self-hosted; Noto Sans JP, google Fonts; Noto Sans KR, google Fonts.
- What are Instructure’s brand colours?
- The main colours on instructure.com are Light Steel Blue (#0097D3), Medium Blue (#0E35B3), Midnight Blue (#061C30), Deep Steel Blue (#1779BA), Royal Blue (#0E68B3) and Light Indian Red (#CC4B37).
- What colour is Instructure’s text and background?
- Body text is #061C30 on a #FEFEFE background.
- Where is Instructure’s logo from?
- The logo shown in this guide was found on instructure.com’s homepage. For official logo files and usage rules, check Instructure’s own brand or press page.
- Is this Instructure’s official style guide?
- No. SiteStyleGuide made it from instructure.com’s public web pages on 3 November 2026, and isn’t affiliated with Instructure. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
instructure-com-tokens.css
/* instructure.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/instructure.com) */
:root {
/* Colours */
--text: #061C30;
--background: #FEFEFE;
--colour-white: #FFFFFF;
--colour-off-white: #E6E6E6;
--colour-black: #0A0A0A;
--colour-light-grey: #D4D4D8;
--colour-light-steel-blue: #0097D3;
--colour-medium-blue: #0E35B3;
--colour-midnight-blue: #061C30;
--colour-deep-steel-blue: #1779BA;
--colour-royal-blue: #0E68B3;
--colour-light-indian-red: #CC4B37;
--colour-medium-spring-green: #3ADB76;
--colour-orange: #FFAE00;
--colour-deep-indian-red: #C74E4E;
--colour-dodger-blue: #0094F0;
--colour-dark-slate-blue: #0C3D5D;
--colour-dim-grey: #575642;
--gradient-1: linear-gradient(#0000,#00000026);
--gradient-2: linear-gradient(90deg,#ffffff1a,#0000);
--gradient-3: linear-gradient(#e7e7df, #f0f0f0);
/* Typefaces */
--font-body: 'circularxx', 'Arial', 'Helvetica', sans-serif;
--font-headings: 'circularxx', 'Arial', 'Helvetica', sans-serif;
--font-buttons: 'transparent';
--font-other: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono';
/* Type scale */
--text-h1: 3rem;
--leading-h1: normal;
--text-h2: 2.5rem;
--leading-h2: 3rem;
--text-h3: 2rem;
--leading-h3: 2.5rem;
--text-h4: 1.5rem;
--leading-h4: 2rem;
--text-h5: 1rem;
--leading-h5: 1.5rem;
--text-h6: .75rem;
--leading-h6: 1.25rem;
--text-p: 14px;
--leading-p: 1.2;
--text-small: 80%;
--text-button: 100%;
--leading-button: 1;
--text-a: 16px;
--leading-a: .875;
/* Shape */
--radius-1: 25px;
--radius-2: 2px;
--radius-3: 1.5rem;
--radius-4: 50%;
--radius-5: 10px;
--radius-6: 10em;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 640px;
--breakpoint-2: 767px;
--breakpoint-3: 768px;
--breakpoint-4: 1024px;
--breakpoint-5: 1100px;
--breakpoint-6: 1280px;
--breakpoint-7: 1440px;
--breakpoint-8: 1536px;
--max-width-1: 1536px;
--max-width-2: 1440px;
--max-width-3: 1280px;
--max-width-4: 1024px;
--max-width-5: 768px;
--max-width-6: 640px;
}
{
"site": "instructure.com",
"source": "https://sitestyleguide.com/instructure.com",
"text": "#061C30",
"background": "#FEFEFE",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Off White",
"hex": "#E6E6E6",
"rgb": [
230,
230,
230
]
},
{
"name": "Black",
"hex": "#0A0A0A",
"rgb": [
10,
10,
10
]
},
{
"name": "Light Grey",
"hex": "#D4D4D8",
"rgb": [
212,
212,
216
]
},
{
"name": "Light Steel Blue",
"hex": "#0097D3",
"rgb": [
0,
151,
211
]
},
{
"name": "Medium Blue",
"hex": "#0E35B3",
"rgb": [
14,
53,
179
]
},
{
"name": "Midnight Blue",
"hex": "#061C30",
"rgb": [
6,
28,
48
]
},
{
"name": "Deep Steel Blue",
"hex": "#1779BA",
"rgb": [
23,
121,
186
]
},
{
"name": "Royal Blue",
"hex": "#0E68B3",
"rgb": [
14,
104,
179
]
},
{
"name": "Light Indian Red",
"hex": "#CC4B37",
"rgb": [
204,
75,
55
]
},
{
"name": "Medium Spring Green",
"hex": "#3ADB76",
"rgb": [
58,
219,
118
]
},
{
"name": "Orange",
"hex": "#FFAE00",
"rgb": [
255,
174,
0
]
},
{
"name": "Deep Indian Red",
"hex": "#C74E4E",
"rgb": [
199,
78,
78
]
},
{
"name": "Dodger Blue",
"hex": "#0094F0",
"rgb": [
0,
148,
240
]
},
{
"name": "Dark Slate Blue",
"hex": "#0C3D5D",
"rgb": [
12,
61,
93
]
},
{
"name": "Dim Grey",
"hex": "#575642",
"rgb": [
87,
86,
66
]
}
],
"fonts": [
{
"name": "circularxx",
"stack": "circularxx, Arial, Helvetica, sans-serif",
"weights": [
300,
400,
500,
700
],
"source": "Self-hosted"
},
{
"name": "Apple Color Emoji",
"stack": "ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "Noto Sans JP",
"stack": "Noto Sans JP, sans-serif",
"weights": [
300,
400,
500,
700
],
"source": "Google Fonts"
},
{
"name": "Noto Sans KR",
"stack": "Noto Sans KR, sans-serif",
"weights": [
300,
400,
500,
700
],
"source": "Google Fonts"
},
{
"name": "transparent",
"stack": "transparent",
"weights": [],
"source": "System font, or not loaded on this page"
},
{
"name": "SFMono-Regular",
"stack": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
"weights": [],
"source": "System font, or not loaded on this page"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run instructure.com?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/instructure.com" title="Instructure style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Similar colours
Websites whose lead colour is closest to Instructure’s
Captured from instructure.com on 3 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by Instructure; this guide describes the public website for reference.