Surge Design System
The source for how Idea Studio looks, reads and behaves.
Power in every action.
Surge is the system that lives across every Idea Studio surface, brand, interface and product: the principles, the voice, the mark, the colour, the type and the components that follow. Built on restraint, geometry and accessibility, it rewards the person using it with a charge of power at every decision and every action. The light that rides a control is its most visible form; the same intent runs through everything here.
Experience the Surge design system by playing this simple game. Steer the blue light to draw and close a shape, keep clear of the red, and feel the same light that runs through the whole site.
The standards behind every decision.
When a choice is unclear, these break the tie.
Design for lasting value, not current trends.
Build reusable components, not one-off solutions.
Alignment, proportion and rhythm establish visual order.
Remove anything that doesn't improve understanding.
Every element has a defined function.
Change only when the result is better.
Intelligent, natural, concise.
We write clearly and directly. Every sentence informs, not persuades. If a line sounds like marketing or a machine, rewrite it.
We use
- Plain, confident sentences.
- Specifics before adjectives.
- Canadian spelling: colour, behaviour, centre.
- Dry humour, sparingly.
We avoid
- Marketing language and superlatives.
- Clichés and filler.
- AI tells: delve, tapestry, "it's not just X, it's Y".
- Exclamation marks and emoji.
A symbol of energy and identity.
The mark is a lightning bolt. Look closer: the dot forms an i and the stroke reads as an s, the initials of Idea Studio.
Downloads
Vector SVG, single colour. Use the reverse set on dark, the standard on light. Keep clear space around the signature equal to the height of the bolt; never recolour, stretch or rebuild it.
Deep navy, one electric cyan.
The system runs on near-black navy, one high-energy cyan and a set of slate greys for text. Green and 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 success and simple data; orange marks attention and warnings. 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: hover and selected states, focus rings and inline links. Buttons rest in slate and rise to cyan only when hovered or selected. If two things are cyan at once, 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.
The interface language 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
One button, used everywhere. An outline: transparent fill, hairline border, uppercase label, 40px tall, 6px radius, semibold. It never fills in. Hover and the selected state raise the border and text to cyan; nothing moves. There is no primary and secondary, only this button and a quieter inline link.
Button, or link? Controls are buttons; prose gets links. Anything you click to navigate or act, the top nav, filters, downloads, outbound links and the call to action, is the outline button. A plain text link is reserved for a reference inside running text, where a boxed button would break the line.
--line border, --slate textHover / selected: --cyan border + textFocus: 2px cyan ringThe Surge motion
Surge’s most visible expression, and the one motion a button makes. Press it and a spark of light is born on the outline, swells as it rides the top edge along the cyan highlight, then draws back down and fades, confirming the touch without filling the button or shifting it a pixel. The call to action pulses the same light slowly to draw the eye. It fires on every outline control: the nav and calls to action, downloads, arrows, the listen and audio players, the lightbox and the theme toggle. Deliberately restrained: one brief, accessible gesture rather than the scroll-driven theatrics common elsewhere, and reduced-motion removes it entirely. Original to Idea Studio, 2026. Press to feel it.
reduced-motionVariants
The button never changes shape; an icon names the action. A download pulls down. A link that leaves the site points up and away. Nothing else is added.
Status labels
A small squarish stamp for state that would otherwise read as stale: availability, a freshly shipped page, a live feature. Body type, 11px, uppercase, 5px radius, with a tinted fill and hairline border in the state's colour. It sits at the end of a line, never on its own. Green marks a positive, current state; cyan marks something new. Any date is set in script so the notice never ages.
--green tintNew: --cyan tint5px radius · 11px · uppercaseIconography
One weight for every icon: monoline, 2px stroke, round caps, on a 24 grid, shown at the size they're used. Motion is purposeful: an icon moves only to show what it does. Hover any tile to see it.
Inputs & states
rgba(51,194,255,.18)Cards
Life below the surface
A reef bringing a coastline back to life.
reduced-motion fallback.--navy-panelFilm & audio
Media never autoplays with sound. Video shows a poster with one circular play control that fills cyan on hover. The audio player uses the Surge bar for its scrubber, the same hairline-and-glow progress track that drives the testimonial nav: a line at button-outline weight, a cyan glowing fill to the current point, no handle. Grab it to scrub.
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.
Say helloIdea Studio Design System · Generated from ideastudio.ca