The complete brand system behind the portfolio: logo, colour, typography and how it all stays consistent across every touchpoint.
Contents
Logo system
The SK monogram is the core of the identity. Always use the original files — never redraw or re-proportion it.
The SK monogram
The S and K flow together into a single shape. This is the default rendering on light backgrounds. On dark surfaces, the reversed (cream/white) variant is used.
Keep at least the height of the letter “x” (≈ half the logo height) clear around the logo. No text or elements within that zone.
Digital · 32pxPrint · 10mmBelow these sizes the monogram loses legibility. Use extra contrast at very small sizes.
Logo usage
The logo must always stand free with sufficient contrast. Below are the approved background combinations.
- — Use the original files, unaltered.
- — Respect the clear space around the logo.
- — Choose the variant with the highest contrast.
- — Place it on calm, even backgrounds.
- — Don’t distort, rotate or recolour it.
- — Don’t add shadows, outlines or effects.
- — Don’t place it on busy photos without an overlay.
- — Don’t stretch it or change its proportions.
Colour palette
Tokens map 1-to-1 with tailwind.config.js. Orange is the only primary action accent.
Base & surfaces
mainkleur / panelRGB 38 · 38 · 36Text and dark sectionscreme / surfaceRGB 242 · 243 · 217Page base (light sections)lichtRGB 228 · 219 · 210Text on dark, buttonscardRGB 255 · 255 · 255White card on creamPrimary action — orange gradient
verloop-oranje-startRGB 156 · 78 · 23Start of the CTA gradientverloop-oranje-midRGB 249 · 123 · 34Main orange: links, accentsverloop-oranje-endRGB 254 · 144 · 67End of gradient / lighter orangePastel accents — per-section signature
periwinkleRGB 177 · 193 · 239Soft-blue accentcoralRGB 242 · 172 · 172Pink / coral accentbutterRGB 255 · 221 · 148Warm yellow accentSecondary editorial accents — sparingly
oliveRGB 142 · 167 · 143Muted greendustyRGB 155 · 176 · 201Muted blueclayRGB 207 · 139 · 108Muted terracottaUsing tints
Lighter tints are made by placing the base colour on white at 80/60/40/20%. Use tints for backgrounds, hovers and layering — never as a replacement for the primary orange.
Semantic helpers (rgba)
hairlinergba(38,38,36,0.14)Subtle divider on lighthairline-lightrgba(228,219,210,0.18)Divider on darkmutedrgba(38,38,36,0.6)Muted body text on lightElements & applications
A few examples of how the elements come together in real applications.
Sander Kuyken
Brand · Web · Motion
Hairlines, pill tags and the orange CTA form the basis of the UI.
Pastels give each section its own signature, always beneath the orange.
Always use the master logo file — never redraw, auto-trace or screenshot the mark. The same mark appears in the site navigation and throughout this brand book.
SK Design — Brand book
Visual identity · v1.0 · 2026