The Assert design system

How Assert looks: its logo, colours, type, shapes, states and charts, with their exact values. Everything made for Assert follows it: the website, the team view, the reports and social posts.

The logo is a pulse inside the family braces, followed by "Assert" in Schibsted Grotesk 800. The braces and the name are in ink. The pulse is drawn in warm steel metal, running from #A7A7CA through #56557A to #2D2C4C, and lifted on dark grounds to #DFDFF1, #B6B6D6 and #8282A4.

• The braces are shared by Canine's four products and mark them as one family. The pulse and its warm steel belong to Assert.
• The pulse belongs to the logo only, and is never drawn as a chart or a state.
• 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.

Assert has one accent: warm steel. As a flat colour it is #56557A on light grounds and #B6B6D6 on dark. It marks the main action, the current sprint, work with the agents and resolved findings. It is never used for a warning.

• Pages sit on the page background, alternate bands on the band colour, and cards and tables on the card colour.
• Depth comes from 1 px borders in both modes. Cards carry no shadow. The only shadow is on metal buttons.
• The website's header and first section sit on the graphite top in both themes, with light falling from the top left. Sections below follow the theme.
• The accent is drawn as warm steel metal on buttons, the logo's pulse and the current sprint bar. Buttons take quiet metal: a short run with no shine. The metal stays on small parts, never on large areas.

• Headlines are tightened by 2% and wrap balanced. Body lines stay near 65 characters.
• A heading that ends on its payoff draws that last part in the warm steel metal, and the rest stays in text colour. Labels, questions, steps and legal headings stay in one colour.
• Schibsted Grotesk is also the logo's typeface.
• Mono is for small things only: labels, the Example tag, chart values, sprint names, module names and file paths.
• Both typefaces are open source, under the SIL Open Font License.

• Buttons, cards, panels and tables have 6 px corners. Map tiles and tags have 4 px. Chart bars round their top corners by 3 px. Cards in social posts have 12 px.
• Lines are 1 px hairlines; the chart baseline is in ink.
• Space separates groups; rows inside a group stay close.
• Controls are at least 44 px high.

A state is never shown by colour alone.

• Sprint chart: bars start at zero. Earlier sprints are grey, the current sprint is warm steel, and each bar carries its value.
• Module map: tile size and colour strength both follow the number of open findings, and a caption says so. Each tile carries its module name and count.
• Score by quarter follows the sprint chart's rules.
• The score is a plain number on the 0 to 100 scale, with its change. Never a percentage.

Product moments only: the sprint chart, the module map, the team view and the reports. No stock photos, avatars or faces, and nothing that reads as certification, such as shields or seals. Every illustrative figure carries the Example tag.

Every design meets WCAG 2.2 AA in both modes, and chart bars reach 3:1 against their card. States carry words and shapes. Focus is always visible. Every layout works at 320 px wide.