The approved Content Rabbit system
Fast, friendly social publishing.
Content Rabbit helps people plan, create, schedule, and publish social content. The brand combines speed, clarity, and restrained playfulness.
Identity and promise
We sound like a capable teammate. Every message starts with the task a person can complete. The experience stays quick, calm, and clear, with just enough personality to feel human.
Write the name this way
Content Rabbit
Use two capitalized words. Use contentrabbit only in a domain, package, or fixed wordmark. Never write the product name in all capitals.
Marks
The primary logo pairs the rabbit mark with the wordmark. Use the mark alone when the full lockup cannot fit. Keep clear space equal to the mark’s height.
- Prefer the primary lockup on clear backgrounds.
- Use the monochrome mark on busy or low-contrast fields.
- Do not stretch, recolor, redraw, or add effects.
- Keep the original proportions and clear space.
Palette
Purple leads. Supporting colors add energy to illustrations and data. They never become large page fills or replace semantic status colors.
- Purple
#7857ED - Pink
#FF5BA8 - Blue
#5B7EFF - Green
#00C48C - Yellow
#FFC72C - Orange
#FF9600 - Red
#FF4B4B
Product interfaces use semantic variables from packages/styles/src/tokens.css. Define light and dark values together. Use named status colors only for their status.
| Token | Light | Dark | Use |
|---|---|---|---|
| --background | #FFFFFF | hsl(217 32% 12%) | Page canvas |
| --background-2 | #F5F5F5 | hsl(217 32% 15%) | Elevated surface |
| --background-3 | #F0F0F0 | hsl(217 32% 18%) | Higher surface |
| --foreground | #1A1A1A | hsl(0 0% 98%) | Primary text |
| --primary | #7857ED | hsl(227 100% 74%) | Primary actions |
| --muted | #F5F5F5 | hsl(217 32% 35%) | Quiet controls |
| --muted-foreground | #666666 | hsl(240 5% 84%) | Secondary text |
| --border | #E0E0E0 | hsl(217 32% 32%) | Dividers and outlines |
| --ring | #7857ED | hsl(227 100% 74%) | Focus indication |
| --link | #5B7EFF | hsl(227 100% 74%) | Text links |
Aa
Poppins
Poppins is the brand typeface for headings and body copy. Its geometric forms feel friendly without becoming childish.
- Headings
- Semibold, tight tracking, one clear hierarchy.
- Body
- Regular weight, comfortable line height, short paragraphs.
- Machine values
- Use the system monospace stack only for code, keys, and data.
Shape and mascot
Circles, pills, and soft rectangles echo the rabbit mark. Keep compositions flat and simple. Use one pill-shaped shadow when a graphic needs depth.
The mascot appears in onboarding, empty states, and celebrations. Keep expressions friendly and confident. Never redraw it, change its proportions, or use it as filler.
Voice
Be direct, warm, and brief. Use short sentences and active voice. Lead with what the user can do. Use no more than one rabbit pun on a page.
Sounds like us
- “Schedule your next post.”
- “Fixed image uploads on slow connections.”
- “Your draft is ready to review.”
Does not sound like us
- “Leverage our revolutionary content ecosystem.”
- “We rewrote the queue worker!”
- “Hop into amazing results!!!”
Changelog entries begin with Added, Improved, or Fixed. Describe the visible result, not the implementation.
Asset pack
The approved generated pack lives in branding/. Use the supplied files as-is. Do not edit generated SVG files independently. Request another format at brand@contentrabbitai.com.
- Browser
- favicon.svg · apple-touch-180.svg
- Browser and home-screen icons
- Application
- icon-512.svg · icon-maskable-512.svg
- Application and PWA icons
- Brand field
- logo-on-brand.svg
- Logo on the purple brand field
- Controlled mark
- mark-transparent.svg
- Mark on a controlled background
- Outlined mark
- mark-outline.svg
- Mark on light or dark pages
- Profiles
- profile-512.svg · profile-square-512.svg
- Social profiles
- Previews
- og-1200x630.svg
- Link previews
- Covers
- linkedin-cover-1584x396.svg · x-header-1500x500.svg
- Social covers
- Figma
- figma-icon-128.svg · figma-thumbnail-1920x1080.svg
- Figma listings
Approval boundary
Content Rabbit owns its name and logo trademarks. External partners, press, listings, and other third parties need approval before publishing the brand.
brand@contentrabbitai.comAccessibility floor
- Meet WCAG AA contrast for body text.
- Keep keyboard focus visible with the ring token.
- Do not communicate state with color alone.
- Pair every control with a visible label or accessible name.
- Test narrow and wide layouts in light and dark themes.
Use the system
Do
- Lead with the task a person can complete.
- Use semantic interface tokens and shared components.
- Use purple for the primary action.
- Use rounded forms with a simple, flat perspective.
- Keep the experience quick, clear, and calm.
Don’t
- Fork shared tokens inside an integration.
- Use accent colors as large page fills.
- Stretch, recolor, or redraw the logo or mascot.
- Use sharp forms, decorative mascots, or muddy shadows.
- Hide hierarchy behind excessive cards or effects.