Design System

DesignExcellence

Every pixel is intentional. This is the FrankX design system — the principles, tokens, and standards that make frankx.ai feel premium, coherent, and unmistakably ours.

Principles Colors Typography Glassmorphism Spacing Components

Design Principles

Six rules that govern every design decision on frankx.ai.

Dark-First

Every surface starts at #0a0a0b. Light is earned through glassmorphism and accent glows. Never pure black, never light mode as an afterthought.

Glass Over Solid

Cards use bg-white/[0.03] with backdrop-blur. Maximum opacity: 0.08. The glass layering creates depth without weight. Borders at white/[0.06].

Motion With Purpose

Only animate transform + opacity. 200ms for interactions, 300ms for transitions, 8-15s for ambient effects. Respect prefers-reduced-motion always.

Accessible By Default

WCAG AA minimum (4.5:1 text, 3:1 UI). Focus rings use purple (#AB47C7). All interactions have keyboard alternatives. Reduced motion support mandatory.

Mobile-Considered

Touch targets minimum 44x44px. Breakpoints at 640/768/1024/1280/1536. Content widths: 680px prose, 896px cards, 1280px page max.

Type Discipline

Poppins for text ≥18px only. Inter handles all body and UI. JetBrains Mono for code. Playfair Display only for italic editorial quotes. No exceptions.

Color System

Dark-first foundation with purposeful accent colors. Click any swatch to copy the hex value.

Foundation

Accent Colors

Text Hierarchy

PrimaryHeadings

rgba(255,255,255,0.95)19.1:1

SecondaryBody text

rgba(255,255,255,0.72)12.3:1

Blog BodyBlog body

rgba(255,255,255,0.85)7.2:1 (AAA)

TertiaryCaptions

rgba(255,255,255,0.48)6.1:1

MutedPlaceholders

rgba(255,255,255,0.32)4.2:1

Typography Scale

Three font families, strict size discipline. Poppins headings, Inter body, JetBrains Mono code.

Display

Build what matters.

Poppins 800

72px / 1.05

Build what matters.

Poppins 700

48px / 1.15

Build what matters.

Poppins 700

36px / 1.2

Build what matters.

Poppins 600

28px / 1.25

Build what matters.

Poppins 600

22px / 1.3

Body Lg

Build what matters.

Inter 400

20px / 1.65

Body

Build what matters.

Inter 400

17px / 1.7

Caption

Build what matters.

Inter 500

13px / 1.5

Code

Build what matters.

JetBrains Mono 400

14px / 1.7

Glassmorphism Playground

Adjust opacity, blur, and border to see how glass layers work. The standard values are marked.

Glass Card

Adjust the controls to see how glassmorphism parameters affect the visual result.

Tag

Label

Background Opacity3%

0% (invisible)3% standard8% max15% too much

Backdrop Blur18px

0px (none)18px standard40px heavy

Border Opacity6%

0% (none)6% standard20%

CSS

background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;

Ghost

0.02

Hover

Standard

0.03

Cards

Elevated

0.05

Active

Strong

0.08

Max

Spacing System

4px base grid. Every spacing value is a multiple of 4.

tight4px

compact8px

default12px

standard16px

medium24px

large32px

xl48px

2xl64px

3xl80px

4xl120px

Content Widths

Prose680pxmax-w-[680px]Blog body, 65-75 chars/line

Content896pxmax-w-4xlCards, grids, wider content

Page1280pxmax-w-7xlStandard page container

Component Patterns

Live examples of core component patterns used across frankx.ai.

Buttons

Badges & Tags

PurpleBlueMagentaEmeraldGoldRose

Cards

Glass Card

bg-white/[0.03] + backdrop-blur

Elevated Card

bg-elevated + border

Accent Card

Left border accent

Focus Ring

outline: 2px solid #AB47C7, offset: 2px

Border Radius Scale

4px