Brand kit · v1.0
How Roddy looks, and why.
Every colour, typeface, texture and movement the site uses, in one place. This is the reference we design against, and the one we hold ourselves to.
Proprietary. Permission required.
The Roddy Technologies name, mark, wordmark, colour system, typography, illustrations, textures and motion are the property of Roddy Technologies. They are published here so partners, press and clients can represent us accurately, not for reuse. Any use outside that needs written permission from us first.
Contact us for permissionPrinciples
Dark first
The dark surface is the design, not a theme. Light mode is derived from it, never the other way round.
Two blacks, one hairline
The page and everything resting on it are one step apart, separated by a hairline. Nothing goes lighter than that.
Blue means act
Roddy Blue marks the one thing to do on a screen and the thing you have selected. It is never decoration.
Motion explains
Everything that moves is explaining a relationship: where content came from, what a thing is, what just changed.
Literal icons
An icon animates as the object it depicts. The globe turns, the envelope opens, the book opens and closes.
Quiet by default
One idea moves at a time, briefly, and settles. Nothing loops for attention except where the brand speaks.
The mark
Technologies
The R mark stands alone below 1024px and anywhere the wordmark would fall under 16px. The lock-up pairs the mark with Technologies at a 10px gap. White on dark, Roddy Blue on light.
Never
Rotate, slant, stretch or re-proportion the mark
Recolour it outside white and Roddy Blue
Add glows, shadows, outlines or gradients
Place it on a busy image without a scrim
Rebuild the wordmark in another typeface
Clearspace: half the mark's height on every side. Minimum: 24px, 16px in extremis.
Colour
Surfaces
Roddy Blue
Card accents
Promo cards carry one of four blues so a menu reads as a family rather than a repetition. They never appear as UI colour.
Typography
DM Sans 399
One family, loaded as the variable cut so the weight axis is continuous. 399 is the site weight: it holds at 56px without turning editorial, and reads at 14px without going frail. Heavier weights are interface chrome only - navigation, buttons, labels.
| Style | Family | Weight | Desktop | Mobile |
|---|---|---|---|---|
| Hero H1 | DM Sans | 399 | 56 / 64 | 38 / 44 |
| H2 | DM Sans | 399 | 44 | 32 |
| H3 | DM Sans | 399 | 28 | 24 |
| Body | DM Sans | 399 | 17 | 16 |
| Navigation | DM Sans | 500 | 15 | 15 |
| Buttons | DM Sans | 600 | 15 | 15 |
| Meta | DM Sans | 500 | 13 | 13 |
Texture
Noise · 13%
Hero stages and anything carrying footage or a large flat field. Overlay blend, generated from SVG fractal noise - no bitmap ships.
Grain · 7%
Every panel that sits on the ground: the navigation menus, the assistant, the sign-in surface. Painted straight, not blended - on near-black an overlay blend resolves to nothing, which is what left the panels reading flat.
Icons
One geometric family, 24px box, 1.5px stroke, round caps. Each animates as the thing it is - hover any of them.
Motion
Panel swap
260ms · cubic-bezier(.33,0,.2,1)
Content leaves left and arrives from the right on one curve, with the panel height on the same duration so it settles as one piece.
Drawer
340ms in · 220ms out
The assistant panel slides from the right and leaves faster than it arrives, which is what makes dismissal feel obedient.
Icon motion
0.4s–1.9s loops
Literal to the object, running only while hovered.
Shimmer
2.6s loop
Reserved for the one primary suggestion in the assistant. Nothing else loops light.
Reveal
650ms, 18px rise
Sections arrive once on scroll. They never re-animate.
Reduced motion
Everything stops
Every animation on the site is gated. Nothing essential is communicated by movement alone.
Components
Assets
Downloading an asset does not grant a licence to use it. See the notice at the top of this page.