Brand Kit Lite

How do I make a free brand kit online with my colours, fonts and logo without uploading anything?

Open Brand Kit Lite and define your brand in one place: add named brand COLOURS (each with a role — primary, secondary, accent or neutral), pick a HEADING and BODY font from system-only stacks, upload a LOGO, and set a name, tagline and voice notes. For every colour it derives a 50–950 shade ramp and a full WCAG contrast grid so you can see which text/background pairs pass AA. Keep multiple kits, then export a one-page brand guide as PNG or PDF and copy CSS variables, a Tailwind theme, SCSS or design tokens. Everything is saved in your browser’s localStorage and nothing is uploaded — use Export JSON to back it up or move devices.

Named colours with roles + a 50–950 OKLCH shade ramp each
WCAG contrast grid across the palette (plus black & white)
Heading + body fonts from SYSTEM stacks — no webfont download
Logo stored as a data-URI; multiple kits in localStorage
Export a brand-guide PNG / PDF, and CSS / Tailwind / SCSS / tokens

What is

brand kit

A brand kit (or brand style guide) is a single reference that collects the core elements of a visual identity — the brand’s colours (with exact hex codes and usage roles), its heading and body typefaces, and its logo — so a team applies them consistently. A good kit also shows each colour’s tints/shades and the accessible text/background pairings. Brand Kit Lite is a 100% client-side brand-kit manager: it stores kits in the browser, computes shade ramps and WCAG contrast locally with culori, and exports a brand guide plus code, with nothing uploaded to a server.

Design

Related terms

brand style guidebrand guidelinesdesign tokenscolour paletteshade rampWCAG contrastsystem font stackCSS variablesTailwind themelogo

Frequently Asked Questions

Brand Kit Lite is 100% client-side. Every kit — colours, fonts, notes and the logo (kept as a data-URI) — is saved in THIS browser’s localStorage. There is no account and no server: nothing is fetched, uploaded, logged or synced. The honest trade-off is that a local-only kit will not appear if you clear site data, use a different browser or switch devices, so the tool provides Export JSON to back up a kit or move it, and Import JSON to restore it. The only optional network use is consent-gated ads.

It is stored only in this browser’s localStorage. Nothing is uploaded or synced; use Export JSON to back it up or move it to another device.

For each brand colour the tool derives a perceptually-even 50–950 OKLCH shade ramp and picks the best black-or-white text for it. It also builds a full contrast GRID: every colour used as text on every colour used as a background, plus white and black, each cell showing the real ratio and whether it reaches AAA (7:1), AA (4.5:1) or only AA-Large / UI (3:1). A ranked list of the strongest accessible pairings is shown too. The maths uses the standard WCAG 2.x relative-luminance ratio via culori, entirely in your browser — it does not implement the newer APCA model and ignores transparency.

Yes. It computes the WCAG contrast ratio for every colour as text on every other colour (plus black & white) and flags which pairs pass AA (4.5:1) or only large-text/UI (3:1).

Typography uses system-only font stacks in the spirit of the “modern font stacks” approach: each option is a CSS font-family list of real font names, and the browser simply uses whichever is installed locally and falls back down the list. No @font-face rule, no Google Fonts and no CDN request is made, so nothing about your brand leaves the device and the tool works offline. The trade-off is that a specimen can render slightly differently on another machine, and the exported guide embeds the rendered raster rather than the font file.

You choose from SYSTEM font stacks (System UI, Humanist, Old-Style Serif, Slab, Monospace and more). Nothing is downloaded — the browser uses fonts already installed on the device.

The tool renders a one-page brand guide — logo, colour swatches with hex and shade strips, heading & body font specimens, the tagline and voice notes — onto an in-page canvas, which you can download as a high-resolution PNG or an A4-fit PDF (assembled in memory with pdf-lib). For code, one tap copies CSS custom properties, a Tailwind theme.extend snippet, SCSS variables, or a flat design-tokens JSON, and CSS/Tailwind can optionally include the full 50–950 ramp per colour. You can also Export the whole kit as JSON for backup and Import it on another device. Every export is generated locally; nothing is uploaded.

A one-page brand guide as PNG or PDF, the kit as JSON (to back up / move), and copyable CSS variables, a Tailwind theme, SCSS or a design-tokens JSON — with optional 50–950 shades.

A 100% client-side brand-kit manager: define named brand colours (with roles), a heading + body system-font pairing, a logo and voice notes; see a 50–950 shade ramp and WCAG contrast pairings for every colour; keep multiple kits in localStorage; and export a brand-guide PNG/PDF plus CSS variables, a Tailwind theme, SCSS and design tokens. Nothing is uploaded.

Features

Named colours with roles, plus a 50–950 OKLCH shade ramp each (click a shade to copy)
WCAG contrast grid across the whole palette and black & white, with AA / AAA flags
Heading + body fonts from SYSTEM stacks — no webfont download, works offline
Multiple kits in localStorage: create, switch, rename, duplicate, delete, Export / Import JSON
One-page brand-guide PNG / PDF export, and copyable CSS / Tailwind / SCSS / tokens

PriceFree

CategoryDesign

PlatformAll (any modern browser)

PrivacyKits live only in this browser’s localStorage — colours, fonts, notes and the logo (a data-URI) are never uploaded or synced; shade ramps and WCAG contrast are computed locally with culori and the guide is drawn on an in-page canvas, so use Export JSON to back up or move a kit. The only optional network use is consent-gated ads

Input: Logo image (PNG / SVG / JPG / WebP), Brand-kit JSON (import / restore), Hex colour codes

Output: Brand-guide PNG, Brand-guide PDF, CSS variables, Tailwind theme, SCSS, Design-tokens JSON, Brand-kit JSON

Detailed Explanation

How It Works

A 100% Client-Side Brand Kit Manager

Brand Kit Lite keeps a brand’s core identity — named colours, a heading and body typeface, a logo, and a name/tagline/voice notes — in one place, entirely in the browser. A brand is stored as a small typed object: a list of COLOURS (each with a name, hex and a role of primary/secondary/accent/neutral), a HEADING and BODY font chosen from system-only stacks, an optional LOGO held as a data-URI, and text fields. A pure engine (brandKitEngine.ts) reuses culori to derive a 50–950 shade ramp and WCAG contrast readings for every colour. The defining constraint is that nothing is uploaded: kits are saved to this browser’s localStorage, all maths runs on-device, and the guide/code exports are generated in memory.

Brand = typed model: named colours (with roles) + fonts + logo + notes
Multiple kits saved to localStorage; create / switch / rename / duplicate / delete
Colours, contrast and shade ramps computed locally with culori
Logo stored as a data-URI in the browser — never uploaded
Export / Import a kit as JSON to back up or move between devices

Methodology

How Shades and Contrast Are Derived

For each colour the engine builds a Tailwind-style 50–950 tonal scale by converting the hex to OKLCH and stepping LIGHTNESS through perceptually-even targets while gently tapering chroma at the extremes, then mapping each step back into sRGB — so the shades look like equal visual increments rather than the irregular jumps HSL produces. Accessibility uses the standard WCAG 2.x model: each channel is linearised, relative luminance L = 0.2126·R + 0.7152·G + 0.0722·B, and the contrast ratio is (L_light + 0.05)/(L_dark + 0.05). The tool computes the best black-or-white text for every colour and a full fg×bg GRID across the whole palette plus white and black, flagging each pair as AAA (7:1), AA (4.5:1) or AA-Large/UI (3:1), and surfaces a ranked list of the strongest accessible pairings.

Shade ramp = OKLCH lightness steps (50–950), chroma tapered at the ends
WCAG relative-luminance contrast ratio, 1:1 … 21:1
Best black/white text auto-picked per colour
Full palette contrast grid (each colour as text on each as background)
Pairs graded AAA / AA / AA-Large; top accessible pairings ranked

Technical Details

Storage, Rendering and Export Internals

State is a KitStore ({ version, kits[], activeId }) persisted to localStorage under one key; all edits are pure transforms (add/remove/update colour, rename, duplicate, set-active) and an imported JSON is passed through a defensive sanitiser that validates hex codes, roles, font ids and accepts only a data:image logo before it is trusted. The brand guide is drawn by renderBrandGuide(canvas, kit, culori): it measures the notes to size the page, then paints a header band (logo on a rounded plate + name + tagline in the chosen fonts), a colour section with swatches, hex, role and a shade strip each, a typography specimen block, the voice notes, and a footer — using the SAME system font stacks as CSS. PNG export is canvas.toBlob; PDF export takes the canvas PNG and embeds it on an A4-fit page with pdf-lib (dynamically imported). Code export emits CSS custom properties, a Tailwind theme.extend block, SCSS or a design-tokens JSON, optionally including the full 50–950 ramp.

KitStore persisted to localStorage; edits are pure, typed transforms
Imported JSON runs through a sanitiser (valid hex / role / font / data-URI only)
renderBrandGuide draws logo + swatches + shades + specimens on a canvas
PNG via canvas.toBlob; PDF via pdf-lib (dynamic import), A4-fit
Copy CSS variables / Tailwind theme / SCSS / design-tokens JSON

Use Cases

When to Reach for This

Use it to lock in a small brand’s identity, to hand a freelancer or teammate a consistent colour/type reference, to seed a design system with an accessible token set, or to sanity-check that your brand colours actually pass WCAG contrast before you ship them. Because it exports CSS variables, a Tailwind theme and a design-tokens JSON, it slots straight into a codebase; because it renders a one-page PNG/PDF guide, it also works as a lightweight brand sheet for non-technical stakeholders. It is ideal for indie makers, startups, side-projects and students who want a real, private brand kit without an account, a subscription or a cloud design suite.

Define and share a consistent colour + type + logo reference
Seed a design system with an accessible token set
Verify brand colours meet WCAG contrast before shipping
Drop-in exports: CSS vars, Tailwind theme, SCSS, tokens JSON
No account, no subscription, no cloud — ideal for makers and students

Limitations

Honest Limitations

This is a lightweight kit manager, not a full brand-design suite. Fonts are SYSTEM stacks only — no Google Fonts or webfont download — so a specimen can render differently on another machine and the exported guide bakes in the raster rather than embedding the typeface. The guide is a flat RGB PNG (or that PNG on an A4-fit PDF): there is no CMYK, no bleed, no crop marks and no vector logo tracing, so for a professional press run take the colours and logo into a prepress tool. Contrast uses the standard WCAG 2.x ratio; it does not implement the newer APCA model and ignores alpha/transparency. Storage is the browser’s finite localStorage, so a very large logo data-URI can exceed the quota — keep logos small. It does not auto-extract a palette from a photo, manage multiple logo lockups, or write brand copy; it stores and analyses the decisions you make.

System fonts only — specimens vary across machines; guide embeds a raster
Flat RGB export: no CMYK, bleed, crop marks or vector logo tracing
WCAG 2.x contrast only (no APCA); alpha/transparency ignored
localStorage is finite — keep logo data-URIs small
No image palette extraction, logo lockups or copywriting

Privacy & Security

Private by Design

Everything happens on your device. Each brand kit — colours, fonts, notes and the logo (a data-URI) — is held in this browser’s localStorage; there is no account and no server, so nothing is fetched, uploaded, logged or synced. Shade ramps and WCAG contrast are computed locally with culori, the brand guide is drawn on an in-page <canvas>, and the PNG/PDF and code snippets are generated in memory. The direct trade-off of being local-only is that clearing site data, using another browser or switching devices will not show your kit — which is exactly why Export JSON (back up / move) and Import JSON (restore) exist. Fonts are the device’s own system stacks, so no CDN is contacted and the tool works offline once cached. The only optional network use is consent-gated ads.

Kits stored only in this browser’s localStorage — never uploaded or synced
Contrast + shades computed locally with culori; guide drawn on a canvas
PNG/PDF and code exports generated in memory
Export / Import JSON to back up, move or restore a kit
No CDN, no accounts, no tracking; works offline; optional consent-gated ads

Ways to keep a brand kit
Approach	How it works	Trade-off	Used here
This client-side manager	Colours + fonts + logo stored in localStorage; shades, contrast, guide and code generated on-device	Private + free + offline; local-only, so back up with Export JSON	Yes
Cloud brand tools (popular design apps, Frontify)	Kits live in an account in the cloud	Team sync and rich assets, but data leaves the device and needs a login	No
A shared doc / PDF style guide	Hand-written colour + type reference	Simple to read, but static — no live shades, contrast checks or code export	No
Design tokens by hand	Author CSS variables / Tailwind config manually	Full control, but tedious and easy to get contrast wrong	Alternative

Everything here runs in the browser; the kit and logo are never uploaded. Contrast is WCAG 2.x; export is flat RGB. As of July 2026.

Cite This Page

Title: Brand Kit Lite (a 100% client-side brand-kit manager — define named brand colours with roles, a heading + body system-font pairing, a logo and voice notes; get a 50–950 shade ramp and WCAG contrast pairings per colour; keep multiple kits in localStorage; and export a brand-guide PNG/PDF plus CSS variables, a Tailwind theme, SCSS and design tokens; no upload, no server, no CDN)
Author: AnyTool
Published: January 1, 2026
Modified: February 8, 2026
Section: Design
URL: https://www.anytool.tech/brand-kit

Formatted Citation

AnyTool. "Brand Kit Lite (a 100% client-side brand-kit manager — define named brand colours with roles, a heading + body system-font pairing, a logo and voice notes; get a 50–950 shade ramp and WCAG contrast pairings per colour; keep multiple kits in localStorage; and export a brand-guide PNG/PDF plus CSS variables, a Tailwind theme, SCSS and design tokens; no upload, no server, no CDN)." AnyTool, January 1, 2026. https://www.anytool.tech/brand-kit

A 100% client-side Brand Kit Lite: a real brand-identity manager that runs entirely in the browser with no upload, no server and no CDN in the compute or export path — the /brand-kit route in the AnyTool Design category. It stores a brand as a typed model — a name, tagline and voice/usage notes, an ordered list of named COLOURS each carrying a hex and a ROLE (primary / secondary / accent / neutral), a HEADING and a BODY font chosen from SYSTEM-only font stacks (System UI, Neo-Grotesque, Geometric/Classical/Humanist sans, Rounded, Industrial, Transitional/Old-Style/Slab/Antique serif, Didone and Monospace, in the spirit of the “modern font stacks” project so no webfont is ever downloaded), and an optional LOGO kept as a data-URI. A pure, fully-typed engine (brandKitEngine.ts) reuses culori (already a dependency, shared via colorScience) to derive, for every colour, a perceptually-even 50–950 OKLCH shade ramp (lightness stepped through even targets with chroma tapered at the extremes, mapped back to sRGB) and its accessibility profile: the best black-or-white text, the colour’s contrast as text on white and on black, and a full fg×bg CONTRAST GRID across the whole palette plus white and black, with each cell graded AAA (7:1), AA (4.5:1) or AA-Large/UI (3:1) using the standard WCAG 2.x relative-luminance ratio; a ranked list of the strongest accessible pairings is surfaced too, and low-contrast text is flagged inline on each swatch. The tool manages MULTIPLE kits in localStorage under one key as a KitStore ({ version, kits[], activeId }) — create, switch, rename, duplicate and delete — with all edits implemented as pure transforms, and it can Export a single kit (or restore) as JSON, passing any imported/untrusted JSON through a defensive sanitiser that validates hex codes, roles and font ids and accepts only a data:image logo before trusting it. It renders a one-page BRAND GUIDE with renderBrandGuide(canvas, kit, culori): a coloured header band (the logo on a translucent rounded plate, the brand name and tagline set in the chosen heading/body fonts with best-contrast text), a colour section listing each swatch with its name, hex, role and a full shade strip, a typography specimen block naming each system stack, the voice notes, and a footer — all drawn on an in-page <canvas> using the same system font stacks as the CSS. Export is generated on-device: a high-resolution PNG via canvas.toBlob, an A4-fit single-page PDF assembled in memory with pdf-lib (dynamically imported), and one-tap copy of CSS custom properties, a Tailwind theme.extend block, SCSS variables or a flat design-tokens JSON — with CSS and Tailwind optionally including the full 50–950 ramp per colour; any hex or shade can be copied with a click. The page is prominently HONEST about scope: fonts are system stacks only, so a specimen can look different on another machine and the guide embeds the rendered raster rather than the font; the export is a flat RGB PNG/PDF with no CMYK, bleed, crop marks or vector logo tracing (take colours and logo into a prepress tool for a press run); contrast is WCAG 2.x only (not the newer APCA model) and ignores transparency; localStorage is finite, so large logo data-URIs can exceed the quota; and it does not auto-extract a palette from an image, manage multiple logo lockups or write brand copy — it stores and analyses the decisions the user makes. Privacy is structural: every kit lives ONLY in this browser’s localStorage and is never uploaded, logged or synced, all colour maths runs locally with culori, the guide is drawn on a canvas and every export is built in memory — the direct trade-off of being local-only is that clearing site data, switching browsers or moving devices will not show a kit, which is exactly why Export/Import JSON exist. There is no account and no tracking, the tool works offline once cached, supports dark mode and a mobile-first responsive layout with a sticky mobile action bar (Copy / PNG / JSON) and exactly three horizontal ad slots, and the only optional network use is consent-gated ads.