What you get
- A DESIGN.md in the open format, with tokens in the front matter and written guidance
- tokens.json (W3C design tokens) and tokens.css with light and dark themes
- Outlined SVG wordmark, symbol, lockup, reverse and one-colour versions
- A one-page brand board as offline HTML and PDF, with 4-6 mockups
- A three-direction moodboard page to choose from
Good for
- Giving a new product, shop or side project an identity in one session
- Writing a DESIGN.md so your coding agent stops producing generic UI
- Turning an existing theme file into a documented, contrast-checked system
- A credible brand board for a pitch or a first client meeting
Not for
- Trademark clearance: it avoids look-alikes but does not search registries
- Mascots or full illustration systems
- Matching a strict existing brand book line by line
How to use it
In Claude or ChatGPT
Use the PopNow skill "Brand Kit & DESIGN.md Generator" (brand-kit-design-md) for this: Brand kit for Lumen Notes, a calm notes app for researchers who work late. Warm and a little clever, never another purple AI app. No logo yet.
In a coding agent
/popnow-brand-kit-design-md Brand kit for Lumen Notes, a calm notes app for researchers who work late. Warm and a little clever, never another purple AI app. No logo yet.
Then try
Go with direction A, but borrow the green from B for tags.
Lite version only for now: palette, fonts and voice, no image credits.
What to have ready
- A few lines on the product, audience and personality
- Competitors it must not look like, with their main colours if you know them
- Any logo, colours or fonts you want to keep
- Python 3 and Chrome; fonttools for outlined wordmarks
Similar skills
View all →Black and White Studio Portrait
+3Turn an everyday photo into a calm black-and-white studio portrait that still looks like you.
Blog Post Illustration Set
+3Three matching illustrations for one article, each showing what its passage actually says.
Car Cutaway Anatomy Poster
+3A side-view cutaway of a generic car: color-coded systems, numbered markers and round zoom windows.
Chalkboard Infographic Maker
+3A 16:9 chalkboard-style infographic with exact short copy, chalk drawings and one clear reading path.
Cinematic Storyboard Frames
+3Three storyboard contact sheets for one scene, each a different way to shoot it, with continuity kept.
Consistent Concept Art Set
+3A character, a prop and an environment that clearly belong to the same fictional world.
Cute Crayon Doodle Art
+3Lovably clumsy crayon characters on white paper: wobbly lines, scribbled fills, sharp files, sticker cut-outs.
Editorial Line Illustration
+3Airy black-ink illustrations with one accent color for blog headers, newsletters and social cards.
Engraving Style Article Cover
+3One surreal black-ink engraving per essay: crosshatched, edge to edge, its big idea shown as a single scene.
EV Platform Exploded View
+3An electric car lifted apart layer by layer: battery, motors, cabin and body in color, with callouts.
Product Exploded View Poster
+3A clean exploded-view hero image of a product, with exact part labels from your spec table.
Fantasy Map Generator
+3Parchment, atlas or black-line maps of your own world, every name lettered right, grids that line up.
Regional Food Flavor Map
+3A calm painted map of regions, each with a small taste chart on one shared scale and an honest legend.
Illustrated City Map Maker
+3A hand-drawn style map of a neighborhood or town, true where it matters and labeled exactly.
Ink Sketch Storyboard
+3A rough black-ink storyboard page from a short story: open lines, white space, one beat per panel.
Line Art OG Image Maker
+3Calm link-preview images: off-white card, short black headline and a hand-drawn ink character.
Marine Biology Research Poster
+3A wide research poster around a painted habitat cross-section, with numbered species and a findings chart.
Phone Mockup Generator
+3Your app on a 3D foldable phone that swings open on a soft backdrop, as crisp PNG stills or a fold clip.
Photo Composition Studies
+3Three photographic takes on one subject, each built on a different composition principle.
Sketchnote Image Generator
+3Turns an article or notes into one hand-drawn 4:3 sketchnote with exact, checked labels.
Social Cover & Thumbnail Generator
+3One message in, a checked set of OG images, post covers and video thumbnails out, every size exact.
Questions
What is DESIGN.md and who reads it?
A plain-text design system: YAML tokens at the top, written guidance below. Coding and design agents read it to keep colours, type and spacing consistent. This skill writes it in the open format other tools lint and export, and adds the logo files, font licences, contrast pairs and voice examples under one extra key.
Are the colours really accessible?
Every text and background pair you will use is declared and checked against WCAG 2.2 by a script, including dark mode. Failing pairs get the nearest passing colour with the same hue, and ratios are rounded down so a pass is a pass.
Is the logo an AI image?
No. The wordmark is outlined from an open-licence font and the symbol is drawn as a few clean SVG shapes. PopNow sketches can inspire the symbol, but a raster is never shipped as the logo, and the linter rejects one.
How does it avoid looking like a competitor?
You list the brands to avoid with their colours and a description of their mark. A check flags palettes that repeat their colour pairing, prompts never name them, and the symbol is compared with their mark before it is drawn. It is not a legal trademark search.