The Assure design system

How Assure looks: its logo, colours, type, shapes and states, with their exact values. Everything made for Assure follows it: the website, the product, emails, social posts and video.

The logo is a check inside the family braces, followed by "Assure" in Figtree 800. The braces and the name are in ink. The check is drawn in orange metal, running from #F59A5C through #C2410C to #7A2508, and lifted on dark grounds to #FFC39A, #FB923C and #D9661F.

• The braces are shared by Canine's four products and mark them as one family. The check and its orange belong to Assure.
• The check belongs to the logo only. It is never used as a state, a pass mark or beside a score.
• The light version goes on light grounds and the dark version on dark grounds. The name is never retyped next to a drawn mark, and the braces are never redrawn.
• The logo is at least 24 px high, with clear space of half its height around it. Under 32 px, a small mark takes its place: the same symbol with heavier strokes and fewer parts. In browser tabs it sits on a rounded dark tile.
• "by Canine Development" goes below the logo or in the footer, and "Powered by Canine Code Analyzer" goes in the footer.

Assure has one accent: orange, drawn as brushed metal. As a flat colour it is #C2410C on light grounds and #FB923C on dark. It marks the main action, the done state and the progress fill. It is never used for a warning, and never for "nothing found".

• Pages sit on the page background, alternate bands on the band colour and cards on the card colour.
• The header and the first section sit on the graphite top in both themes, with light falling across it from the top left. Sections below follow the theme.
• The metal is a diagonal run from light to deep with a soft highlight along the top. Buttons take quiet metal: a short run with no shine, a faint light line along the top edge and a small, close shadow. The metal stays on small parts, never on large areas.
• On light, cards carry a soft shadow. On dark, they carry a 1 px border and no shadow.

• Headlines have tight letter spacing and balanced wrapping. Body lines stay near 65 characters.
• A heading that ends on its payoff draws that last part in the orange metal, and the rest stays in text colour. Labels, questions, steps and legal headings stay in one colour.
• Mono is for small things only: the Example tag, repository names and text that goes to the user's AI.
• Both typefaces are open source, under the SIL Open Font License.

• Buttons, chips, tags and progress bars are pills. Touch targets are at least 44 px.
• Cards have 24 px corners and the hero progress card 28 px. Social and video formats use 40 px.
• One idea per card.

A state is never shown by colour alone. Apart from the check in the logo, Assure uses no ticks, shields or padlocks.

Product moments only: the progress card, the agent chat, the progress bar. No stock photos, shields, padlocks, hackers, robots or glowing brains. Every illustrative result carries the Example tag where it appears.

The count ticks down as items get done, bars fill, and finished chips strike through. All motion respects the reduced-motion setting.

Every design meets WCAG 2.2 AA in both themes. States carry words and shapes. Focus is always visible. Every layout works at 320 px wide.