https://sbpoconsulting.com/gallery/ https://sbpoconsulting.com/gallery/sbpo-consulting-colour-system-design-tokens.png The SBPO Consulting colour system The full colour system used to build this website. One accent, a warm paper ground rather than pure white, and every pairing contrast-checked before it was used anywhere. https://sbpoconsulting.com/gallery/sbpo-consulting-typographic-scale-specimen.png The SBPO Consulting typographic scale Seven steps, each interpolating fluidly between mobile and desktop with clamp(). A serif for display, a tight sans for text, and a body measure capped at 68 characters. https://sbpoconsulting.com/gallery/sbpo-consulting-button-states-focus-accessibility.png Control states and accessibility specification Every interactive component is designed in all of its states, including focus and disabled. The focus ring is defined once for the whole site and is never removed. https://sbpoconsulting.com/gallery/sbpo-consulting-layout-grid-vertical-rhythm.png Layout grid and vertical rhythm The grid the whole site is composed on, with the prose measure overlaid. Sections are separated by a hairline or a change of tone — never by a shadow. https://sbpoconsulting.com/gallery/sbpo-consulting-wcag-contrast-audit-matrix.png WCAG 2.2 contrast audit matrix The contrast audit for this site. Every ratio was calculated numerically rather than judged by eye, and the palette was chosen around the thresholds rather than adjusted to fit them afterwards. https://sbpoconsulting.com/gallery/sbpo-consulting-brand-mark-construction.png Brand mark construction The identity mark and its construction. Every raster asset on this site — favicon, touch icon, PWA icons, and the logo in the structured data — is generated from this one source file so they cannot drift apart.