Idea Studio
Design System
The single source of truth for how Idea Studio looks, reads and behaves: brand foundations, interface components, and the rules that hold them together.
Six ideas under every decision.
When a choice is unclear, these break the tie. They apply to a headline, a layout and a line of code alike.
We design for how the work reads in ten years. Restraint ages well; novelty rarely does.
Every part belongs to a family. We build rules and components, not one-off screens.
Alignment, proportion and rhythm are the craft. Nothing sits by accident.
Say more with less. If it can be simplified without losing meaning, simplify it.
Colour, motion, a border, each does a job, or it's cut.
Change only what improves the outcome. The system evolves on purpose.
Intelligent, natural, concise.
We write like a sharp, unhurried partner, clear, a little dry, never selling. If a line sounds like marketing or like a machine wrote it, rewrite it.
We sound like
- Plain, confident sentences that respect the reader.
- Specifics over adjectives, what it is, what it did.
- Canadian spelling: colour, behaviour, centre.
- Dry wit where it fits, never forced.
We avoid
- Hype and superlatives, "revolutionary", "world-class".
- Clichés and empty transitions.
- AI tells, "delve", "tapestry", "it's not just X, it's Y".
- Exclamation marks and emoji in copy.
A lightning bolt, built from an i and an s.
The mark is a lightning bolt. Look closer and it resolves: the dot at the top forms an i, and the stroke reads as an s, the initials of Idea Studio. One form carrying both energy and identity.
Downloads
Vector SVG, single colour, built to sit on any background. Use the reverse set on dark, the standard set on light. Keep clear space around the signature equal to the height of the bolt; never recolour, stretch or rebuild the spacing.
Deep navy, one electric cyan.
The system runs on near-black navy, a single high-energy cyan, and a calibrated set of slate greys for text. A green and an orange serve as limited secondary accents. Every colour is a token that flips between dark and light. Hover a band to open it, then click a value to copy.
Secondary, limited use
Two accents for specific jobs only. Green marks positive and success states and simple data; orange marks attention, warnings and warm highlights. They never carry a page, never replace cyan, and appear sparingly.
#7CE6B8Success, positive, data#FF6B6BAttention, warning, warm accentWhen to use cyan
The single brand accent: one primary action or link per view, focus states, the active state. If two things are cyan, one is probably wrong.
Navy is the surface; the slate steps carry all text and hairlines. This is 90% of any screen, quiet on purpose.
Cyan is the only colour with meaning. Reserve it for the single most important action in a view. Everything else is navy and slate; green and orange stay secondary.
Two typefaces for the brand. One for the data.
Berthold City, condensed italic uppercase, is the display voice, used only at the largest, most deliberate moments. General Sans carries everything you read, building the whole hierarchy from its own weights. A system monospace (SF Mono, Menlo) sets mechanical values: hex codes, specs and code. This guide practises the restraint: every heading here is General Sans.
--font-displayUse: hero & case titles, the wordmark. Little else.Hierarchy, built in General Sans
General Sans gives the full range, Regular through Bold with real Medium and Semibold, plus true italics. Size, tracking, colour and case do the rest, and the nav and UI labels sit on a 500. No synthetic weights.
The monospace is the platform's own stack, not a shipped webfont: the right, lightweight choice for values a machine cares about.
How the UI behaves.
Enough of the interface language to build something that feels part of the site: the pieces you'll actually reach for. Everything here is the site's own CSS, so a specimen is the real component, not a picture of one.
Buttons & links
One primary action per view, in cyan. Everything secondary is quieter: an outline or a plain link. Buttons are uppercase, 40px tall, 6px radius; hover brightens, never moves.
brightness(1.12)Focus: 2px cyan ringInputs & states
rgba(51,194,255,.18)Cards & motion
Life below the surface
A reef bringing a coastline back to life.
reduced-motion fallback.--navy-panelFilm & audio Audio proposed
Media never autoplays with sound. Video shows a poster with one circular play control that fills cyan on hover. The audio player is a proposal: a compact pill for score, VO or a cutdown, sharing the video control's shape so the media family reads as one.
Loaders & lightbox
The page loader is the bolt itself: cyan charges through the mark, then it flies at the viewer once the page and every 3D model are ready. Substantial images open into a near-opaque lightbox at up to 94vw / 84vh, which is why we source them at full resolution.
Working with the system.
This system is generated from the live site, so what you see here is what ships. A few things to keep us in step:
Start from the parts. Reach for the colours, type and components defined here before inventing new ones. If you need something that isn't here, that's a conversation, not a guess. It probably belongs in the system.
Reserve cyan. One action accent per view. Lean on navy and the slates for everything else, and keep green and orange to their limited secondary roles.
Ask for anything missing. Source files, an extra logo lockup, a colour value, a component spec: we'll get it to you. Reach the studio ›
Idea Studio Design System · Generated from ideastudio.ca