The complete visual system behind UXcellerate. Every color, type style, spacing rule, component, and setup instruction. Built to work identically in Canva and Figma.
Three guardrails that keep every UXcellerate deliverable on-brand, whether it's a landing page mockup, a CRO report, or a vinyl sign.
Type is heavy, layouts are decisive, edges are hard. Color and motion provide the playfulness. Copy and forms do not.
Hierarchy comes from size, weight, and color. Never from gradients, glows, or blurs. If something needs to pop, make it bigger and put a hard shadow on it.
Borders, grids, mono labels, hex codes. Letting the construction show is the brand. We are the design people, we should look like it.
Four core colors do 95% of the work. Three accents handle labels and callouts. A small vault exists for links, errors, and edge cases. That's it.
Case study metrics stay ink-colored. Size and weight do the work, not color. Coloring +817% green signals "this needs help to read." Leaving it ink signals "the number speaks for itself."
Three typefaces, ten styles. Work Sans 900 for everything heavy, Red Hat Text for paragraphs, IBM Plex Mono for labels and code. All three live in Canva's native library.
Headings use Work Sans weight 900. Never "bold" in CSS. Always the explicit number.
ALL CAPS is reserved for display and label only. Body content stays sentence case.
Display (96px) is the page's loudest voice. Use it once at the top. Never twice.
Metrics in case studies are ink-colored. Size does the work, never color.
Red Hat Text italic is reserved for client testimonials and pull quotes. Never for emphasis (use bold).
Built on an 8px base with one 4px exception. Each space token is named after a relationship distance. You're not picking a number, you're asking: how close ARE these two things?
The buddy system meets the real world. These are the specific values used to lay out pages on uxcellerate.nl, mapped back to buddy tokens where possible.
| Layout rule | Desktop | Mobile | Token mapping |
|---|---|---|---|
| Container max width | 1440px | 1440px | fixed |
| Container side padding | 16px | 10px | friends / exception |
| Section top & bottom padding | 80px | 40px | total-strangers / half |
| Section title → content | 64px | 32px | strangers / acquaintances |
| Between card elements (X & Y) | 16px | 16px | friends |
| Text content → images | 32px | 32px | acquaintances |
Mobile container padding is the only value that breaks the 8px grid. 16px feels cramped at small viewports, 8px feels too tight to the screen edge. 10px is the sweet spot. Document the exception, then forget about it.
Borders are always 2px solid ink. Radius has four values. Shadows are asymmetric (1:1.5 ratio, heavier on the bottom), come in three sizes, and swap color based on the surface they're on.
Card on a light surface gets an ink shadow. Card on a dark surface gets a lime shadow. Button shadow is always ink, regardless of surface, because a lime button on dark with a lime shadow would lose its edge.
The signature treatment for any marine background. 64px windowpane grid in a slightly lighter navy. Aligns with the strangers spacing token, so cards and content snap visually to the grid without any extra effort.
Two crossed linear gradients painted on top of the marine base color. No images, no extra HTTP requests, scales infinitely.
/* Apply to any marine surface */ .uxc-grid { background-color: #012438; /* marine */ background-image: linear-gradient(to right, #0D5164 1px, transparent 1px), linear-gradient(to bottom, #0D5164 1px, transparent 1px); background-size: 64px 64px; }
background-size: 64px 64px, the lines form a perfect windowpane.strangers spacing token. The grid line color is a vault token: grid-line / #0D5164. Both intentional, so the grid integrates with the buddy system rather than fighting it.Three official lockups. The mark itself already uses your design tokens (24px radius, 2px ink border, 4px/6px shadow) so it's a perfect application of the system.
Don't change the lime green. Ever. Not even slightly.
Don't add a drop shadow if the lockup is already on a colored card with its own shadow.
Don't stretch, skew, rotate, or outline the wordmark.
Don't put the wordmark below the minimum size of 24px height.
Don't put the mark on a lime background. Lime on lime is invisible.
Don't recolor cellerate to lime. The two-color contrast IS the logo.
No custom icon set needed. Lucide icons at 2px stroke weight match the system's border token exactly, so icons visually belong with everything else. Outline style only.
| Size | Use |
|---|---|
16px | Inline with body text, inside labels |
20px | Inside buttons (next to text), inline with H4 |
24px | Default standalone size, list items, feature cards |
32px | Section headers, callout icons |
48px | Hero icons, feature illustrations |
Six components, each shown on light and dark surfaces. Every shadow, radius, padding, and border value is locked. Build once, use forever.
A defensive label class that stays sized to its content at every viewport. Solves the "label stretches to 100% width on mobile" problem caused by applying it to block elements like paragraphs.
/* Sky default. Works inline or standalone. */ .uxc-label { display: inline-block; max-width: fit-content; /* prevents mobile stretch */ font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.2; background: #C2E8FF; color: #000D14; border: 2px solid #000D14; border-radius: 9999px; padding: 8px 16px; box-shadow: 2px 3px 0 #000D14; text-decoration: none; vertical-align: middle; margin: 0; } /* Color variants */ .uxc-label--mint { background: #F2FDDC; } .uxc-label--lime { background: #BDF752; } .uxc-label--white { background: #FFFFFF; }
max-width: fit-content defends against mobile stretching when the class lands on a block element.uxc-label (or uxc-label uxc-label--mint for a variant).<span class="uxc-label">...</span>. Use this when the label sits within other text.The highlight sits behind the heading text so descenders from the line above (g, y, p, j) appear on top of the lime block instead of getting covered by it. Editorial design detail. The pseudo-element + z-index: -1 is what makes it work.
/* The element holds layout, the ::before holds the lime block */ .highlight { position: relative; color: #000D14; padding: 0 0.15em; display: inline-block; line-height: 1; } .highlight::before { content: ''; position: absolute; inset: 0; background: #BDF752; border: 2px solid #000D14; border-radius: 12px; z-index: -1; } /* Critical: heading owns the stacking context. Without this, z-index: -1 pushes the lime behind the page entirely. */ h1, h2, h3, h4 { isolation: isolate; }
<span class="highlight">impact.</span> Punctuation goes inside the span so the lime block looks finished.<span class="highlight">...</span>. Switch back to Edit visually and you're done.Design without research is just decoration. No fluff. No guesswork. Every decision has a purpose.
Cierpa Kaizen redesign. Four weeks, one product page, four times the demo requests.
Sky callouts: neutral information and process notes.
Mint callouts: best practices, recommendations, "do this instead" notes.
Lime callouts: the most important takeaways. One per page, max.
A product page rewrite and redesign that turned a wall of jargon into a clear value proposition. Four weeks of work, four times the demo requests.
Every value, ready to drop into Canva's Brand Kit or Figma's Variables panel.
| Token | Hex | Notes |
|---|---|---|
ink | #000D14 | Borders, type |
marine | #012438 | Dark page background |
paper | #F3FAFF | Light page background |
white | #FFFFFF | Card surfaces |
lime | #BDF752 | Signature accent |
sky | #C2E8FF | Soft callouts, labels |
mint | #F2FDDC | Tip callouts, labels |
link | #009FFD | Hyperlinks (vault) |
link-hover | #00619B | Hyperlink hover (vault) |
red | #F54343 | Errors only (vault) |
| Role | Font | Size / line-height / tracking |
|---|---|---|
metric | Work Sans 900 | 104px / 0.95 / -3px |
display | Work Sans 900 | 96px / 1.0 / -2.5px |
h1 | Work Sans 900 | 64px / 1.05 / -1.5px |
h2 | Work Sans 900 | 48px / 1.1 / -1px |
h3 | Work Sans 900 | 32px / 1.15 / -0.5px |
h4 | Work Sans 900 | 20px / 1.3 / 0 |
body-lg | Red Hat Text 400 | 20px / 1.5 / 0 |
body | Red Hat Text 400/600/700 | 16px / 1.5 / 0 |
body-sm | Red Hat Text 400 | 14px / 1.5 / 0 |
label | IBM Plex Mono 500 | 12px / 1.4 / +1.5px / UPPERCASE |
| Group | Token | Value |
|---|---|---|
| Spacing | besties | 4px |
| Spacing | siblings | 8px |
| Spacing | friends | 16px |
| Spacing | colleagues | 24px |
| Spacing | acquaintances | 32px |
| Spacing | neighbors | 48px |
| Spacing | strangers | 64px |
| Spacing | total-strangers | 80px |
| Radius | r-input | 16px |
| Radius | r-card | 24px |
| Radius | r-pill | 9999px |
| Border | border | 2px solid ink |
| Shadow | sh-sm-ink | 2px 3px 0 #000D14 |
| Shadow | sh-sm-lime | 2px 3px 0 #BDF752 |
| Shadow | sh-md-ink | 4px 6px 0 #000D14 |
| Shadow | sh-md-lime | 4px 6px 0 #BDF752 |
| Shadow | sh-lg-ink | 8px 12px 0 #000D14 |
| Shadow | sh-lg-lime | 8px 12px 0 #BDF752 |
Step-by-step for Canva Brand Kit and Figma Variables. Both tools stay in sync as long as you only edit token values inside these two locations.
Requires Canva Pro or Teams.
canva.com/brand. Create a Brand Kit called UXcellerate v1.Core (ink, marine, paper, white), Accents (lime, sky, mint), Vault (link, link-hover, red). Paste each hex from section 09.Use a single source-of-truth library file.
UXcellerate / Design System.UXcellerate Tokens → add a Color group. Paste each hex from section 09 as a variable.spacing (besties through total-strangers), radius (input, card, pill), border (always 2).This document is the single source of truth. When a token value changes, change it here first, then update Canva and Figma to match. Never edit a token in only one tool.