The Assay design system

How Assay looks: its logo, colours, type, shapes and results, with their exact values. Everything made for Assay follows it: the website, the reports on screen and in print, and every example.

The logo is a lens inside the family braces, followed by "Assay" in Source Serif 4 700. The braces and the name are in ink. The lens is drawn in bronze metal, running from #D2A776 through #8A5D33 to #4A2F16, and lifted on dark grounds to #EAD2B4, #C99A6A and #9A6E44.

• The braces are shared by Canine's four products and mark them as one family. The lens and its bronze belong to Assay.
• The lens belongs to the logo only. It never marks a result or a check.
• The light version goes on light grounds and the dark version on dark grounds. The name is never retyped.
• 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.
• "Assay by Canine Development. Powered by Canine Code Analyzer." sits below the logo or in the footer.

Assay has one accent: bronze. As a flat colour it is #8A5D33 on light grounds and #C99A6A on dark. It marks the main action, links and the section numbers in a report. The palette has no green or red: results are carried by words and shapes, never by colour.

• A printed report uses a white page.
• Depth comes from lines in both modes. Cards carry no shadow. The only shadow is on metal buttons.
• The website's header and first section sit on a light paper, falling from top to bottom. The bronze is the metal, as foil.
• The accent is drawn as bronze foil on buttons and the logo's lens. Buttons take quiet metal: a short run with no shine. The metal stays on small parts, never on large areas.

• Screen text is set at 17 to 18 px.
• A heading that ends on its payoff draws that last part in the bronze metal, and the rest stays in text colour. Labels, questions, steps and legal headings stay in one colour.
• Source Code Pro appears only where a reader may need to copy a value exactly.
• Figures that line up in columns use tabular, lining numbers.
• Both typefaces are open source, under the SIL Open Font License, and are served from Canine's own site.

• Buttons, cards, labels and tags have 2 px corners.
• A 2 px rule in ink opens each major block, as in a printed report. Rows are separated by 1 px hairlines.
• Controls are at least 44 px high.

Each result appears as its word on a small label.

• Every illustrative report, figure and name carries the EXAMPLE tag in the same block. A printed example page also says that names and figures are illustrative.
• Pictures show report pages and the path from a decision to its evidence.
• No people, no AI imagery, and nothing that reads as certification or valuation, such as shields, seals, ticks or currency symbols.

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