project.mdby SuperMD

// project.md

One file. Brand + design + voice.

Paste a URL to extract design tokens, fill your brand details, and download a single project.md — complete brand guidelines, color palette, CSS tokens, typography, and voice all in one context file.

// pull design tokens from URL (optional)

Colors and fonts will auto-fill from the extracted CSS. You can edit them after.

// identity

// brand values

1.
2.

// colors

// typography

// voice & tone

project.md combines brand.md + style.md into one file. Drop it into any LLM session — it has everything needed to write on-brand copy, build on-brand UI, and stay consistent across tools and sessions.

Preview updates as you type

Add a brand name to see your combined project.md

// what is project.md

Every context file your AI needs, in one.

brand.md covers identity and voice. style.md covers visual tokens. But when you're building with AI, you want one file — not two. project.md combines both: paste a URL to pull the exact CSS variables, colors, and fonts, then fill your brand identity and voice to get a complete context file in one download.

Drop it into Claude, Cursor, or ChatGPT before any session. Writing copy, building components, designing layouts — everything starts from the same brief.

acme.mdbrand + style
# Acme — Project Context

> Build something great.

## Identity
**Mission**: Help developers ship faster.

## Visual Design

### Color Palette
| Name | Hex | Usage |
|------|-----|-------|
| Primary | `#2563eb` | CTAs |

### Design Tokens (linear.app)
```css
--color-indigo: #5e6ad2;
--font-sans: 'Inter Variable';
```

### Border Radius
`4px` · `6px` · `8px`

## Voice & Tone
**Personality**: Confident · Clear

### Avoid
- leverage, synergy

// faq

Frequently asked questions

How is this different from brand.md and style.md?

brand.md is identity and voice only. style.md is CSS token extraction only. project.md does both in one form and produces a single combined file — you don't need to manage two separate context files.

What gets auto-filled from the URL?

When you extract a URL, the tool pulls CSS custom properties, Google Fonts, font families, colors, radii, and shadows. If your color and font rows are still empty, they're auto-populated with values from the extraction — you can edit them after.

Do I need to fill in every field?

Only the project name is required. The URL extraction is optional. Fill in as much or as little as is relevant — each section only appears in the output if it has content.

Can I use this with a site I don't own?

Yes — for inspiration and reference. Extract tokens from any public site, then combine with your own brand identity and voice. Useful when building a UI that needs to match an existing product's visual style.