Open source · MIT

Choose the right logo. Then ship every file it needs.

Keyline is a free design system that runs inside your AI coding agent. Bring the logo options you cannot decide between, a brief, or nothing at all. It picks a winner with evidence instead of flattery, refines it into a real wordmark and palette, and then generates every asset your product needs, from a 29 pixel app icon to a print ready handoff.

Get started View source

1024 · store

180 · home screen

48 · launcher

29 · settings

Placeholder mark. Keyline is designing its own.

6ways in

9phases, each a gate

111files in the example

0hand exports

01 / What it does

Three problems, one pipeline

Deciding, designing and shipping are usually three different tools and three different afternoons. Keyline treats them as one job, because the decisions made in the first one determine how much work the third one is.

It judges the logo, not the presentation

One designer sends a single SVG. Another sends an icon set, a wordmark and six mockups. You are no longer comparing logos, you are comparing effort, and the fuller package wins because it is easier to talk about.

Keyline generates every candidate's missing pieces first, so they all arrive at the same level of finish. Then it strips the names off, shuffles them, and judges them blind. Two independent critics try to overturn the result before you ever see it.

Equalised · blind · shuffled

Candidate A 1 file supplied, 8 generated

Candidate B 9 files supplied, 0 generated

Candidate C 2 files supplied, 7 generated

Completeness weight zero

It designs from nothing, and gets past the obvious

Rigour makes a bad logo measurably bad. It does not make a good one appear. So the generation step is built to diverge before anything converges: concepts are mined from what your product actually does, pushed past the first literal idea, screened for cliches, and held to a quota that forces genuinely different structural approaches rather than one idea in five costumes.

The generators cannot see each other's work. That is how the variety is guaranteed structurally instead of hoped for.

Structural category quota

Typographic 2 concepts

Symbolic 1 concept

Abstract geometric 1 concept

Negative space 1 concept

Minimum categories 3 of 5 met

One logo in, the whole system out

A logo is not a file. It is an app icon that still reads at 29 pixels, an Android icon that survives being masked into a circle, a favicon, an Open Graph card, a light version, a dark version, and a one colour version for the invoice footer.

Keyline generates all of it from your vector plus a handful of constants, using a script that gets committed alongside the artwork. When a colour moves in month four, you edit one constant and re-run one command. Nothing is ever hand exported, so nothing can quietly fall out of date.

Colour change, month four

Edit brand.config.js, 1 line

Run npm run build:brand

Updated 111 files

Re-checked contrast, gamut, CVD

02 / What you get

The whole asset system, generated

This is the output tree Keyline builds. Every folder comes out of the same committed script, and the worked example that ships in the repo is 111 files.

Master artwork

Source vectors, wordmark, horizontal and stacked lockups, light, dark and single colour variants

iOS

App icon at every required size, the 1024 marketing icon, tinted and dark variants

Android

Adaptive icon foreground and background layers, legacy densities, monochrome

Web

SVG favicon, ICO sizes, Apple touch icon, PWA and maskable icons, web manifest

Social

Open Graph cards, profile images and banners, in brand, light and dark

Usage

Clear space, minimum sizes, colourways, and a misuse sheet showing what not to do

Motion

Animated logo as Lottie and video, from one timing spec, with a reduced motion version

Splash

Launch screens sized for the devices your product actually runs on

Tokens

One colour source exported to CSS, Tailwind, Swift and Android XML, plus an audit file

Print

Print colour with its unproofed caveat attached, because a screen is not a press

Handoff

Brand guidelines built from generated facts, a which file do I use sheet, and a zipped bundle with human names

03 / Why you can trust it

An agent that argues with you

Ask an AI whether your logo is good and it will say yes. Keyline is built around the assumption that this is the default failure, and that measurement without scepticism is just taste wearing a lab coat.

It looks, it does not guess

Every claim is checked against the real artwork. Not "is this good?" but "does the counter hold at 29 pixels, and which two shapes merge first?"

Colour in a perceptual space

The same hex can measure blue in HSL and violet in LCh. Keyline works in LCh, so your blue stays blue and every contrast pair survives by construction.

Two critics, neither one the author

A standards audit that fetches current platform guidance rather than reciting it, and a cold read that sees the artwork and nothing of the reasoning.

It reports what disagrees with it

Every output carries a standing section for measurements that did not support the recommendation, and a list of what could not be checked at all.

Accessibility is a constraint

Contrast recomputed on every colour change, colour blindness simulated before any colour carries meaning, greyscale checked, reduced motion shipped.

Clearance is a hard gate

No full asset system gets built until you confirm a trademark search was run. Keyline prepares the dossier for your lawyer and never claims clearance itself.

04 / Why this exists

I had already paid the designers

I thought that was the hard part. What I actually had was a folder of logo files and no honest way to choose between them. One designer had sent a single SVG. Another had sent an icon set, a wordmark and mockups on a phone. I kept leaning toward the second one, and I could not tell whether the logo was better or whether there was just more of it in front of me.

So I asked AI. It told me my pick was excellent. Out of curiosity I asked about a different one, and it told me that was excellent too.

Hiring someone to evaluate work I had already paid to have made felt absurd, so I picked one on a Tuesday and moved on. That is when I found the second half of the job: the app icons, the adaptive icons, the favicons, the light and dark and one colour versions. I hand exported all of it over a few nights, with no real expertise and no budget to hire it out. Then a colour changed, and I did it all again.

On the next project I had no designer at all, and needed the logo to come from nothing. Keyline is what came out of both. One system for the whole range: comparing logos you already own, assessing a single option, designing from scratch, or rebranding something that exists. It argues instead of agreeing, it shows its work, and it ends with a script that regenerates everything on demand.

05 / Get started

Four commands and one paste

Keyline runs inside Claude Code, Codex, or any coding agent that can read a repo. You need Node 20 or newer.

01 Clone it and check your machine

git clone https://github.com/fenil-dedhia/keyline-logo-design-system.git
cd keyline-logo-design-system
npm install
npm run smoke

The smoke test is not a formality. It does not check that the packages installed, it checks that they do what Keyline is about to trust them to do, because two of them fail silently in ways that produce confident and completely wrong measurements.

02 Open your agent in that folder

claude

03 Paste this in, with your own situation filled in

Read CLAUDE.md, then README.md, then START-SESSION-PROMPT.md in this repo.

My situation: <one paragraph. What the product is, who it is for, what it
competes with, and what you already have: logo files from designers, a brief,
an existing identity you are replacing, or nothing at all.>

Work out which of the six entry points applies, tell me which one you are
running and why, then ask me the questions you need answered before Phase 1.
Do not generate or judge anything until I have answered them.

Keyline will tell you which entry point it detected, ask for what it is missing, and take it from there. Every phase ends with a decision that belongs to you.

06 / Contribute

Build this with me

Keyline is early, MIT licensed, and has no company behind it. I would rather it became something designers and developers sharpen together, because the interesting problem sits exactly where those two groups overlap.

You do not need to write JavaScript to contribute. A large part of the repo is craft knowledge written down carefully, and that is the part most in need of people who actually do this work.

Open an issue

01
Refresh a platform snapshot. Apple, Android and web icon rules rot. Refetching one and noting what changed is a real contribution and takes an afternoon.
02
Write down a piece of craft. If you know something about drawing logos that is not already in the knowledge base, it belongs there.
03
Bring a scar. A specific way logo work went wrong for you, plus the behaviour that would have caught it. That is exactly the shape a test case needs.
04
Build the evals runner. Fifteen behavioural cases are written but nothing executes them yet. The highest leverage thing anyone could pick up.
05
Add a measurement. New probes are welcome, on one condition: state what the number cannot see, alongside the number.
06
Break it. Run Keyline on a real project and open an issue where it was confidently wrong. Transcripts beat summaries.