Neel Suman Raj — Lead Product Designer

A unified language of reusable foundations and components that brings clarity, consistency, and structure to every interface.

01 · Audit

Start with the messy reality

Before standardizing anything, inventory the product as it exists: duplicates, near-matches, one-off solutions, accessibility gaps and repeated interaction problems.

What the audit looks for

The goal is not to count screens for presentation. It is to identify where inconsistency creates design debt, slows implementation or harms comprehension.

Repeated UI with different visual treatmentSame intent expressed through different behaviorOne-off patterns that should stay product-specificMissing keyboard, focus or responsive behavior

Observed elementRelationshipDecision

Primary actionsNear matchUnify

Search fieldsDuplicateStandardize

Dense data tableShared patternSystemize

Domain workflow cardUniqueExtend

02 · Brand foundations

Consistency without becoming generic

A mature system standardizes interaction while protecting the visual and verbal character that makes the product recognizable.

Structured, calm, precise—and still unmistakably Prism.

Brand expression comes through proportion, typography, semantic color, motion restraint and content tone rather than decorative inconsistency.

GeistEditorial scaleBlue signal colorQuiet surfaces

Typography

Geist only

One family across display, product and data contexts.

Shape

Soft precision

Controlled radii and spacing—never playful for its own sake.

Voice

Direct and useful

Clear action labels, recoverable errors and low-friction guidance.

Motion

Purpose before personality

Expressive motion is reserved for moments that genuinely benefit.

Principles

Rules before components

The system has a point of view. These principles guide decisions before a designer reaches for a component or a developer reaches for an API.

Clarity over decoration

Prioritize comprehension, status and next action before visual flourish.

Semantic over literal

Components consume roles and intent—not arbitrary hex values or one-off spacing.

Adaptive by default

Responsive behavior changes hierarchy, density and composition—not only size.

Accessible from the start

Keyboard, contrast, focus, motion and screen-reader behavior are part of the spec.

03 · Prioritization

Standardize where reuse pays back

Not every element deserves equal system investment. Frequency, implementation cost and cross-product reuse help decide what belongs in core, extension or local product space.

Core firstHigh-frequency, expensive-to-rebuild interaction belongs closest to the system core.

Extend deliberatelyReusable domain patterns can inherit foundations without forcing them into universal components too early.

Keep local when neededProduct-specific workflows should stay flexible until repeatability is proven.

ButtonInputNavigationTableAI responseResearch cardCalendar

System architecture

Atomic Design Principles

Small, predictable building blocks combine into increasingly capable product experiences—without losing the rules that make the system coherent.

Atoms

Foundational UI primitives: controls, labels, icons and tokens.

Molecules

Small combinations that solve one repeatable interaction.

Organisms

Structured groups that form meaningful product regions.

Templates

Responsive arrangements that define page hierarchy.

Pages

Real product contexts where the system proves its value.

Foundations

The system beneath the system

Core decisions stay compact and inspectable. Open only what you need.

Foundations

The shared visual rules every component inherits.

Brand#3347FF
Success#19A85B
Warning#E6A019
Error#EE4053
Mint#33B8A1
Surface#F5F6F8
Brand blue
Neutral

Foundations → behavior

Smart components start with smart tokens

Semantic naming lets themes, states and brands evolve without forcing every component to be rebuilt manually.

VariableLightDark

color/bg/primary#FFFFFF#17181C

color/bg/subtle#F5F6F8#202126

color/text/primary#17181C#FFFFFF

color/action/primary#3347FF#6673FF

color/status/success#19A85B#33C77A

radius/control10px10px

space/component12px12px

Primary

Success

Token architecture

Primitive → semantic → component

Prism separates raw values from meaning and component decisions, so themes and states can evolve without rewriting the interface layer.

01 / Primitive

Raw design values

Stable values with no product meaning yet.

blue.600#3347FF

space.312px

radius.310px

02 / Semantic

Intent & meaning

Roles adapt by theme, density and context.

bg.action.primaryblue.600

text.mutedneutral.600

focus.ringblue.300

03 / Component

Scoped decisions

Used only when a component needs a deliberate exception or state contract.

button.primary.bgbg.action.primary

button.primary.hoverblue.700

button.radiusradius.3

Component library · 131 components

Browse the system by category

Every component is contained inside a disclosure. The first component in each category is open initially; everything else stays quiet until requested.

Actions

Triggers, commands and emphasis hierarchy.

CoreWCAG 2.2 AA

Button

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Keyboard: Enter / Space where applicable
✓Visible focus indicator ≥ 3:1
✓Target size ≥ 24 × 24 CSS px

Navigation

Movement, orientation and location across product surfaces.

Inputs & Selection

Capture values, choices, dates, files and messages.

Project name

CoreWCAG 2.2 AA

Text Field

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Programmatic label + instructions
✓Errors identified in text, not colour alone
✓Keyboard operable with visible focus

Selection & Filtering

Narrow, tag, sort and persist working sets.

ResearchDesignProduct

CoreWCAG 2.2 AA

Chips

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Text contrast ≥ 4.5:1
✓UI/focus contrast ≥ 3:1
✓Keyboard access + visible focus

Communication & Feedback

System status, progress, validation and recovery.

CoreWCAG 2.2 AA

Badge

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Status is not communicated by colour alone
✓Live status announced when appropriate
✓Text and icons meet contrast requirements

Containment & Overlays

Group content and manage temporary contextual surfaces.

Research study

Concept validation

8 participants · 3 sessions complete

Active

CoreWCAG 2.2 AA

Card

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Text contrast ≥ 4.5:1
✓UI/focus contrast ≥ 3:1
✓Keyboard access + visible focus

Data & Content

Dense information, structure, analysis and history.

Research studiesStudyStatusUpdated
Concept validationActiveToday
Pricing studyReview2h ago
Diary researchDraftYesterday

Research studies
Study	Status	Updated
Concept validation	Active	Today
Pricing study	Review	2h ago
Diary research	Draft	Yesterday

CoreWCAG 2.2 AA

Table

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Headers and relationships are semantic
✓Keyboard path remains predictable
✓Dense text maintains ≥ 4.5:1 contrast

Identity & People

Represent people, presence and participant context.

NSARSM

CoreWCAG 2.2 AA

Avatar

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Text contrast ≥ 4.5:1
✓UI/focus contrast ≥ 3:1
✓Keyboard access + visible focus

Media & Utilities

Files, media, calendars and productivity utilities.

Abstract gradient · 16:9

CoreWCAG 2.2 AA

Image

Reusable across primary product surfaces.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Meaningful media has text alternative
✓Controls have accessible names
✓Captions/transcript available when required

Research & Domain

Research-specific workflows that inherit the core system.

DomainWCAG 2.2 AA

Question Types

Research-specific extension built on the core system.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Text contrast ≥ 4.5:1
✓UI/focus contrast ≥ 3:1
✓Keyboard access + visible focus

AI Patterns

AI interaction patterns with context, sources and human control.

Prism AI can make mistakes

ExtendedWCAG 2.2 AA

AI Prompt Input

Specialized capability built on shared foundations.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Programmatic label + instructions
✓Errors identified in text, not colour alone
✓Keyboard operable with visible focus

Structural Primitives

Low-level layout and interaction building blocks.

Base
Raised
Overlay

PrimitiveWCAG 2.2 AA

Surface

Foundation-level layout or interaction primitive.

ThemeLight + darkResponsiveAdaptiveInteractionKeyboard + pointer

Accessibility checks✓Text contrast ≥ 4.5:1
✓UI/focus contrast ≥ 3:1
✓Keyboard access + visible focus

Accessibility · WCAG 2.2 AA

Accessibility is specified, not assumed

Prism treats accessibility as component behavior: semantics, keyboard operation, focus, contrast, error recovery, target size and motion preferences are documented with the visual states.

1.4.3

Text contrast

Normal text ≥ 4.5:1. Large text ≥ 3:1.

1.4.11

Non-text contrast

Meaningful icons, boundaries and UI states ≥ 3:1 where required.

2.1.1

Keyboard

Every action is available without requiring a pointer.

2.4.7 · 2.4.11

Focus

Focus is visible and is not hidden behind sticky or overlay UI.

2.5.7

Dragging movements

Every drag interaction has a non-drag alternative such as click-to-add or Move Up / Down.

2.5.8

Target size

24 × 24 CSS px minimum; Prism prefers 44 × 44 for frequent touch actions.

3.3.1 · 3.3.2

Errors & labels

Errors are identified in text and controls receive persistent labels/instructions.

4.1.2

Name, role, value

Interactive controls expose programmatic names, roles, states and values.

Motion preference

Reduced motion

Nonessential animation is removed when reduced motion is requested.

Verified token samplesWCAG AA contrast audit

Light body: 16.15:1
Light muted: 6.25:1
Primary action: 6.02:1
Dark body: 14.83:1
Dark muted: 9.04:1
Dark primary: 8.06:1

These ratios validate the core preview token pairs; individual product combinations still require contrast checks during implementation.

Light surface

3px Prism focus ring

Dark surface

Never obscured by sticky UI

Motion system

Motion has a job

Productive motion clarifies state and movement. Expressive motion is reserved for moments that benefit from personality and emphasis.

Motion tokens

duration.fast120ms

duration.default180ms

duration.emphasis280ms

easing.entercubic-bezier(.2,.8,.2,1)

easing.exitcubic-bezier(.4,0,1,1)

distance.small8px

Content & localization

Words are part of the component API

Content guidance reduces ambiguity and protects components when copy expands, localizes or communicates risk.

Action labels

Use a clear verb + object when consequence matters.

Do: Delete project
Avoid: Continue

Error recovery

Explain what happened and the next recoverable action.

File is larger than 10 MB. Choose a smaller file and try again.

Localization-safe

Allow labels to grow without truncating critical meaning or controls.

Flexible width · multiline where appropriate · no text baked into imagery.

Patterns

Components solve controls. Patterns solve tasks.

Search, error recovery, onboarding and empty states describe how multiple components cooperate to help a user complete something meaningful.

Search & filter

Find, narrow and recover results without hiding current context.

ActiveDraftArchived

Templates → pages

Components become product

The system is successful when real interfaces feel coherent without looking mechanically assembled.

Studies

Study stateActive

RecruitmentOpen

InsightsReady

Active research studies
Study	Status	Owner
Pricing research	Active	Neel
Concept validation	Active	Ananya
Usability benchmark	Active	Ravi

Responsive by design

One system. Different compositions.

Responsive design changes hierarchy and arrangement—not merely scale. Navigation, density, actions and data presentation adapt to the device.

Operating model

Build the system like a product

The library evolves through a repeatable cycle rather than a one-time “design system project.” Documentation grows with components, and adoption is tested before broad rollout.

01Audit

Find duplication and debt.

02Principles

Align decisions before UI.

03Tokens

Encode reusable meaning.

04Components

Build stable contracts.

05Document

Write guidance alongside design.

06Pilot

Test with one real workflow.

07Govern

Release, measure and evolve.

STRICT

Foundations & accessibility

Token naming, contrast, focus, semantic behavior and core primitives stay tightly governed.

GUIDED

Components & patterns

Stable APIs and usage guidance create consistency while allowing approved variants.

FLEXIBLE

Templates & product composition

Teams adapt hierarchy and layout to the problem while inheriting system rules underneath.

Governance

A living system needs lifecycle rules

Components enter, mature and leave the library deliberately. Ownership and contribution paths prevent the system from becoming either a bottleneck or a dumping ground.

01Draft

02Experimental

03Beta

04Stable

05Deprecated

Core layer

Foundations, tokens and broadly reusable components have central ownership and stricter stability requirements.

Design system team owns APIAccessibility review requiredBreaking changes need migration guidance

Extended layer

Product teams can contribute domain patterns while inheriting core tokens, behavior and accessibility rules.

Product team proposes use caseProve reuse across workflowsGraduate to core when adoption broadens

Design ↔ code

One contract across tools

Tokens, component states and documentation stay aligned so design intent survives implementation and future maintenance.

01 / Design tokens

Semantic source

Color, spacing, type, radius and motion decisions are named by role.

→

02 / Component API

Shared contract

Variants, states, accessibility and responsive behavior map to reusable props and patterns.

→

03 / Product usage

Documented adoption

Examples, migration notes and release status help teams use the system correctly at scale.

Pilot · rollout · measurement

Adoption is designed, not announced

Before broad rollout, test the system in a real workflow. Use what breaks to improve components and documentation, then measure adoption without manufacturing success metrics.

Pilot checklist

A small product slice validates whether the system works outside its own documentation page.

Choose a representative workflowInclude forms, navigation, feedback and responsive states.

Build with system componentsTrack where teams need overrides or missing patterns.

Review accessibility & contentTest keyboard, focus, copy expansion and recovery states.

Feed gaps back into the libraryFix the system—not only the pilot screen.

Measurement framework

These are signals to monitor after rollout—not claims about current results.

Adoption rateWhere system components replace local equivalents.

Monitor

Override rateWhere teams repeatedly break or bypass component APIs.

Monitor

Accessibility defectsRegressions found in product implementation.

Monitor

Contribution lead timeHow efficiently valid product needs enter the system.

Monitor

Migration progressHow safely deprecated patterns leave active products.

Monitor

No invented adoption percentages or efficiency claims are shown here. Real outcomes should only be added when validated evidence exists.

Live testing playground

Build, test and theme with the system

Start from a responsive template or compose your own interface from Prism components. Test layout behavior across desktop, tablet and mobile, then inspect Light and Dark mode individually or side by side.

LightDesktop 1200

Welcome back

Email address

Password

Remember me

Living system

Built to scale without losing the details that make products feel intentional.

Prism connects foundations, components, patterns, accessibility and responsive behavior into one reusable product language.

Geist typographyPrimitive → semantic → component tokensAtomic architectureLive component contractsAccessibilityMotion tokensLifecycle governanceDesign ↔ code parityAudit → pilot → adoptionPatterns & brand expression

PrismDesign System

A unified language of reusable foundations and components that brings clarity, consistency, and structure to every interface.

Start with the messy reality

What the audit looks for

Consistency without becoming generic

Structured, calm, precise—and still unmistakably Prism.

Geist only

Soft precision

Direct and useful

Purpose before personality

Rules before components

Clarity over decoration

Semantic over literal

Adaptive by default

Accessible from the start

Standardize where reuse pays back

Atomic Design Principles

Atoms

Molecules

Organisms

Templates

Pages

The system beneath the system

Smart components start with smart tokens

Primitive → semantic → component

Raw design values

Intent & meaning

Scoped decisions

Browse the system by category

Button

App Bar / Header

Text Field

Chips

Badge

Concept validation

Card

Table

Avatar

Image

Question Types

AI Prompt Input

Surface

Accessibility is specified, not assumed

Text contrast

Non-text contrast

Keyboard

Focus

Dragging movements

Target size

Errors & labels

Name, role, value

Reduced motion

Motion has a job

Motion tokens

Words are part of the component API

Action labels

Error recovery

Localization-safe

Components solve controls. Patterns solve tasks.

Search & filter

Components become product

One system. Different compositions.

Build the system like a product

Foundations & accessibility

Components & patterns

Templates & product composition

A living system needs lifecycle rules

Core layer

Extended layer

One contract across tools

Semantic source

Shared contract

Documented adoption

Adoption is designed, not announced

Pilot checklist

Measurement framework

Build, test and theme with the system

Welcome back

Built to scale without losing the details that make products feel intentional.

Continue exploring complex systems.