Brand Essence
The core philosophy behind Art Official Idol's design
Inspiration: Notion
Clean, block-based design. Minimal chrome, maximum content. Everything is composable and flexible.
Inspiration: Notebook
Warm paper tones, ruled lines, handwritten feel. The intimacy of analog meets digital capability.
Color Palette
Core colors that define the Art Official Idol brand
Primary Colors
Semantic Colors
Chart & Data
Brand Gradient
The signature gradient used across the platform
--gradient-teal: #0D7377--gradient-coral: #E07A5FTypography
Type scale and font usage
Geist Sans
Clean, modern sans-serif for UI elements
Display XL (60px)
Display LG (48px)
Heading 1 (36px)
Heading 2 (30px)
Heading 3 (24px)
Heading 4 (20px)
Body Large (18px)
Body (16px)
Small (14px)
Extra Small (12px)
Notebook Components
Warm, analog-inspired components for creative writing
Notebook Tokens
--notebook-paper: Warm cream background--notebook-lines: Light blue ruled lines--notebook-margin: Red margin line--notebook-ink: Blue-black text--notebook-pencil: Graphite gray draft textNotion-Style Components
Clean, block-based UI patterns
Property Pills
Callout
Pro Tip
Use callouts to highlight important information or tips for students.
Toggle Block
Click to expand
Hidden content goes here. Great for FAQs or collapsible sections.
Status Badges
Content approval status indicators
Artist Profile
MySpace/Spotify-inspired profile elements
Artist Name
Virtual Artist Profile
Track Card
Summer Vibes
3:24 • Pop
Spacing Scale
Consistent spacing tokens for layouts
--space-14px--space-28px--space-312px--space-416px--space-624px--space-832px--space-1248px--space-1664pxBorder Radius
Rounded corner tokens
--radius-sm6px
--radius-md8px
--radius-lg12px
--radius-xl16px
Animation
Motion and transition tokens
Duration
--duration-fast: 150ms
--duration-base: 200ms
--duration-slow: 300ms
Easing
--ease-default
--ease-in
--ease-out
--ease-bounce
Animations
Content Types
The creative content students can produce
Music
AI-generated songs via Suno integration
Art
Album covers and promotional artwork
Video
Music videos and visual content