Lockup, color, typography and components — the working set behind
Defined Learning, Defined Careers and
Defined @ Work. Pair this with the lockup downloads when you need raw SVGs.
Display
Inter Tight
Body
Inter
Mono
JetBrains Mono
Brand blue
#005594
Brand gold
#FFA749 / #C77A22
01
Lockup
L11 · Inter Tight 600 · gold dot
The wordmark is "Defined." — the period is non-negotiable, it's the brand's anchor.
Pair with the L11 tagline "DEEPER LEARNING, DELIVERED" for hero placements; drop the
tagline for nav and compact use. Keep clear space equal to the height of the D on every side.
Full lockup · with tagline Hero / footer / hand-offs
01Light · full lockupon #FFFFFF
Defined.
Deeper Learning, Delivered
Period & "Delivered" use #C77A22 on light surfaces.
02Dark · full lockupon #0E1A2A
Defined.
Deeper Learning, Delivered
Period & "Delivered" use #FFA749 on dark surfaces.
Wordmark only · no tagline Nav / favicons / app chrome
03Light · wordmark onlyon #FFFFFF
Defined.
Default header lockup. Sits at ~22px cap-height in a top-nav.
04Dark · wordmark onlyon #0E1A2A
Defined.
Reverse nav lockup. White D, white "Defined", bright gold period.
D mark only Avatars · favicons · square crops
05Light · D markon #FFFFFF
Use only when the surrounding context already says "Defined".
Two brand colors do almost everything: blue sets the institutional tone,
gold is the accent — used sparingly, on the period, on "Delivered", on the
"you-are-here" pill. Ink and surface neutrals carry the rest of the page. Product accents only
appear inside the continuum diagram.
Highlight sweep behind a hero word, workforce-audience washes.
--color-gold-soft
Ink Type colors — never invent more
Ink
Ink
#0E1A2A
Headlines, body text, dark-section background.
--color-ink
Ink 2
Ink 2
#44546A
Lede / body copy / secondary text.
--color-ink-2
Ink 3
Ink 3
#7C8AA0
Captions, mono labels, hover hints. Don't run small body in this.
--color-ink-3
Ink Deep
Ink Deep
#061322
Footer base — one notch darker than ink so the dark CTA reads as foreground.
— (footer only)
Surface Backgrounds & rules
BG
BG
#FFFFFF
Default canvas, card surface.
— (#fff)
BG Alt
BG Alt
#F4F7FA
Alternate-row sections, sub-component fills.
--color-bg-alt
BG Deep
BG Deep
#EAF1F7
Striped placeholder base, third-tier surface.
--color-bg-deep
Rule
Rule
#DEE6EE
Default 1px border. Use --color-rule-strong (#C4D1DE) when more weight is needed.
--color-rule
Product accents Only inside the continuum diagram
Defined Learning
Learning
#2FA37C
K-12 product bar & arrow in the continuum. Never on body type.
--color-product-learning
Defined Careers
Careers
#6E66C4
Career-prep product bar in the continuum.
--color-product-careers
Defined @ Work
@ Work
#005594
@ Work uses brand blue — it's the anchor. Workforce audience uses gold-deep.
--color-product-work
Status · Live
Live / Pass
#1F8A5B
"Now hiring", live indicators, success states.
--color-success
03
Typography
3 families · display + sans + mono
Inter Tight for display (the wordmark, headlines, product names).
Inter for body and UI. JetBrains Mono for the tagline,
eyebrows, captions, and any labels with letter-spacing. The mono is the brand's "system voice"
— it's how Defined talks about itself.
Display
Aa
Inter Tight
400 / 500 / 600 / 700 / 800 · -0.022em default
Sans · Body / UI
Aa
Inter
400 / 500 / 600 · 1.5 line-height
Mono · Labels
Aa
JetBrains Mono
400 / 500 / 600 · 0.06–0.14em
Scale
Display XL Hero
A real platform.
IT 700 · 64–76px -0.030em · 1.04
Display L Section
Three products, one direction.
IT 600 · 44–54px -0.025em · 1.06
Display M Subhead
Real work, finished by real people.
IT 600 · 26–30px -0.020em · 1.10
Display S Card title
Defined @ Work
IT 600 · 20px -0.015em · 1.20
Body L Lede
Most platforms simulate work. Defined @ Work delivers it — projects from real organizations, finished by your team.
Inter 400 · 18px 1.55 line-height
Body M Default
The wordmark "Defined." anchors the brand. The period is non-negotiable — it's the visual full-stop of the promise.
Inter 400 · 15px 1.55 line-height
Body S Caption
Use for card descriptions, footnotes, or anywhere the page needs to whisper. Don't run more than 60ch wide.
Inter 400 · 13px 1.50 line-height
Mono Tagline
Deeper Learning, Delivered
JM 500/600 · 13px 0.14em letter-spacing
Mono · Eyebrow Label
Brand · Style Guide · 03
JM 500 · 11px 0.12em letter-spacing
04
Components
Buttons · pills · eyebrows · cards
A small kit of components is enough — the brand reads through type and color rhythm, not chrome.
Buttons have square radii (6px), never pill-shaped. Pills are pill-shaped
at 4px, treated as small mono labels rather than as buttons.
Buttons · light surface14px · 6px radius
Primary = brand blue. Gold reserved for the highest-intent moment per page. Ghost for low-emphasis tertiaries.
Buttons · dark surfaceon #0E1A2A
On dark, primary becomes white-on-ink. Gold stays gold (it's already on a dark surface).
Pills10px · uppercase · mono
You are hereNewQ3 2026Read moreLive
Use sparingly — one or two per surface. Gold pill is the "you-are-here" device on the continuum.
Eyebrows11px · 0.12em tracking
Brand · LockupInside @ WorkSection · 04
Mono, uppercase, prefixed with an 18px rule. Color answers context: blue for brand-level, gold-deep for accent moments.
05
Imagery
Photography & placeholders
Real photography always wins — students at terminals, teams on deck, deliverables on screens.
Until photos are dropped in, use the striped placeholder at one of three
temperatures: blue (default), gold (workforce / outcomes), ink (dark surface).
Product shot · UI
16:10 · default
People · workforce
4:3 · accent
Outcome · data viz
16:9 · dark
06
Token rules
The non-negotiables
The period
"Defined." — always with the period. The period is gold. Never set the wordmark without it, in any size or context. Reserve it for the final brand moment of a page (logo, hero word).
Gold by surface
On light surfaces, gold is #C77A22. On dark surfaces, gold is #FFA749. Period and "Delivered" must use the same gold within a single surface. Never mix.
Blue ownership
Brand blue is reserved for the wordmark, primary buttons, links, eyebrows, and the @ Work product accent. Don't use it for body type or generic dividers — that's what ink and rule are for.
Product accents
--color-product-learning, --color-product-careers and --color-product-work only appear inside the continuum diagram. They're product wayfinding, not brand. Don't lift them out for buttons or section headers.
Audience colors
Schools = blue family (#005594 + #E5EFF7 tint). Workforce = gold family (#C77A22 + #FFEFD8 tint). When the page splits into two columns by audience, this is the cue.
Type pairing
Inter Tight for display + product names. Inter for everything else. JetBrains Mono for labels with letter-spacing — the brand's "system voice". Never run mono in body sizes.
Clear space
Around the lockup, leave clear space equal to the height of the D mark on every side. Minimum width before dropping the tagline: 120px. Below that, drop to wordmark-only; below 28px, drop to D-mark only.
Don'ts
Don't tilt or animate the lockup. Don't recolor the D in any non-brand color. Don't use a different tagline. Don't add a stroke or drop-shadow to the wordmark. Don't run "Defined" without the period.
Defined. 
Defined.