Design and brand
The Roboto Studio logo, colors, and usage rules. Download the marks, copy the exact hex values, and keep the brand consistent wherever it appears.
Logo
Marks and formats
Two marks, two backgrounds, no exceptions. Dark files on dark, light files on light, SVG as the source format.
The R glyph stands on its own where space is tight. The wordmark is the full lockup. PNGs exist for tools that can't render vector. Copy the SVG markup straight from a card, or download either format.
Hot pink
Sanctioned accent
Hot pink survives from an earlier version of the brand in exactly one place: the sanctioned recolor of the R mark.
Never a primary UI color, never on large surfaces. The hex is exact.
Colors
Palette
The site runs on black, white, and zinc. Never Tailwind's gray scale, always zinc.
Click any hex value to copy it.
Typography
Type system
One family carries everything. Body copy sits one weight down, and monospace is reserved for labels and annotations.
Sentence case for all UI text: headings, buttons, labels, navigation, page titles. Never Title Case. "Get started" not "Get Started", "Our services" not "Our Services".
How we build editorial experiences
Body copy sits in the same family, one weight down. Monospace is reserved for labels and annotations.
Label / annotation
Usage
Rules
Most of the rules come down to restraint. Sharp corners, sentence case, and clear space around the mark.
Do
- Use dark-background files on dark backgrounds, light-background files on light.
- Keep corners sharp on the mark, its container, and every card, button, or image.
- Keep sentence case on every piece of UI text.
- Leave clear space around the mark equal to the width of the R's stroke.
Don't
- Recolor the logo to anything outside this palette. Pink is the only sanctioned recolor.
- Add a border radius to the mark, its container, or the tile it sits on.
- Stretch, skew, or rotate the mark.
- Place a dark-background mark on a light background, or the reverse.
Downloads
Take the brand with you
Everything on this page, packaged. A zip for humans and a markdown twin for agents.
The markdown twin lets an agent apply the brand without opening this page.