The CCA design system

How the Canine Code Analyzer (CCA) looks: its logo, colours, type, shapes and states, with their exact values. Everything made for CCA follows it: the website, the documentation, link previews, emails and code examples.

The logo is a radar inside the family braces: a beam from a centre point, with a trail along the rim that fades in behind it. It is followed by "CCA" in Schibsted Grotesk 800. The braces and the name are in ink. The radar is drawn in titanium metal, running from #CDAEBE through #7F5B6F to #492A3C, and lifted on dark grounds to #EAD8E2, #D0B2C1 and #A37F92.

• The braces are shared by Canine's four products and mark them as one family. The radar and its titanium belong to CCA.
• The radar belongs to the logo only.
• The light version goes on light grounds and the dark version on dark grounds. The logo's name is drawn in Schibsted Grotesk and never set in the text typefaces.
• 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.
• "Canine Code Analyzer, measured against CAI" sits beside or below the logo, and "Canine Development" sits in the footer.

CCA has one accent: titanium. As a flat colour it is #7F5B6F on light grounds and #D0B2C1 on dark. It marks the main action, links, the active documentation page and the keys in code.

• 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 titanium metal on buttons, the logo's radar and usage fills. Buttons take quiet metal: a short run with no shine. The metal stays on small parts, never on large areas.

• Both typefaces keep similar characters apart, with a slashed zero in running text too. The mono has no ligatures.
• A heading that ends on its payoff draws that last part in the titanium metal, and the rest stays in text colour. Labels, questions, steps and legal headings stay in one colour.
• Both typefaces are open source, under the SIL Open Font License, and are served from Canine's own site.

• Buttons, cards, code panels, tags and state labels have 4 px corners. Usage bars have 2 px.
• Lines are 1 px hairlines.
• Code panels use a line height of 1.6, and long lines scroll sideways.
• Controls are at least 44 px high.

States appear as words on small labels, in the mono: open, claimed, disputed, resolved, and reused for a result. The word carries the state; border and fill support it.

• Every request and response is labelled "Example".
• In code, keys are in the accent, punctuation is muted and values are in ink.

Product moments only, such as a request, its response and the path from a call to its result. No people, no AI imagery such as robots or glowing brains, and nothing that reads as certification, such as shields, seals or ticks.

Every design meets WCAG 2.2 AA in both modes, code included. States carry words. Focus is always visible. Every layout works at 320 px wide, with code panels scrolling sideways.