Brand system

The ReplyMagic brand system.

Voice, color, typography, motion, and the rules that hold them together. Everything below is the source of truth — copy it as Markdown if you're briefing a designer, agency, or AI assistant.

Brief in one click

One file, everything below.

The button below copies the complete brand system — voice, color, typography, motion, naming, taglines — as a single Markdown document. Paste it into a doc, a brief, a prompt, or a project README.

Identity

AI Instagram replies that sound like you.

ReplyMagic helps creators and brands answer Instagram comments and DMs with AI that uses post context and brand voice. Drafts queue for approval — nothing posts without you.

Name

ReplyMagic — one word, capital R, capital M. Never hyphenated.

Category

AI Instagram replies. Instagram comment automation. Creator operations.

Description, three lengths

One-liner

AI Instagram replies that sound like you.

One sentence

ReplyMagic is an AI Instagram comment assistant that replies with post-specific context and your brand voice.

One paragraph

ReplyMagic is an AI-powered Instagram comment and DM assistant built for creators, coaches, and service businesses. It reads each post's caption and your last 90 days of replies, then drafts responses in your voice. Every reply waits for approval before it goes live, so the brand stays yours.

Naming rules

  • One word. Capital R, capital M.
  • Never hyphenate (Reply-Magic ✗).
  • Never lowercase (replymagic ✗) outside URLs and code identifiers.
  • Possessive: ReplyMagic's. Plural: ReplyMagic accounts (the product is singular).
  • Category: AI Instagram replies / Instagram comment automation.
Voice & tone

How ReplyMagic sounds.

Warm, plain-spoken, editorial. Confident but not loud. Periods, not exclamation points.

Plain over clever

Write like you'd say it to one creator over coffee. No jargon, no buzzwords, no AI-marketing throat-clearing.

Specific over general

Replace 'AI-powered engagement' with 'AI that replies to Instagram comments using your post caption and brand voice.' Numbers, nouns, named things.

Confident, not loud

Short declarative sentences. Periods, not exclamation points. The product is the proof; the copy shouldn't oversell.

Editorial, not corporate

Serif display + warm bone paper signals a magazine, not a SaaS dashboard. Voice matches: opinionated, written by a person.

Operator-respectful

Our users run real businesses. Don't talk down, don't explain Instagram to them. Assume competence.

Do / Don't

Do

ReplyMagic answers Instagram comments and DMs with post-specific context.

Don't

Unleash the power of AI-driven engagement automation at scale.

Do

Trained on your last 90 days of replies. Sounds like you, not like a chatbot.

Don't

Our cutting-edge LLM technology delivers hyper-personalized customer experiences.

Do

Drafts wait in a queue. You approve. Nothing posts until you say so.

Don't

Seamlessly streamline your social workflow with intelligent automation.

Do

If a reply is wrong, edit it. ReplyMagic learns from the change.

Don't

Leverage advanced ML feedback loops to continuously optimize engagement.

Color

A small palette, used deliberately.

Bone paper, near-black ink, a single signal-green accent. Dark sections are region-scoped, not global.

Bone — paper & surfaces

bone-50 #faf7f1 Paper / raised surface
bone-100 #f4f1eb Default surface (page bg)
bone-200 #ebe6dc Sunken surface
bone-300 #ddd6c7 Strong surface / dividers

Ink — text & dark surfaces

ink-900 #0a0a0a Default text / dark surface
ink-800 #1a1a1a Raised dark surface
ink-700 #2a2a2a Strong dark surface
ink-500 #6b6359 Muted ink (warm gray)

Accents

signal oklch(0.72 0.16 145) Primary accent / success / focus ring
signal-soft oklch(0.92 0.07 145) Accent wash / backgrounds
amber oklch(0.78 0.14 75) Secondary accent / warning
amber-soft oklch(0.94 0.05 75) Warning wash
danger oklch(0.62 0.22 27) Destructive / errors
info oklch(0.65 0.15 240) Informational
Typography

Inter + Instrument Serif + JetBrains Mono.

Three families, used at strict roles. The serif is the editorial voice; the sans does the work; the mono whispers metadata.

Body & UI

Inter

Weights: 400 / 500 / 600 / 700

All product UI, body copy, navigation, buttons.

font-family: 'Inter', system-ui, sans-serif;
The quick brown fox jumps over the lazy dog.
Display & headlines

Instrument Serif

Weights: 400 regular + italic

Hero headlines, section titles, editorial accents. Use italics for the emphasized phrase.

font-family: 'Instrument Serif', Georgia, serif;
Replies that sound like you.
Code & eyebrow labels

JetBrains Mono

Weights: 400 / 500

Code samples, token names, eyebrow labels (uppercase, tracked 0.12em).

font-family: 'JetBrains Mono', ui-monospace, monospace;
const reply = await draft(comment);

Type scale

TokenSizeUse
text-xs 11px Eyebrow / micro-label
text-sm 13px Captions, metadata
text-base 15px Body
text-md 17px Lede / lead paragraph
text-lg 20px Sub-headline
text-xl 24px Card title
text-2xl 30px Section subhead
text-3xl 38px Section head
text-4xl 48px Page title
text-display-md clamp(40, 5.5vw, 78)px Hero (fluid)
text-display-lg clamp(48, 6.4vw, 104)px Hero — large (fluid)
Form

Spacing, radii, shadow, motion.

Spacing (4px scale)

space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-24
96px
space-32
128px

Radii

radius-xs 2px
radius-sm 4px
radius-md 6px
radius-lg 10px
radius-xl 14px
radius-2xl 20px
radius-pill 999px

Shadow

  • shadow-sm Soft elevation — cards, dropdowns
  • shadow-md Modals, popovers
  • shadow-lg Floating panels, overlays
  • shadow-block Signature: 8px 8px 0 ink-900 — hero scanner, CTA cards. Hard offset, no blur.
Block shadow

Motion

TokenDurationUse
duration-instant 80ms Hover state flips, micro-feedback
duration-fast 150ms Button presses, toggles
duration-base 220ms Default — most transitions
duration-slow 400ms Sheet/drawer opens, hero reveals
duration-slower 700ms Page-level orchestration

Signature easing: cubic-bezier(0.22, 1, 0.36, 1)

Downloads

Public assets.

Logo

logo.png — full horizontal logo for light backgrounds.

Icon

favicon.png — square mark for avatars and favicons.

Social card

og-image.png — Open Graph share image.

Design tokens

@reply-magic/design-tokens — CSS variables, single source of truth.

Press

Quotes, screenshots, founder background.

Write to

For interviews, podcast bookings, launch coverage, and additional brand assets.

Connect your account.
Watch it handle the rest.