00 · How to use

How to use this brandbook

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

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.

01 · Brand

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

Names

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

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.

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.

Files

03 · Color

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.

YNS gradient

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.

04 · Typography

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.

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.

05 · UI elements

UI elements

Buttons

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

• 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

• 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:

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);

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 and background

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).

• 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.

07 · Imagery

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.

08 · Voice and tone

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

Style

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

09 · Motion and video

Motion and video

• 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

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.