Brand Identity
The visual language of Edit8. This page documents our logo, color palette, typography, and core design patterns as implemented across the platform.
Logo
The Edit8 mark is an 8-petal geometric form representing transformation and creative possibility. It is always rendered in a single flat color.
Default — #4a4a4a on lightInverted — white on darkWordmark (Icon + Text)
Edit8.appEdit8.appEdit8.appEdit8.appGradient Position (applies to gradient logo + wordmark variants)
Logo Color
#4a4a4a
Minimum Size
24px × 24px
Logo Variants
Downloadable icon-only logo renderings. Use the gradient and transparent controls above to customize before downloading.
X (Twitter) Banners
Pre-designed header banners at 1500×500 (3:1) for X/Twitter profiles. Downloads at 2x resolution.
Edit8Become an AI influencer without showing your face.Edit8Become an AI influencer without showing your face.Edit8Become an AI influencer without showing your face.Edit8Become an AI influencer without showing your face.Edit8Become an AI influencer without showing your face.Edit8Become an AI influencer without showing your face.Edit8Post Creator (4:5)
Create on-brand social media posts. Customize the text, pick a background, and download at 2x resolution.
Abstract Backgrounds
On-brand abstract backgrounds using the Edit8 color palette. Downloads at 2x resolution in 16:9 aspect ratio.
Demos
Animated product demos on white background. Click Download to record one full animation cycle as a WebM video.
Brand Gradient
The signature Edit8 rainbow gradient is used on the wordmark “8”, CTAs, animated backgrounds, and accent elements. It cycles through six colors.
Pink
#ff9a9e
Peach
#fad0c4
Blue
#a1c4fd
Cyan
#c2e9fb
Lime
#d4fc79
Cream
#ffecd2
CSS
radial-gradient(circle, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #d4fc79, #ffecd2, #ff9a9e)Color Palette
A neutral, light-mode-first palette. Dark grays anchor the UI while the brand gradient supplies energy. All values are defined as CSS custom properties in globals.css.
Primary & Text
Accent Primary
#333333
Accent Hover
#4a4a4a
Text Primary
#404040
Text Secondary
#525252
Neutrals
Text Muted
#8E8E93
Placeholder
#C5C5C7
Border
#e8e8e8
Border Light
#F0F0F0
Surfaces
Background
#fcfcfc
Surface 1
#FAFAFA
Surface 2
#F5F5F5
Card
#fcfcfc
Semantic
Success
#34C759
Warning
#FF9500
Error
#FF3B30
Info
#007AFF
CTA Cream
CTA Light
#F5F0E1
CTA Mid
#E8E3D5
CTA Hover
#DBD6C8
Typography
Edit8 uses Geist Sans as the sole typeface across the entire product — headings, body, labels, and UI elements. It is self-hosted via the next/font Geist package.
Geist Sans
Primary typeface — headings, body, UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Weights
Ag
Regular
400
Ag
Medium
500
Ag
Semibold
600
Ag
Bold
700
Type Scale
Display
36px
Edit8
Heading 1
30px
AI-powered creation
Heading 2
24px
Generate anything
Heading 3
20px
Identity system
Heading 4
18px
Motion sync
Body
16px
Create stunning AI-generated content with consistent identity across every output.
Body Small
14px
Credits are deducted based on model and quality settings selected.
Caption
12px
Last updated 2 minutes ago
UI Patterns
Core interaction elements used throughout the platform. All built with Tailwind utility classes using the design tokens above.
Buttons
Border Radius
sm
6px
md
8px
lg
12px
xl
16px
2xl
20px
3xl
24px
full
9999px
Cards
Default Card
bg-[#fcfcfc] border-[#e8e8e8] rounded-2xl
Surface Card
bg-[#FAFAFA] rounded-xl
Dark Card
bg-[#1F1F1F] rounded-2xl
Shadows
sm
md
lg
xl
2xl
Design Tokens
Quick reference for the core CSS custom properties defined in globals.css.
--bg-primary--bg-secondary--bg-tertiary--bg-hover--bg-active--text-primary--text-secondary--text-muted--text-placeholder--text-inverse--icon-nav--icon-default--accent-primary--accent-primary-hover--border-default--border-light--border-divider--border-focus--accent-success--accent-warning--accent-error--accent-info--font-sans