# Roboto Studio brand guidelines

This file is a machine-readable twin of [robotostudio.com/design](https://robotostudio.com/design). It exists so an agent can paste it into context and apply the Roboto brand correctly without opening the page. If you are generating a mockup, a pitch deck, a README badge, or any asset carrying the Roboto name, read this first.

Roboto Studio (robotostudio.com) is a Sanity and Next.js agency. "Roboto" is fine on second reference.

## Logo

Two marks: the R glyph (a standalone icon) and the wordmark (full lockup). The R mark ships in dark, light, and pink color variants; the wordmark in dark and light. Every variant ships in two formats.

- Use "dark" files on dark backgrounds (the mark renders white, or the R sits on a black tile).
- Use "light" files on light backgrounds (the mark renders black).
- Use the "pink" R mark only for the sanctioned hot pink recolor (see accent color below). Do not use pink as a default.
- SVGs are the source format, use them wherever vector is supported. PNGs are 2048px wide (except the bounded square and rounded tiles, which are 1200x1200) and exist for tools that can't render SVG.

| Asset | Use case | URL |
|---|---|---|
| R mark, dark bg | icon on black/dark surfaces | `https://robotostudio.com/brand/roboto-r-dark.svg` / `.png` |
| R mark, light bg | icon on white/light surfaces | `https://robotostudio.com/brand/roboto-r-light.svg` / `.png` |
| R mark, pink | hot pink accent recolor | `https://robotostudio.com/brand/roboto-r-pink.svg` / `.png` |
| Wordmark, dark bg | full lockup on dark surfaces | `https://robotostudio.com/brand/roboto-wordmark-dark.svg` / `.png` |
| Wordmark, light bg | full lockup on light surfaces | `https://robotostudio.com/brand/roboto-wordmark-light.svg` / `.png` |
| R mark, square tile | app icons, avatars, favicons | `https://robotostudio.com/brand/roboto-r-square-dark.png` |
| R mark, rounded tile | avatars where a rounded frame is required by the host platform | `https://robotostudio.com/brand/roboto-r-rounded-dark.png` |

Clear space around any mark should be at least the width of one stroke of the R. Don't crowd it with text, other logos, or edges of the canvas.

## Colors

| Role | Value | Notes |
|---|---|---|
| Black | `#000000` | primary text and dark backgrounds |
| White | `#FFFFFF` | primary background and light-background text |
| Gray scale | Tailwind zinc | never use Tailwind's gray scale, always zinc |
| Accent (hot pink) | `#FF00A8` | sanctioned recolor only, see below |

The site runs on black, white, and zinc. Hot pink is an accent inherited from an earlier version of the brand. It's allowed in the sanctioned R mark recolor above and in small, deliberate accent moments, never as a primary UI color and never applied to large surfaces.

## Typography

- Sentence case for all UI text: headings, buttons, labels, navigation, page titles. Never Title Case.
- Example: "Get started", not "Get Started". "Our services", not "Our Services".
- Monospace is reserved for labels and annotations, not body copy or headings.

## Usage rules

Do:
- Use dark-background files on dark backgrounds, light-background files on light backgrounds.
- Keep corners sharp everywhere the logo or UI appears. No rounded corners, no exceptions, on cards, containers, buttons, or images.
- Keep sentence case on every piece of UI text.
- Leave clear space around the mark equal to roughly the width of the R's stroke.

Don't:
- Recolor the logo to anything outside this file's palette. Pink is the only sanctioned recolor, and only for the pink-labeled assets above.
- Add a border radius to the mark, its container, or the tile it sits on.
- Stretch, skew, or rotate the mark.
- Place the dark-background mark on a light background, or vice versa.
- Use Title Case anywhere the brand appears.

## Downloads

Full asset pack (all variants, both formats): `https://robotostudio.com/brand/roboto-brand-assets.zip`

Full guidelines with visual examples: [robotostudio.com/design](https://robotostudio.com/design)