LevelUp.zone Brand
The warm, plain-spoken design system behind the automation tool that keeps your posts working long after you publish. Built straight from the live tokens, so it never drifts.
Identity
Logo & wordmark
The mark is a soft purple square with a single white dot — a post, bumped. Paired with the wordmark in Bricolage Grotesque bold.
Foundations
Color palette
Warm cream surfaces, a signature purple, a fresh green, and a tight status set. Every swatch paints from its real Tailwind utility.
Surfaces
bg-bgWarm cream paper — the page.
bg-bg-2Muted fills and hover states.
bg-surfaceCards and raised panels.
border-borderWarm hairline dividers.
Ink & dark
text-inkPrimary text and solid ink pills.
text-mutedSecondary and supporting text.
bg-bandDark sections — CTAs and footers.
Brand — purple
bg-brandSignature purple — primary actions.
bg-brand-darkHover / pressed purple.
bg-brand-softSoft purple wash for secondary fills.
Accent — green
bg-accentSignature green — success & go.
bg-mintFresh green wash for accent fills.
Status
text-successPositive states and confirmations.
text-warningCautions and pending states.
text-dangerErrors and destructive actions.
Foundations
Typography
Bricolage Grotesque for display, Geist for body, Geist Mono for code. Bold and near-black up top, warm grey for support.
font-displaySet it once.
It keeps working.
Automated reposting
Heading four / card title
Eyebrow / label
font-sansLarge body — LevelUp.zone schedules and quietly reposts your content so it keeps earning attention.
Base body — pick a post, set a cadence, and watch the activity log fill in. You stay in control the whole way.
Small / secondary — used for captions, helper text, and metadata throughout the product.
font-mono · Geist Mono
const next = schedule.nextRun(post.id);
Primitives
Components
The shared UI kit — buttons, cards, inputs, badges, tags, switches, and tabs. Everything below is the real component.
Button — variants
Button — sizes
Link as button
buttonClass(variant, size) on <Link> / <a>.Card — color variants & sub-parts
Compose card
Header, body, and footer sub-parts on a surface.
The flush variant strips inner padding so the sub-parts own their spacing.
Brand soft
color="brand-soft"
Mint
color="mint"
Brand
color="brand"
Band
color="band"
Surface
color="surface" (default)
Input & Field
Paste the link you want to keep bumping.
Choose at least one day to repost.
Switch
Badge — tones
Tag — colors
Tabs & Tooltip
Pick the days and times LevelUp.zone re-shares this post. It runs in the cloud — your machine can be off.
Flourishes
MagicUI
A small set of tasteful animated primitives — used sparingly, where they earn a smile. Each one below is live.
MagicCard + BorderBeam
A cursor-following spotlight with a light orbiting the edge. Move your pointer across this card.
ShineBorder
A purple-to-green gradient that travels slowly along the border. Quiet, premium, on-brand.
Posts re-shared this week — counted up with NumberTicker.
Marquee — feature pills
Brand
How we talk
Friendly, plain, and trustworthy. LevelUp.zone is a careful automation tool — the voice should feel like a teammate who has your back, never a hype machine.
Do
- Be friendly and plain — write like a careful teammate, not a billboard.
- Say what it does, concretely: "reposts on your schedule," not "supercharges reach."
- Lead with the benefit, then the mechanism. People skim.
- Keep one idea per sentence. Short beats clever.
- Be reassuring about control — it's their content, their timing, always pausable.
Don't
- Don't hype or shout — no "10x YOUR ENGAGEMENT!!!".
- Don't overpromise reach or imply we game any platform.
- Don't bury the point under jargon or filler words.
- Don't pile on exclamation marks or ALL-CAPS.
- Don't sound cold or corporate — we're warm, just not loud.
In one line
Set it once, and your posts keep working — quietly, on your schedule.