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: #E07A5F

Typography

Type scale and font usage

Font Family

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 text

Notion-Style Components

Clean, block-based UI patterns

Property Pills

DefaultTealCoralGreenRedBlue

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

Pending ReviewApprovedNeeds Changes

Artist Profile

MySpace/Spotify-inspired profile elements

Artist Name

Virtual Artist Profile

Track Card

Summer Vibes

3:24 • Pop

Approved

Spacing Scale

Consistent spacing tokens for layouts

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

Border Radius

Rounded corner tokens

--radius-sm

6px

--radius-md

8px

--radius-lg

12px

--radius-xl

16px

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

PulseBounce

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