# Crayo brand guide

This is the official brand kit for Crayo. If you are an AI agent building a page, a deck or a tool that should look like Crayo, read this file top to bottom, then build. Every color, font and logo you need is here.

- Machine-readable version: `brand.json` (https://crayo.ai/brand.json)
- CSS variables: `tokens/crayo-tokens.css`
- Tailwind theme: `tokens/tailwind.theme.js`
- Logo files: `logos/` (all of them at https://crayo.ai/brand-kit)

## 1. What Crayo is

Crayo is an AI clipping editor that helps clippers turn long-form video into short-form clips for TikTok, YouTube Shorts and Instagram Reels, faster.

| | |
| --- | --- |
| Site | https://crayo.ai |
| Legal name | Crayo, Inc. |
| Contact | support@crayo.ai |
| Wikidata | https://www.wikidata.org/wiki/Q141780037 |
| X | https://x.com/CrayoAI |
| Discord | https://discord.gg/crayo |
| GitHub | https://github.com/crayoai |
| Crunchbase | https://www.crunchbase.com/organization/crayo |
| Trustpilot | https://www.trustpilot.com/review/crayo.ai |
| App Store | https://apps.apple.com/app/crayo-ai-video-editor/id6810797758 |

## 2. How to write the name

| Correct | Wrong |
| --- | --- |
| Crayo | CRAYO |
| Crayo AI | crayo |
| Crayo, Inc. | CrayoAI |
| crayo.ai | Crayo.ai |
|  | Crayo Inc |

- Write it Crayo: capital C, lowercase rest, in headings, buttons, body copy and documents.
- The wordmark is set in caps. That is the logo, not the spelling. Never type CRAYO in running text.
- Crayo AI is fine where you need to disambiguate, such as a search listing or a first mention.
- The legal entity is Crayo, Inc. Use it only in contracts, invoices and legal copy.
- Lowercase only in URLs and handles: crayo.ai, discord.gg/crayo.

## 3. Logos

| Logo | Use | Files |
| --- | --- | --- |
| Wordmark | Primary logo. Use on white and light backgrounds. | `logos/crayo-wordmark.svg`, `logos/crayo-wordmark-512.png`, `logos/crayo-wordmark-1024.png`, `logos/crayo-wordmark-2048.png` |
| Wordmark, reversed | For Crayo Blue, dark backgrounds and photography. | `logos/crayo-wordmark-white.svg`, `logos/crayo-wordmark-white-512.png`, `logos/crayo-wordmark-white-1024.png`, `logos/crayo-wordmark-white-2048.png` |
| Wordmark, blue | Accent version for white backgrounds. Use sparingly. | `logos/crayo-wordmark-blue.svg`, `logos/crayo-wordmark-blue-512.png`, `logos/crayo-wordmark-blue-1024.png`, `logos/crayo-wordmark-blue-2048.png` |
| App icon | The iOS app icon. Avatars, app listings and square slots. | `logos/crayo-app-icon-512.png`, `logos/crayo-app-icon-1024.png` |
| Circle icon | The app icon cut to a circle for profile pictures. | `logos/crayo-app-icon-circle-512.png`, `logos/crayo-app-icon-circle-1024.png` |
| Mark | The C and bolt on their own, for favicons and tight spaces. | `logos/crayo-mark.svg`, `logos/crayo-mark-512.png`, `logos/crayo-mark-1024.png`, `logos/crayo-mark-2048.png` |

- Do: Give the logo clear space at least the height of the bolt on every side.
- Do: Use the black wordmark on white and the white wordmark on Crayo Blue or dark images.
- Do: Link crayo.ai when you mention Crayo online.
- Do: Use the app icon, not the wordmark, for square avatars.
- Don't: Recolor, stretch, rotate, outline or add effects to the logo.
- Don't: Rebuild the wordmark in a font. It is custom lettering.
- Don't: Put the blue wordmark on blue or on busy images.
- Don't: Suggest Crayo endorses your product without written permission.

## 4. Color

White canvas, Ink type, Crayo Blue as the accent. Blue highlights one thing per view: a phrase in a headline, a link, a label. It is not a background for whole sections.

### Core

| Name | Hex | HSL | CSS variable | Use |
| --- | --- | --- | --- | --- |
| Crayo Blue | `#335CFF` | `228 100% 60%` | `--crayo-blue` | The one brand color. The primary button, links, a highlighted phrase in a headline, focus rings. |
| Ink | `#111827` | `221 39% 11%` | `--crayo-ink` | Headings, the wordmark and primary buttons. |
| Slate | `#5C6678` | `219 13% 42%` | `--crayo-slate` | Body copy and supporting text on white. |
| White | `#FFFFFF` | `0 0% 100%` | `--crayo-white` | The canvas. Every page starts white. |

### Support

| Name | Hex | HSL | CSS variable | Use |
| --- | --- | --- | --- | --- |
| Blue Hover | `#2D52E6` | `228 79% 54%` | `--crayo-blue-hover` | Hover and pressed fill for anything filled with Crayo Blue. Not a standalone color. |
| Icon Blue | `#1582FB` | `212 97% 53%` | `--crayo-icon-blue` | The app icon field. Only for the icon itself. |
| Muted | `#8B93A7` | `223 14% 60%` | `--crayo-muted` | Uppercase labels, meta text and captions. |
| Line | `#E7ECF6` | `220 45% 94%` | `--crayo-line` | Card borders and dividers. 1px. |
| Surface | `#F9FBFF` | `220 100% 99%` | `--crayo-surface` | Inset panels and secondary sections. |

## 5. Type

Inter for everything, weights 400, 500, 600, 700. Headlines are semibold with tight tracking. Labels are small, semibold, uppercase and letter-spaced.

| Role | Spec |
| --- | --- |
| Display | Inter Semibold · 56 / 59 · -0.025em |
| Heading | Inter Semibold · 30 / 36 · -0.025em |
| Body | Inter Regular · 17 / 27 |
| Label | Inter Semibold · 10.5 · 0.14em · uppercase |

## 6. Voice

Plain, specific, a little confident. Say what the product does and what it costs. No hype words, no exclamation marks, no em dashes.

- Write: "Find the best moments in a 3-hour stream in minutes."
- Avoid: "Revolutionary AI-powered next-gen content synergy."
- Write: "You pay per finished clip."
- Avoid: "Unleash limitless viral potential!!!"

Questions or a custom request: support@crayo.ai