colors typography borders radius spacing effects components

Design System

OpenArt Visual Reference

Color palette, typography scale, spacing tokens, and component styles — everything your team needs.

Color System

Background Scale

bg-0 #0B090C Body / primary background

bg-1 #121314 Panels / presets

bg-2 #16181a Cards / testimonials

bg-3 #1b1d1f Tooltips / thumbs

bg-4 #242729 Elevated surfaces

Brand Colors

Brand Primary #fb23c2 CTA, ratings, accents

Brand Light #ff82db Highlights, active states

Brand Hover #ed00b5 Button hover

Light Theme

Section BG #ebf0f5

Card BG #fafdff

Text Colors

Aa Primary #ffffff

Aa Secondary #b0b4ba

Aa Muted #696e77

Aa Dim #43484e

Aa Title (light) rgba(0,0,0,0.95)

Aa Body (light) #60646c

Aa Accent (light) #cd009b

Glass / Translucent

Glass BG rgba(214,225,255,0.03)

Glass Hover rgba(214,225,255,0.07)

Card BG rgba(255,255,255,0.03)

Button Ghost rgba(255,255,255,0.04)

Upload BG rgba(255,255,255,0.06)

Badge BG rgba(255,255,255,0.08)

Active BG rgba(255,255,255,0.12)

Typography

Three font families: Bricolage Grotesque for headings, Inter for body, JetBrains Mono for code/numbers.

Headings

Bricolage Grotesque

Weights: 400 – 800

Body

Inter

Weights: 300 – 900

Mono

JetBrains Mono

Weights: 400, 500

Type Scale

H1 64px

OpenArt Features

w700 lh 72px ls -0.03em

H1 tablet 48px

OpenArt Features

w700 lh 56px ls -0.03em

H1 mobile 36px

OpenArt Features

w700 lh 44px ls -0.03em

H2 40px

Section Title

w700 lh 48px ls -0.02em

H3 24px

Feature Block Title

w700 lh 32px ls -0.01em

Eyebrow 14px

SECTION LABEL

w600 lh 20px ls 0.08em

Eyebrow S 11px

BADGE TEXT

w700 lh 16px ls 0.08em

Body L 20px

Large body text for hero subtitles and key descriptions.

w400 lh 32px ls 0

Body 18px

Standard body text used in section descriptions.

w400 lh 28px ls 0

Body S 16px

Smaller body text for general content and paragraphs.

w400 lh 24px ls 0

Body XS 15px

Extra small body for FAQ answers and feature descriptions.

w400 lh 24px ls 0

Caption 14px

Nav links, buttons, card descriptions

w500 lh 20px ls 0

Caption S 13px

Community card titles, small labels

w500 lh 18px ls 0

Mono 18px

01 02 03

w800 lh 24px ls 0.05em

Borders & Radius

Border Colors

Primary rgba(214,225,255,0.08)

Hover rgba(214,225,255,0.19)

Brand Accent rgba(255,130,219,0.2)

Brand Strong rgba(255,130,219,0.4)

Light theme rgba(0,0,45,0.09)

Border Radius

sm 4px Buttons, inputs

md 8px Images, uploads, tabs

lg 12px Large buttons, CTA

xl 16px Cards, panels

full 9999px Badges, pills, avatars

Spacing

Spacing Scale

3xs

8px Form label margin, small gaps

2xs

12px Section label margin, step title margin

16px Hero badge margin, gallery track gap

24px Panel header margin, step card gap

32px Blog description margin, footer padding

48px Community header margin, CTA margin

64px Feature blocks gap

2xl

80px Footer watermark rows

3xl

96px Use cases list gap

Container Max-widths

1440px Nav, footer

1340px Hero, benefits

1280px How-to-use

1120px Default container

800px FAQ list

Effects & Utilities

Gradient Text

Gradient Text Effect

linear-gradient(135deg, #ffffff 0%, #ffcbef 50%, #ff82db 100%)

Shadows

Brand Glow

0 0 40px rgba(251,35,194,0.12)

Card Shadow

0 4px 24px rgba(0,0,0,0.6)

Button Hover Glow

0 0 20px rgba(251,35,194,0.45)

Backdrop Blur

8px CTA, upload buttons

12px Card hover overlay

16px Nav, outlined buttons

24px Mobile menu

Button Styles

Primary CTA White Pill Ghost Outline Pill

UI Components

Patterns extracted from openart.ai/suite/home

Category Tabs

Hero-level navigation tabs. Active tab filled, inactive outlined.

Active: bg-white text-dark · Inactive: border rgba(214,225,255,0.12) text 0.6 · Radius: full

TOC Section Tabs

Template-level navigation for scrolling to sections.

hero benefits community features faq

BG: rgba(255,255,255,0.03) · Border: rgba(214,225,255,0.08) · Text: #b0b4ba · Radius: 8px

Suite Feature Card

Used in "OpenArt Suite" grid. Icon/thumbnail + title + description.

Text to Video

Generate videos from text prompts

Frame to Video

Generate videos from images

Motion Sync

Motion sync from image and motion reference

Promo Banner Card

Hero-level promotional cards with background image, heading, and CTA.

NEW

Create Your Own AI World

Create 3D World

AI Personality Awards

Win $90K

UNLIMITED

Qwen Image 2

Unlock

Model Card

"Latest AI Models" horizontal scroll. Thumbnail + name + description.

Qwen Image 2

Enhanced realism and improved text rendering

Sora 2

Cinematic videos with consistent characters

Nano Banana Pro

Fast and efficient image generation

Kling 3.0 Omni

Enhanced multimodal references

Section Header

Title + "More →" link pattern used across the home page.

OpenArt Suite

H4: 22px Bricolage 700 · Link: 14px Inter 500 text 0.5

Toggle Tabs

Used in "Inspirations" section for Image/Video toggle.

Active: bg rgba(255,255,255,0.1) text white · Inactive: text 0.5 · Container: border + overflow hidden

Nav Dropdown

Mega menu used in NavV3. Multi-column with group headings.

VIDEO MODELS

Kling 3.0 Sora 2 Seedance 2.0

IMAGE MODELS

Nano Banana 2

OTHER

Audio 3D Models

BG: #16181a · Border: rgba(214,225,255,0.12) · Shadow: 0 8px 32px rgba(0,0,0,0.5) · Radius: 16px