# YNS brand guidelines (Your Next Store)

Version 1.0.0 · 2026-10-15. The complete brandbook for AI agents: every rule and every value in one file. The page for people: https://yournextstore.com/brand

Files next to this one: `tokens.json` (values), `tokens.css` (CSS variables `--yns-*`), `tailwind.css` (Tailwind v4 `@theme`), `assets/manifest.json` (logo and fonts with usage notes).

## 00. How to use this brandbook

The brand guidelines and assets kit of **Your Next Store (YNS)**. One source, three forms:

| For | What | File |
|---|---|---|
| People | This page and a PDF to share | `yns-brandbook.pdf` |
| AI agents | Every rule in one Markdown file, an index and a Claude skill | `brand.md`, `llms.txt`, `yns-skill.zip` |
| Code | Design tokens as CSS variables, Tailwind v4 theme and JSON | `tokens.css`, `tailwind.css`, `tokens.json` |
| Design | Logo (SVG/PNG), fonts and a file manifest | `assets/`, `yns-assets-kit.zip` |

Every value (colors, sizes, radii) comes from one token file, so all forms always match. Use the token files instead of copying values by hand.

> **For AI agents:** Working on something for YNS? Read the whole `brand.md` before the first visual or copy decision. The hard rules are in the “Checklist” chapter. When a rule does not cover your case, pick what is closest to yournextstore.com and say so in your answer – do not invent new colors or fonts.

---

## 01. Brand

**Your Next Store (YNS)** is an e-commerce platform: the simplest, fastest and most modern way to sell online. We describe it as *omakase-style commerce*: fewer knobs and better defaults. A merchant describes what they sell and AI builds the store in minutes, with currencies, languages and international payments from day one.

### Promise

> Your store ready to sell worldwide.

The homepage hero rotates the end of the sentence: *to sell worldwide*, *to grow*, *to launch in minutes*, *for AI commerce*. This is the backbone of our messaging: **Your store ready …** + one concrete benefit.

### Pillars

| Pillar | What it means | How we say it |
|---|---|---|
| Speed | A store in minutes, a fast storefront by default | “30 minutes, start to sold”, “Fast by default” |
| Simplicity | Fewer options, better defaults | “Fewer knobs and better defaults”, “Less plugins, more built-in” |
| AI that does the work | Elliot builds and grows the store | “You write a message, Elliot ships the change to your live store.” |
| Global from day one | Translations, currencies, taxes and payments | “Sell globally from day one” |
| A human when it matters | An expert steps in for what is important | “A human expert runs point when it matters.” |

### Names

| Name | Spelling | Notes |
|---|---|---|
| Your Next Store | Exactly like this, three capitalized words | Full name on first mention |
| YNS | Capitals, no dots | Short form after first mention and in technical copy |
| Elliot | First name only, no “AI” mid-sentence | The YNS AI assistant. In navigation: “Elliot AI” |

**Don’t:**

- “YourNextStore” in running text (only in the logo), “Y.N.S.”, “yns”, “Your next store”.
- “Elliot bot”, “chatbot”, “ElliotAI”.

### Audience

Small and mid-sized brands that want to sell online without an agency and without fighting plugins: coffee roasters, cosmetics, delis, nutritionists, publishers. Many move to YNS from Shopify, Wix or WooCommerce. Customer stories are the strongest proof we have – lead with them.

---

## 02. Logo

The logo is the **mark (the bag)** + the **“YourNextStore” wordmark**. The mark can stand on its own (favicon, avatar, small sizes). The wordmark is never used without the mark.

Files: `assets/logo/yns-logo-black.svg` (default), `yns-logo-white.svg`, `yns-mark-black.svg`, `yns-mark-white.svg`; PNG in `assets/logo/png/`.

### Rules

- **Color:** black (`#050505`) on light backgrounds, white on photos and dark backgrounds. Never in the gradient, violet or any other color.
- **Clear space:** keep free space around the logo equal to **half the mark’s height** (a 24 px tall logo needs 12 px on every side).
- **Minimum size:** the full logo from **16 px** tall on screen (about 95 px wide), 6 mm in print. The mark alone from 16 px.
- **Proportions** of the full logo: 142 × 24 (5.92 : 1). Scale proportionally only.

**Don’t:**

- Stretch, rotate, skew or add a shadow, outline or glow.
- Fill with the YNS gradient or recolor it to anything but black or white.
- Separate the mark and the wordmark or change their arrangement.
- Retype the wordmark in Geist instead of using the file.
- Place the black logo on a dark or busy background.

### Files

| File | Use |
|---|---|
| `assets/logo/yns-logo-black.svg` | Default: light backgrounds, web, documents |
| `assets/logo/yns-logo-white.svg` | Dark backgrounds, photos, black buttons |
| `assets/logo/yns-mark-black.svg` | Favicon, avatar, small sizes on light backgrounds |
| `assets/logo/yns-mark-white.svg` | The mark on dark backgrounds |
| `assets/logo/png/*` | Transparent PNG at 512, 1024 and 2048 px wide (full logo) and 64–1024 px (mark) |

---

## 03. Color

YNS is **light and almost black and white**. Color is the exception: violet is the only accent in the interface, and the YNS gradient appears in small doses. On a typical screen: about 90% white and grays, 9% black (text, buttons), at most 1% gradient and violet.

| Token | HEX | Contrast on `#FAFAFA` | Use |
|---|---|---|---|
| `black` | `#050505` | 19.5:1 | Headings, calls to action (black pill), logo on light backgrounds. |
| `ink` | `#0A0A0A` | 19.0:1 | Body text. |
| `muted` | `#6B6B6B` | 5.1:1 | Secondary text: lead under a heading, descriptions, captions. |
| `subtle` | `#A3A3A3` | 2.4:1 | Helper text and placeholders. Not for long text (contrast too low). |
| `background` | `#FAFAFA` | 1.0:1 | Page background. Near-white – never pure white for a whole page. |
| `surface` | `#FFFFFF` | 1.0:1 | Cards on the page background, glass, form fields. |
| `surface-muted` | `#F3F3F3` | 1.1:1 | Section cards (bento), illustration backgrounds. |
| `surface-strong` | `#E9E9EA` | 1.2:1 | Large section containers, secondary buttons. |
| `border` | `#E5E5E5` | 1.2:1 | Dividers and borders. |
| `violet` | `#8D22FD` | 5.3:1 | The only accent color in the UI: selection outlines, click highlights, background lines. Accents are violet, never blue. |
| `violet-soft` | `#F3E8FF` | 1.1:1 | Very light accent background (badges, selection). |
| `pink` | `#FD477B` | 3.2:1 | Only as part of the YNS gradient. Never on its own. |
| `rose` | `#F4A0A6` | 1.9:1 | Only in the background aura and the comet tail. |
| `magenta` | `#B234F9` | 4.2:1 | Only as the middle of the YNS gradient. |
| `purple` | `#9529F6` | 5.1:1 | Only in the comet (end of the arc). |

### YNS gradient

- **yns**: `linear-gradient(100deg, #FD477B 0%, #B234F9 55%, #8D22FD 100%)`. The brand gradient. On text: one or two words in a headline (e.g. “ready”). As a comet on an edge or a small blurred aura. Never as a large solid area of color.
- **aura**: `radial-gradient(60% 50% at 75% 60%, rgba(178,52,249,.35) 0%, rgba(244,160,166,.25) 45%, rgba(250,250,250,0) 75%)`. A heavily blurred glow in the hero background, always on one side and always fading into the #FAFAFA background.

### Rules

- **Light theme only.** Page background `#FAFAFA`, cards white or light gray. No dark themes or dark sections.
- **Calls to action are black**, not colored. So is the active navigation item: black background, white text.
- **The accent is violet, never blue.** That includes links, selection, focus rings and charts.
- **The gradient has three roles only:** a word in a headline, a comet on an edge, a small blurred aura in the background. Never a full background of a section, button or card.
- `pink`, `magenta`, `rose` and `purple` exist only as parts of the gradient – do not use them on their own.
- Status colors (success, error, warning) come from Tailwind’s defaults (`emerald-600`, `red-600`, `amber-500`) and are used for status only.

**Don’t:**

- Dark themes, dark or yellow variants.
- A strong gradient as the hero background.
- Blue accents or blue links.
- Gray fills or gray borders on glass.

---

## 04. Typography

One typeface: **Geist** (by Vercel, SIL Open Font License 1.1), with **Geist Mono** for code and labels. WOFF2 files (Latin and Latin Extended) are in `assets/fonts/`. In Next.js use the `geist` package (`GeistSans`, `GeistMono`) or `next/font/google`.

Typeface: **Geist** (fallback: Helvetica, Arial, sans-serif). Mono: **Geist Mono**.

| Style | Size (desktop / mobile) | Line height | Weight | Tracking | Use |
|---|---|---|---|---|---|
| `display` | 82px / 48px | 1 | 600 | -0.03em | Hero, one sentence. Two lines at most. |
| `h1` | 56px / 38px | 1.05 | 600 | -0.03em | Page title. |
| `h2` | 40px / 30px | 1.25 | 400 | -0.01em | Section heading. Regular weight, not bold. |
| `h3` | 20px | 1.4 | 500 | 0 | Card or feature title. |
| `lead` | 18px | 1.55 | 400 | 0 | Paragraph under a heading, two sentences at most. Color: `muted`. |
| `body` | 16px | 1.5 | 400 | 0 | Body copy. |
| `ui` | 14px | 1.7 | 500 | 0 | Buttons, navigation, labels. |
| `caption` | 13px | 1.5 | 400 | 0 | Captions, footnotes. Color: `muted`. |
| `eyebrow` | 12px | 1.4 | 500 | 0.08em | A short label above a heading. Geist Mono, uppercase. |

### Rules

- **Large headings are tight:** from 40 px up, negative letter spacing (−0.03 em for display and h1). Body text stays at 0.
- **Hero and h1 are semibold 600. Section headings (h2) are regular 400.** This contrast of weights is part of the look.
- **Leads and descriptions are gray** (`muted`), headings are black. Text meant to be read is never lighter than `muted`.
- **Gradient text:** one or two words in a headline at most, usually the key word (*ready*). Never a whole headline, never body text.
- Body line length: 45–75 characters. A lead is two sentences at most.
- Left-aligned. Center only short blocks: a section heading with one sentence under it.
- Page and section headings use Title Case, as on the website. Descriptive headings and body copy use sentence case.

**Don’t:**

- Other typefaces (Inter, SF Pro, Helvetica as the main face), serifs, italic headings.
- Bold 700 or heavier (600 is the maximum).
- ALL CAPS in headings. Capitals only in the eyebrow label (Geist Mono, 12 px).

---

## 05. UI elements

### Buttons

Every button is a **pill** (`border-radius: 9999px`), set in Geist 14 px / 500.

- **button-primary**: Main call to action: a black pill with a subtle sheen at the top. One per view.
  `background: radial-gradient(100% 50% at 50% 0, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 100%), #050505; color: #fff; border-radius: 9999px; padding: 12px 24px; font: 500 14px/24px Geist;`
- **button-secondary**: A light gray pill (Log in, Explore All Features).
  `background: radial-gradient(100% 50% at 50% 0, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 100%), linear-gradient(#EBEBEB, #EEEEEE); color: #3F3F3F; border-radius: 9999px; padding: 8px 20px; font: 500 14px/24px Geist;`
- **button-ghost**: Text only, next to the main call to action (Start for Free).
  `background: none; color: #6B6B6B; font: 400 14px/24px Geist;`

- **One black call to action per view.** A light or text button can sit next to it.
- Button labels: verb + object, each word capitalized as on the website: “Create a Shop”, “Get Started Free”, “Try YNS Free”, “Open Demo”.

### Cards and blocks

| Token | Value | Use |
|---|---|---|
| `radius-sm` | 10px | Thumbnails, small tiles. |
| `radius-md` | 14px | Inputs, small cards. |
| `radius-lg` | 22px | Cards and bento blocks (default). |
| `radius-xl` | 32px | Large section containers, illustration frames. |
| `radius-pill` | 9999px | All buttons, chips and badges. |

| Shadow | CSS | Use |
|---|---|---|
| `button` | `0 40px 24px rgba(0,0,0,.02), 0 23px 14px rgba(0,0,0,.02), 0 10px 10px rgba(0,0,0,.03), 0 2px 4px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.05)` | A layered, barely visible shadow for pill buttons. |
| `glass` | `0 18px 50px rgba(36,26,77,.12), 0 3px 10px rgba(0,0,0,.05), inset 0 1.5px 0 #fff` | White glass (captions, floating panels). With backdrop-filter: blur(18px) saturate(1.3). |
| `card` | `0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04)` | A white card on the #FAFAFA background. Gray cards (surface-muted) have no shadow. |

Spacing scale: `1`=4px, `2`=8px, `3`=12px, `4`=16px, `5`=24px, `6`=32px, `7`=48px, `8`=64px, `9`=96px, `10`=128px. Content width: 1208px.

- Section cards (bento) are **light gray** (`surface-muted`, `#F3F3F3`) with **no shadow and no border**. Inside: an h3 title and one or two sentences of gray description, with the illustration above the text.
- White cards on the `#FAFAFA` page background get the `card` shadow.
- Corners are large and soft: 22 px for cards, 32 px for section containers.

### White glass

Floating elements (captions in videos, panels over photos, badges over illustrations) are **white, translucent glass** in the style of Apple:

```css
background: rgba(255, 255, 255, .86);
border: 1.5px solid rgba(255, 255, 255, .95);
box-shadow: 0 18px 50px rgba(36,26,77,.12), 0 3px 10px rgba(0,0,0,.05), inset 0 1.5px 0 #fff;
backdrop-filter: blur(18px) saturate(1.3);
```

**Don’t:**

- Gray fills, gray bevels or gray edges on glass. Edges are light, white highlights.

### Badge

A pill with a small gradient orb (Elliot’s orb) and text: **“Meet Elliot** – AI Assistant”. The first part is dark, the second gray, separated by an en dash with spaces.

### Icons

Thin line icons (1.5 px stroke, round caps) in the text color, 16–20 px – the Lucide style used on the website. No filled, colored or 3D icons.

---

## 06. Comet, aura and background

The three ways the YNS gradient appears in our work. Always **small and subtle**.

### Comet

A short, glowing section of an element’s edge (a window, card or button), as if light were traveling along it. Used in videos and on key UI moments (an active tab, a highlight).

| Layer | Width | Blur | Opacity (cap) |
|---|---|---|---|
| line | 1.6px | – | 0.85 (≤ 0.9) |
| glow | 5px | 6px | 0.3 (≤ 0.35) |
| haze | 20px | 26px | 0.07 (≤ 0.08) |

- Color only on a **short section** of the edge (an arc of about 60°), never along a whole side or all the way around.
- Three layers: line, glow and haze. Opacity never above the cap.
- Slow movement (45°/s at most). On a large window it barely moves.

### Aura

A small, heavily blurred glow of pink and violet on **one side** of the frame (on the website: bottom right of the hero), fading smoothly into the `#FAFAFA` background. On the website it carries a fine texture of horizontal lines.

### Background

- Near-white (`#FAFAFA`) + a small aura + in videos, **animated lines** in a very light violet.
- **No shapes in the background:** no squares, circles, orbs, grids or blobs.

**Don’t:**

- The gradient as a full background of a section, hero, button or card.
- A comet running around the whole window or glowing like neon.
- Decorative shapes in the background.

---

## 07. Imagery and illustration

- **The real product.** We show real screens of the YNS dashboard and real customer stores (laptop and phone mockups, 1:1 screenshots). Screens are reproduced exactly: the same copy, buttons and values.
- **Customer stores as proof.** Photos and stores from customer stories, with the customer’s name and domain.
- **Fictional but believable data.** In demo material: a fictional demo store, English first names, prices in USD (`$89.00`). Never real data of end customers.
- **The happy path.** Show a successful flow and full states, not empty lists and errors.
- Feature illustrations in bento cards: simplified pieces of UI (white cards, pills, a cursor) in the brand palette.

**Don’t:**

- Stock photos of people at laptops, 3D illustrations, clip art, AI-generated images posing as product screenshots.
- Dark mockups and dark screenshots (the dashboard’s dark mode).

---

## 08. Voice and tone

Product communication is **in English** (the website is also available in French and Polish). The tone is **confident, concrete and calm**. We speak like someone who has done this hundreds of times: briefly and with numbers, without hype.

### Principles

1. **Short sentences, one idea each.** “Describe what you sell and AI builds your store in minutes.”
2. **Specifics over adjectives.** “About 30 minutes from describing your store to having it ready to launch” rather than “lightning-fast setup”.
3. **The merchant’s benefit, not the feature.** “Sell to any country, without extra setup.”
4. **Contrast in pairs:** “Improvements shipped, not tickets opened.”, “Real changes on your real store – not proposals.”, “Less plugins, more built-in.”
5. **You and your store.** We address the merchant (*your store*) and rarely talk about *we*.
6. **Every number and comparison has a source**, especially comparisons with Shopify, Wix or WooCommerce.

### Examples

| Instead of | We write |
|---|---|
| Revolutionary AI-powered e-commerce solution | Describe what you sell and AI builds your store in minutes. |
| Unlock seamless global selling! 🚀 | Sell globally from day one. |
| Our cutting-edge platform leverages… | Fewer knobs and better defaults. |
| Get in touch with our support team | A human expert runs point when it matters. |

**Don’t:**

- Empty words: *revolutionary, seamless, cutting-edge, unlock, leverage, empower, game-changer, next-level*.
- Exclamation marks and emoji in headings and buttons.
- Promises we cannot back up (“the best platform in the world”).

### Style

- The en dash `–` with spaces as a dash. Never the em dash.
- Currency symbol before the amount: `$89.00`.

---

## 09. Motion and video

| Token | Value | Use |
|---|---|---|
| `fast` | `150ms` | Hover, state changes. |
| `base` | `250ms` | Screen transitions, entrances. |
| `slow` | `600ms` | Camera moves in videos, large entrances. |
| `ease` | `cubic-bezier(0.22, 1, 0.36, 1)` | Default curve (ease-out). |

- **Calm, short motion:** state changes 150 ms, transitions 150–250 ms, camera moves 500–700 ms, ease-out curve.
- **No dead time.** Pace comes from removing pauses, not from speeding things up.
- **Videos:** 1920×1080, 30 fps, light theme, white glass, a subtle comet and the YNS logo at the end. Always captioned (burned in + `.srt`/`.vtt`), at most 58 characters per caption.
- **Voice-over:** English. Button names come at the end of a sentence, exactly as in the UI.

---

## 10. Checklist

Go through it before handing over any piece of work: a page, graphic, email, video or slide. AI agents: check every item and list the ones you do not meet in your answer, with the reason.

- [ ] Light theme. Background `#FAFAFA` or white, no dark sections.
- [ ] Geist (Geist Mono for code and labels). No other typefaces.
- [ ] Logo from the file, black or white, with clear space, at least 16 px tall.
- [ ] Calls to action are black pills. One main call to action per view.
- [ ] Violet accent `#8D22FD`, no blue anywhere.
- [ ] The YNS gradient only as one or two words in a headline, a comet on an edge or a small blurred aura.
- [ ] No decorative shapes in the background (circles, squares, blobs).
- [ ] White glass, without gray fills or edges.
- [ ] Copy in English, short sentences, no empty words or emoji. Every number has a source.
- [ ] Real product screens with fictional data, on the happy path.