01
Protocol before product.
The type and the grid carry the authority. Never the ornament. When in doubt, remove.
Council design system
A system for a council,
not a brand for a product.
Ten sections. One point of view. The authority sits in the type and the grid — never the ornament.
- Paper in both modes
- Ember, used sparingly
- Motion you barely notice
01 · Principles
Six rules we intend to keep.
This system exists because OIATC's website will be read by Knowledge Keepers, council members, legal advisors, and Nations considering partnership. It must feel serious the way a good policy document feels serious — not because it is stiff, but because every line is deliberate.
02
Plain over pretty.
We are drafting a governance framework. Treat the site like a document — generous margins, clear hierarchy, one voice throughout.
03
Paper as metaphor.
Backgrounds read as paper in both modes. Dark mode is storm-paper, not neon. No glow, no haze, no particles.
04
Quiet accents.
Ember is used sparingly — for the active state, the focus ring, the pull-quote rule. Not for decoration.
05
Canadian English.
Behaviour, organisation, programme. Two spaces never, ems occasionally, serial comma yes.
06
Respect everyone's bandwidth.
No autoplay. No forced motion. No tracking. No cookie banner because no cookies.
02 · Color
Paper, ink, and one ember.
Colour is tuned in OKLCH so light and dark modes stay perceptually matched. Both modes read as paper — warm in light, storm-blue in dark. The accent never becomes the field.
Surface — neutrals
Paper--paper
Paper 2--paper-2
Paper 3--paper-3
Rule--rule
Rule strong--rule-strong
Statement--statement-bg
Text — ink
Ink — body--ink
Ink 2 — secondary--ink-2
Ink 3 — tertiary--ink-3
Accent — ember
Accent--accent
Accent deep--accent-deep
Accent soft--accent-soft
Accent wash--accent-wash
Ember appears only on: the active nav link underline, the focus ring, the eyebrow tick, and one primary call-to-action per page. It never fills a container.
Semantic roles
| Page background | var(--paper) |
| Surface — card | var(--paper-2) |
| Surface — inset | var(--paper-3) |
| Divider | var(--rule) |
| Divider — emphasis | var(--rule-strong) |
| Statement surface | var(--statement-bg) |
| Text — body | var(--ink) |
| Text — secondary | var(--ink-2) |
| Text — tertiary / labels | var(--ink-3) |
| Link / active | var(--accent-deep) |
| Focus ring | var(--accent) |
| Selection | var(--accent-wash) |
03 · Typography
Source Serif for voice. Inter for clarity. JetBrains for metadata.
The serif carries the claims — headlines, ledes, pull quotes. The sans handles prose and UI. Mono holds numbers, section marks, and anything that should read as metadata rather than voice.
Scale
Display — masthead
Homepage only. Once per page.
H1 — section title
Once per section.
H2 — subtitle
Within long-form body.
H3 — card title
Cards, pillars, partner entries.
Lede — italic opening after H1.
Opening sentence after H1.
Body — the default. Sixteen pixels. Inter at 400. Prose lives here; most of the site is this size.
Prose.
Body small — footnotes, metadata, secondary prose.
Footnotes, metadata.
Label — eyebrow
Section numbers, categories, metadata labels.
Micro — the smallest type we will set
Captions on swatches and legends.
Pairing
Source Serif 4 · Inter · JetBrains Mono. Alternates tested: Fraunces · IBM Plex · Plex Mono; Newsreader · Inter · JetBrains. The current pairing is the canonical choice for OIATC.
Serif
Source Serif 4
Headlines, ledes, pull quotes.
Sans
Inter
Body prose and UI chrome.
Mono
JetBrains Mono
Section marks, tokens, metadata.
04 · Space & grid
A 4-point scale. A 12-column shell. Wide margins.
All spacing derives from a 4px base. Sections breathe at 120px top/bottom at comfortable density; compact shaves this to 96, airy pushes it to 160. The shell is 1280px max with 32px gutters.
Scale
--gap-14hairline inset
--gap-28tight cluster
--gap-312label ↔ value
--gap-416card padding min
--gap-524paragraph rhythm
--gap-632shell padding
--gap-748head ↔ body
--gap-864between groups
--gap-996masthead air
--section-y120section top/bottom
Shell & grid
The shell is centred at max-width: 1280px with padding: 0 32px. Content sits on a 12-column grid but we rarely use more than 8 — most sections are 2-up or 3-up, with the head column (2) lightly decoupled from the body column (6).
{% for i in 1..12 %}
{% endfor %}
Radii stay small. Institutional tone. Buttons, cards, and inputs default to 2–4px. Never pills, never circles on containers.
05 · Motion
Motion should feel like a door that closes properly.
Considered, measured, and barely noticed. We fade and translate. We do not parallax, glow, pulse, or morph.
Three durations (140 · 220 · 420), one easing. All motion respects prefers-reduced-motion.
--dur-fast
140ms
Hover tints, focus rings
--dur
220ms
State changes, buttons
--dur-slow
420ms
Reveal on scroll
Easing: cubic-bezier(0.2, 0.6, 0.2, 1) — a gentle in-out that avoids any overshoot. The same curve applies to fade, translate, and color changes so the whole UI moves in sympathy.
06 · Components
A tight kit. Each piece earns its place.
Buttons, cards, badges, fields, and links. Nothing else is introduced unless a pattern demands it. Each component lives on every surface without theming.
Buttons
One primary per section. Ember fill, white text. Secondary is an outlined variant on --rule-strong. Ghost carries no border.
Links & nav
Inline links use the link style, with an ember underline that thickens on hover. Navigation links use the nav link style, lowercase and subtle — the active state earns the ember.
Fields
Badges & tags
Draft
§ 1.1
Governance
Platform
Community
Cards
Council member
Russell Jones
Founder of OIATC. Began the work after a 2023 case-management contract at a First Nations Child and Family Advocacy Unit revealed the gap between systems sold and systems needed.
Council member
Web Networks
One of Canada's first ISPs. Provides OIATC's hosting foundation and sits on the council as its second member.
07 · Patterns
Section templates, composed from the kit.
These are the only section templates oiatc.ca should need. Each composes existing components — no new primitives. A page that follows masthead → premise → pillars → candour → contact reads like a good short brief.
P · 01 · Masthead
Council
Ontario Indigenous AI & Technology Council
A council of two, working to improve the digital systems that deliver services to First Nations.
P · 02 · Premise
Premise
The systems meant to serve First Nations are rarely chosen by them.
First Nations are routinely handed digital systems — case-management tools, data platforms, AI — chosen by vendors or administrators without the communities those systems are meant to serve. The result is software that doesn't fit, data that flows to the wrong places, and services that suffer for it.
P · 03 · Pillars (3-up)
Governance
Governance framework
A framework for how First Nations can evaluate, govern, and steward the digital systems that run community services.
Platform
Waaseyaa
A modular system where governance and access control are structural, not bolted on.
Community
Minoo
The first platform built on Waaseyaa — for Indigenous languages, teachings, and community continuity.
P · 04 · Statement
Where we are
Early. We are not pretending otherwise.
OIATC is early. The council has two members today. The framework is in active drafting. The platforms are in active build.
P · 05 · Council (2-up)
Council member
Russell Jones
Began the work after a 2023 case-management contract revealed the gap between systems sold and systems needed.
Council member
Web Networks
Provides OIATC's hosting foundation and sits on the council as its second member.
P · 06 · Contact
08 · Iconography
Stroke. 1.5px. 24 grid. That's it.
A tiny set, drawn in one weight. Icons are used only where they serve navigation or wayfinding — never to decorate a paragraph.
Never use emoji. Never invent pictographs of Indigenous concepts or symbols. When representing culture, use typography or a photograph commissioned with consent — not iconography.
Arrow
Document
Card
Time
Mail
Council
Protocol
Search
When a concept lacks an appropriate icon, use an em-dash, a mono label, or nothing. A missing icon is always better than a wrong one.
09 · Voice
Declarative. Plain. Canadian.
We write the way a careful lawyer speaks at a table: clearly, once, without hedging. We do not use marketing verbs (empower, unlock, revolutionise). We do not use exclamation marks. We prefer full sentences over hype.
Eyebrows use sentence case in mono caps (THE COUNCIL, WHY WE EXIST). Headlines use serif, Title Case-with-Sentence-Breaks. Body uses sentence case always.
Do
A council of two, working to improve the digital systems that deliver services to First Nations.
Don't
We're on a mission to revolutionize Indigenous tech!
Do
OIATC is early. The council has two members today.
Don't
OIATC is an emerging leader in the Indigenous technology space.
Do
Protocol before product. Consent before architecture.
Don't
Innovative, human-centred solutions that empower communities.
Do
Email Russell.
Don't
Let's chat! 🚀
Do
Behaviour, organisation, programme.
Don't
Behavior, organization, program.
Eyebrow
UPPERCASE · MONO
Category label above a section title.
Headline
Serif · 300 · Sentence case
One claim. As short as we can stand.
CTA copy
Verb first · no emoji
“Email Russell” · “Read the framework”
10 · Accessibility
Plain sites are usually accessible sites — but we check.
Targets below are minimums. Where we can exceed them without harming the design, we do.
Contrast — body textAA+ · ≥ 7:1 where possibleInk on Paper measures ~13:1 in light, ~14:1 in dark.
Contrast — secondary textAA · ≥ 4.5:1Ink-2 on Paper verified in both modes.
Contrast — UI (buttons, rules)AA · ≥ 3:1Rule-strong and button borders meet 3:1 against surfaces.
Focus ring2px outline · ember · 2px offsetEvery focusable element. Never removed.
Reduced motionRespect prefers-reduced-motionReveal animations become instant; no transforms.
Hit targets≥ 44 × 44 pxButtons and nav links meet this at every density.
Languagelang attribute setAny Anishinaabemowin phrases receive their own lang attribute.
Skip linkKeyboard-firstSkip to content is the first focusable element on every page.
Landmarksheader · nav · main · footerEvery page exposes the same four landmarks in the same order.