PRISM Visual System

A comprehensive design foundation built for scalability, accessibility, and creative expression. Every token, component, and guideline is crafted to maintain brand consistency across all touchpoints.

System Principles Core

01. Clarity First

Hierarchy and readability drive every design decision. Content breathes, and purpose is never obscured.

02. Adaptive Flexibility

Tokens and components scale seamlessly across devices, themes, and contexts without losing identity.

03. Intentional Creativity

Structure enables creativity. Constraints aren't limitations—they're the canvas for innovation.

Color Palette

A deliberate spectrum balancing energy with neutrality. Primary gradients drive recognition, while semantic tones communicate state and accessibility.

Brand Colors

Primary Violet

#a855f7

CTAs, Links, Active States

Secondary Rose

#f472b6

Highlights, Accents, Hover

Accent Sky

#38bdf8

Info, Tags, Subtle Hierarchy

Neutrals & Surfaces

900 Base

#050508

Backgrounds

800 Surface

#13131a

Cards, Panels

700 Elevated

#1c1c27

Inputs, Hover

600 Borders

#2a2a35

Dividers, Focus

400 Muted

#8888a0

Placeholder, Disabled

100 Text

#f0f0f5

Primary Copy

Semantic States

Success

#22c55e

Warning

#eab308

Error

#ef4444

Typography

A dual-font system pairing expressive display typography with a highly legible interface font. Scale follows a modular 1.25 ratio for harmonic rhythm.

Font Families

Syne

Display / Headings. Artistic, bold, distinctive. Use for H1–H3 and key messaging.

font-family: 'Syne', sans-serif;
font-weight: 700 | 800;
line-height: 1.15;

Space Grotesk

UI / Body / Navigation. Technical, clean, highly readable. Use for paragraphs, forms, and data.

font-family: 'Space Grotesk', sans-serif;
font-weight: 400 | 500;
line-height: 1.6;

Type Scale

Display

PRISM

3.5rem / 800

Creative Vision

2.5rem / 700

Design Systems

2.0rem / 700

Component Libraries

1.5rem / 600

Body

Interface text uses neutral weight for optimal reading comfort and scanability.

1.0rem / 400

Caption

Metadata & labels

0.875rem / 500

Mono

code-tokens, hex-values

0.85rem / 400

Spacing & Grid

An 8px baseline grid ensures visual rhythm and predictable layout math. Spacing tokens scale in 4px increments.

Spacing Tokens

--space-1

0.25rem

--space-2

0.50rem

--space-3

1.00rem

--space-4

1.50rem

--space-5

2.00rem

--space-6

3.00rem

--space-8

4.00rem

--space-10

6.00rem

12-Column Layout Grid

Gutters: 12px | Margins: 24px (mobile) / 48px (desktop)

1/3

2/3

1/4

1/2

3/4

UI Components

Atomic building blocks designed for composition, accessibility, and theme adaptability.

Buttons

.btn-primary { background: var(--gradient); color: #050508; }
.btn-secondary { border: 1px solid var(--dark-500); }
/* States: hover, active, disabled, loading */

Inputs & Forms

Email Address

Project Name

Status

Card Component

🔮

System Architecture

Modular design tokens powering consistent experiences across platforms.

Updated 2 days ago

Iconography

Custom SVG icon set optimized for clarity at 16px–32px. Consistent 2px stroke weight, rounded caps, and 4px grid alignment.

Core Set

layers

clock

user

message

plus

check

bell

shield

settings

Motion & Interaction

Purposeful animation that guides attention, confirms state changes, and reinforces brand personality without distracting from content.

Easing Curves

ease-out (default)cubic-bezier(0.16, 1, 0.3, 1) — 200ms. Used for reveals, hovers, and enter states.

ease-in-outcubic-bezier(0.4, 0, 0.2, 1) — 300ms. Used for modal transitions and page changes.

Micro-interactions

👆

Hover Lift

translateY(-2px) + shadow increase

🔄

Feedback Scale

scale(0.97) on click, 150ms duration

✨

Stagger Entrance

opacity 0→1, delay 50ms per child

Usage Guidelines

Rules of thumb for maintaining system integrity, accessibility compliance, and brand coherence.

✅ Do

Use CSS custom properties for all colors, spacing, and typography.
Maintain minimum 4.5:1 contrast ratio for body text.
Stick to the 8px spacing baseline for layout and padding.
Apply motion purposefully—never for decoration alone.
Test components across mobile, tablet, and desktop breakpoints.

🚫 Don't

Hardcode hex values or magic numbers in components.
Use more than 2 primary accent colors in a single interface.
Override system font stacks with external web fonts for body text.
Apply animations to static data tables or dense informational grids.
Break grid rhythm by using arbitrary padding values (e.g., 13px, 7px).

Accessibility Notes

WCAG 2.1 AA TargetAll interactive elements must support keyboard navigation and screen reader labels.

Focus StatesVisible 3px ring offset using --primary-20.

Reduced MotionRespect @media (prefers-reduced-motion) by disabling non-essential transitions.

Touch TargetsMinimum 44×44px for all clickable elements on mobile viewports.