Logo & brand guidelines
The Caster mark combines a caster wheel and mounting plate — a literal reference to the cleaning equipment the system serves, and a structural metaphor for what a design system does: carry load and enable movement. The full lockup pairs the mark with the caster wordmark (JetBrains Mono Bold, outlined to vector) and the {DESIGN SYSTEM} tagline.
Three variants
Each variant covers a specific contrast context. Always use the provided SVG files — never reconstruct from type or recolor manually.
Each variant ships in three scopes: full logo (mark + wordmark + tagline), wordmark logo (mark + wordmark, no tagline), and mark only. Use the scope appropriate to the context and available space.
Color values
The five hex values that make up every Caster variant. Defined in Figma as design tokens.
| Token | Hex | Used for |
|---|---|---|
| Blue | #0021A6 | Mark (circle), wordmark, tagline in Blue variant |
| Blue dark | #0D1A4D | Mark shadow in Full Color variant |
| Amber | #EFAA22 | Mark plate in Full Color variant |
| Amber accessible | #8B5A00 | {DESIGN SYSTEM} tagline on light backgrounds (WCAG 2.2 AA) |
| Off-white | #F4F5F7 | Wordmark and tagline in Light variant |
#EFAA22 on white has a contrast ratio of ~2.7:1 — fails WCAG 2.2 AA. The {DESIGN SYSTEM} tagline uses #8B5A00 on light backgrounds, already applied in the Full Color SVG files. Do not swap in the brighter amber for tagline text.
When to use which variant
Match the variant to the surface beneath it. Never place Full Color or Blue on a dark background; never place Light on a light background.
| Background | Correct variant |
|---|---|
| White / light neutral | Full Color |
Amber (#EFAA22) |
Blue |
Navy (#0021A6) |
Light |
| Black / very dark | Light |
| Dark photography or imagery | Light |
When placing the logo over imagery, ensure sufficient contrast beneath the mark and wordmark. If contrast cannot be guaranteed, add a scrim or use a solid background crop.
Components & lockup
The logo has three components that can be used independently or combined. Pick the scope appropriate to the context.
Use the full logo for identity-heavy contexts (cover pages, OG images, print). Use the wordmark logo for navigation headers and most UI — drop the tagline when context is clear or space is constrained. Use the mark only for favicons, app icons, and contexts below ~160px wide. Do not use the wordmark without the mark. The mark may appear without the wordmark.
Minimum sizes & clear space
Below the minimum, switch to the next simpler scope: drop the tagline first, then switch to mark only.
200px · full logo
160px · wordmark
24px · mark
Maintain a minimum clear zone around the logo equal to half the height of the mark on all four sides. At native export size (mark height: 73px), this is approximately 36px. Scale this proportionally with the logo. Nothing — text, other logos, UI elements, image edges — should enter the clear zone.
Don'ts
Common ways the logo gets misused. Each rule exists to protect the brand or accessibility.
#EFAA22 fails WCAG 2.2 AA on light backgrounds. Use #8B5A00 for tagline text.
File reference
All files live in design-system/assets/. SVG only — for PNG, export from the Figma source at the required resolution.
blue-mark.svg · Blue mark
light-mark.svg · Light mark Wordmark logo (mark + caster) blue-yellow-wordmark.svg · Full Color wordmark
blue-wordmark.svg · Blue wordmark
light-wordmark.svg · Light wordmark Full logo (mark + caster + {DESIGN SYSTEM}) blue-yellow.svg · Full Color logo
blue.svg · Blue logo
light.svg · Light logo
Recommended PNG export sizes: 32, 64, 128, 256, 512px for the mark; 2× and 3× of the intended display size for the full lockup.