Design systems / 2026

Every direction.
One luminous place.

A working collection of visual systems, interface atoms, layouts, and motion language for digital products with a point of view.

Explore the collection ↓Run intelligence lab →

07Visual
directions

24Interface
studies

∞Ways to
compose

A catalog for
the curious
and exacting.

CLARITY✦CHARACTER✦MOTION✦CONTRAST✦CLARITY✦CHARACTER✦MOTION✦CONTRAST✦

01 / THE SYSTEM

Not one look.
A vocabulary of looks.

Each direction is a complete point of view: its own pace, palette, type voice, and spatial logic. Start with a feeling, then make it operational.

02 / DIRECTIONS

Four worlds to
build inside.

Every visual route is designed to flex from launch page to everyday product surface.

PRISM

Prism Future

Signal-rich, dimensional, and high voltage.

View system ↗

Ledger

02.26

Ledger Editorial

Measured type, tactility, and cultural confidence.

View system ↗

SOLAR
FORM✳

Solar Form

Warm clarity with soft geometric energy.

View system ↗

Objects
in order

Monumental Mono

Quiet force, precision, and graphic restraint.

View system ↗

NOW RUNNING / INTELLIGENCE LAB

01 / ML 02 / DL 03 / ATTENTION

Design meets
the algorithm.

Run three inspectable studies: clustering, a neural forward pass, and transformer attention. The calculations happen locally, live.

Open the AI lab ↓

03 / OUTLIER LAB

Three rules
deliberately broken.

These are complete visual systems, not mood boards. Each one takes a single graphic decision far enough to become a usable interface language.

05 / CAMPAIGNVOLUME: HIGH

Brutalist Advocacy

Outline type and a hard signal palette make urgency impossible to scroll past.

Inspect the system ↗

06 / CULTUREPLAY MODE

Type-Mask Play

Big, extroverted letters turn identity into the image, with rhythm built directly into language.

Inspect the system ↗

07 / PROTOCOLSIGNAL LIVE

Protocol Signal

Dense data, racing light, and sharp information hierarchy for systems that need to feel alive.

Inspect the motion ↗

LAB CONTROL / DISPLAY BIAS

Signal prioritizes live data and directional contrast.

04 / INTELLIGENCE LAB

Look beyond
the interface.

Three transparent computational studies expose the mechanics beneath intelligent products. Every result is calculated live in your browser, not played back from a video.

ML / UNSUPERVISED

K-means convergence

READY

Iteration 00Inertia --Clusters 03

Assign each vector to its nearest centroid, then recompute the means. Watch inertia fall toward convergence.

DL / FORWARD PASS

Activation microscope

LIVE

Input signal 0.62

Activation ReLUConfidence --Parameters 17

A genuine dense forward pass with fixed, visible topology. Move the signal to inspect how weighted sums propagate.

AI / TRANSFORMER

Attention head 07

SOFTMAX

Select a query token to inspect where one attention head routes its focus.

Head 07/12Entropy --Top link --

Scaled dot-product attention: similarity scores are normalized with softmax into a distribution that sums to one.

03 / INTERFACE ATOMS

The small things
carry the feeling.

A pragmatic library of decisions for interfaces that look intentional at every scale.

TYPE / DISPLAY

Make
space matter.

Editorial Serif / 54Geometric Sans / 14

COLOR / SIGNALS

Plasma
#A771FF

Pulse
#59F2D0

Ink
#090B14

Cloud
#F3F1FF

CONTROLS / STATES

System notifications

DATA / SIGNAL

84.2%

Conversion signal ↑ 18.4%

L
U
M
E
N

Interfaces should move at the speed of understanding.

Watch it work ↓

04 / MOTION LANGUAGE

Movement with
a reason.

Motion reveals structure, offers feedback, and gives a system a pulse without asking for attention.

Orbit

Slow, ambient orientation.

REVEAL

Line reveal

Editorial entrances on scroll.

LIVE

Signal pulse

Status without noise.

05 / REGISTRY MAP

Every available
building block.

The full connected pattern registry, audited against this static exhibition. Green marks studies already adapted here; the rest are available as future directions.

31patterns catalogued06adapted in this page07categories covered

BACKGROUND / 02

1 adapted

Atmosphere

aurora-background
dot-grid-background

BLOCKS / 03

available

Structure

hero-section-block
dashboard-shell-block
empty-state-block

CARDS / 06

2 adapted

Surfaces

spotlight-card
tilt-card
gradient-border-card
bento-grid
border-trail
hover-card

ENTRANCE / 03

1 adapted

First impression

fade-up-on-view
staggered-children
blur-in-hero

FEEDBACK / 02

available

System states

skeleton-shimmer
kbd-badge

INTERACTIVE / 11

available

Response

infinite-marquee
magnetic-button
morphing-dialog
transition-panel
hover-slide-selection
swipe-to-delete
drag-to-reorder
segmented-control
command-menu
otp-input
smooth-accordion

TEXT / 04

2 adapted

Type motion

text-shimmer
typewriter
animated-counter
gradient-text

06 / DESIGN PROMPTS

Direct the visual
system.

Twelve copy-ready creative directions: pair one with a platform brief below, or use it to establish a distinct interface point of view.

01 / PRISM FUTURE

High-voltage product launch

Dimensional type, refracted color, and precise energetic hierarchy.

Design a responsive product launch site in a Prism Future direction: midnight navy base, luminous cyan and electric violet refractions, oversized geometric sans typography, translucent data planes, and controlled 3D depth made with CSS. Create a sticky navigation, focused hero, benefit modules, product proof, pricing, and closing CTA. Keep the information hierarchy sharp and the interactions accessible; use purposeful hover light, subtle reveal motion, loading states, and prefers-reduced-motion fallbacks. Avoid generic glassmorphism and make every surface feel engineered.

02 / LEDGER EDITORIAL

Measured editorial journal

Quiet columns, cultural authority, and material typography.

Design a responsive editorial journal in a Ledger Editorial direction. Use a warm paper ground, ink-black rules, a restrained serif for headlines, compact monospaced metadata, asymmetric columns, and tactile dividers. Build a story-led home page with featured issue, article rail, contributor index, newsletter signup, and archive controls. Prioritize readable long-form typography, keyboard-visible focus states, clear empty and loading states, and a calm scroll reveal that respects reduced-motion preferences.

03 / SOLAR FORM

Warm clarity commerce

Soft geometry and optimistic utility for a considered storefront.

Design a responsive commerce experience in a Solar Form direction: sun-washed cream, burnt orange, mineral blue, rounded geometric forms, and generous white space. Create a clear hero, category discovery, product cards, ingredient or material proof, cart feedback, and a reassuring checkout path. Use fluid typography, 44px touch targets, accessible color contrast, concise inline validation, and restrained motion such as warm fades and shape drift with a reduced-motion fallback.

04 / MONUMENTAL MONO

Precision operations console

Black, white, and one signal color with decisive information density.

Design a responsive B2B operations console in a Monumental Mono direction. Use a near-monochrome palette, one electric signal color, rigorous grid alignment, large typographic totals, thin rules, and intentionally quiet panels. Include command-oriented navigation, a live work queue, filters, detail drawer, empty-state guidance, error callouts, and keyboard shortcuts. Make desktop density useful without sacrificing mobile readability; interaction feedback must be immediate, readable, and reduced-motion safe.

05 / BRUTALIST ADVOCACY

Movement campaign

Urgent type, visible participation, and a hard-edged call to action.

Design a responsive public-interest campaign in a Brutalist Advocacy direction. Use deep purple and indigo fields, white outline display type, coral urgency accents, oversized left-aligned messaging, raw statistics, and a strong participation CTA. Build sections for the issue, personal stories, action steps, event dates, and transparent impact reporting. Preserve excellent contrast, obvious focus states, readable forms, and reduced-motion alternatives for every animated graphic.

06 / TYPE-MASK PLAY

Community festival identity

Massive letterforms that turn the identity itself into the image.

Design a responsive community festival site in a Type-Mask Play direction. Use giant lowercase display lettering, saturated primary color accents, playful cropping, kinetic but legible type, and image-like texture generated with CSS rather than external stock art. Include schedule, artist cards, venue map, ticket CTA, accessibility information, and a useful empty schedule state. The visual energy should not compromise hierarchy, touch targets, focus rings, or reduced-motion support.

07 / PROTOCOL SIGNAL

Live infrastructure monitor

Dense telemetry, scanning light, and high-confidence system status.

Design a responsive infrastructure monitoring interface in a Protocol Signal direction. Use a deep ink grid, cyan telemetry lines, violet status surfaces, scanning beams, and concise monospaced labels. Build a command header, incident timeline, service map, metric panels, alert triage, and clear degraded-state messaging. Emphasize scannability, color-independent status labels, keyboard operation, and motion that pauses or disappears for reduced-motion users.

08 / ARTISAN MINIMAL

Craft product catalogue

Warm restraint, archival detail, and premium tactile confidence.

Design a responsive craft product catalogue in an Artisan Minimal direction. Use a warm cream base, near-black type, subtle paper grain, faded line illustrations, elegant high-contrast serif headlines, and compact uppercase micro-labels. Compose a product-first home page with provenance, collection grid, maker notes, care guidance, and a gentle purchase path. Use soft shadows and pill controls sparingly; ensure product selection, validation, empty cart, and loading states are all practical and accessible.

09 / HERITAGE EDITORIAL

Architecture practice story

Matte paper, asymmetric structure, and deliberate visual tension.

Design a responsive architecture practice site in a Heritage Editorial direction. Use a matte cream canvas, olive stenciled labels, a literary serif, asymmetric 4:6 grids, and image-free abstract material studies made in CSS. Feature selected work, practice values, studio history, project detail navigation, and contact details. Let composition feel editorial but keep navigation predictable, body copy readable, and every interaction accessible on keyboard and mobile.

10 / DIAGONAL CONVERSION

Direct-to-consumer health launch

Clear benefit framing, warm energy, and conversion without clutter.

Design a responsive direct-to-consumer health product launch in a Diagonal Conversion Split direction. Use a crisp white product side and a warm red-to-coral diagonal information side with lightweight white typography. Create a benefits-led hero, price and purchase CTA, clinical proof, comparison table, FAQ, and support contact. Keep claims responsibly phrased, forms validated inline, cart actions obvious, and decorative geometry optional under reduced-motion preferences.

11 / MOBILE GRADIENT

Field analytics dashboard

Mobile-first intelligence with compact controls and layered signal.

Design a mobile-first field analytics dashboard in a Mobile Gradient Dashboard direction. Start at a 390px viewport with a compact header, rich blue-to-teal dashboard cards, compressed actions, clear metrics, a 16:9 insight panel, and a bottom-safe action area. Scale gracefully to desktop without losing the mobile information order. Include loading skeletons, actionable empty panels, inline errors, data freshness cues, and accessible contrast across every gradient.

12 / ATHLETIC CONTRAST

Performance collection launch

Editorial speed, spare navigation, and visual confidence under pressure.

Design a responsive performance apparel collection in an Athletic High-Contrast direction. Use a black base, sharp white type, a single red accent, micro-typographic navigation, asymmetric editorial panels, and strong vertical rhythm. Build a collection feature, product performance proof, size guidance, comparison, cart feedback, and email support CTA. Keep motion energetic but optional, preserve AA contrast, and make mobile product selection and error recovery exceptionally clear.

07 / BUSINESS PROMPTS

Brief the whole
business system.

Twelve operational starting points where product design, workflows, integrations, permissions, and data models have to work together.

01 / HEALTHCARE

CareFlow clinic platform

Patient scheduling, intake, eligibility, care plans, and clinician workload.

Build CareFlow, a responsive clinic operations platform for multi-location outpatient teams. Create a secure role-based workspace for front desk, clinicians, and operations leads with appointment scheduling, digital intake, insurance eligibility status, care-plan tasks, and no-show reporting. Use Next.js with TypeScript, PostgreSQL, Prisma migrations, and a Node API layer. Include audit logs, encrypted server-side secrets, HIPAA-ready access boundaries, calendar integration adapters, background job retries, and an analytics dashboard. Design accessible forms, loading skeletons, actionable empty states, inline errors, and mobile check-in flows. Define the schema, API contracts, permissions matrix, deployment environment variables, and tests.

02 / LOGISTICS

RouteSignal dispatch

Dispatch, proof of delivery, exceptions, and capacity planning for fleets.

Build RouteSignal, an operations platform for regional delivery fleets. Give dispatchers a live route board, driver mobile workflow, proof-of-delivery capture, exception queue, vehicle capacity view, and customer ETA portal. Use React and TypeScript, Node.js services, PostgreSQL with PostGIS, Redis-backed job queues, and object storage for delivery media. Implement organization-scoped roles, webhook ingestion with idempotency keys, event history, notification preferences, SLA alerts, and reporting exports. Specify tables, API endpoints, workers, observability, deployment, and full loading, empty, and error states.

03 / HOSPITALITY

Stayline property desk

Reservations, housekeeping, maintenance, and guest recovery across properties.

Build Stayline, a multi-property hospitality operations platform for boutique hotels. Include a reservations calendar, room-turn board, housekeeping assignments, maintenance work orders, guest preference profiles, and manager reporting. Use a server-rendered Node.js application with TypeScript, PostgreSQL, and a background worker for channel-manager imports and notifications. Model organizations, properties, rooms, stays, tasks, incidents, and staff roles. Enforce authorization, append-only operational events, conflict detection, safe retries, useful empty states, validation, and tablet-friendly task completion.

04 / CONSTRUCTION

SiteLedger project control

Field logs, inspections, change events, and subcontractor accountability.

Build SiteLedger, a construction operations platform connecting field supervisors, project managers, and subcontractors. Provide dashboards, daily logs, inspection checklists, photo evidence, RFIs, change events, schedule risks, and budget commitments. Use Next.js, TypeScript, PostgreSQL, object storage, background document processing, and a REST API with OpenAPI. Add organization and project permissions, immutable approvals, offline-capable mobile drafts with conflict resolution, document versioning, compliance reports, schema, integration boundaries, test plan, and cloud topology.

05 / FINTECH

ClearSettle controls

Reconciliation, exceptions, approvals, and financial controls for payments teams.

Build ClearSettle, a financial operations platform for a marketplace payments team. Create reconciliation, payout exception, chargeback evidence, approval workflow, ledger drill-down, and month-end close workspaces. Use TypeScript services, PostgreSQL with a double-entry ledger, a React dashboard, and workers for bank imports. Make imports idempotent, retain provenance, use immutable journal entries, enforce separation of duties, and maintain audit trails. Add SSO-ready auth, webhook verification, alerts, exports, ledger invariants, API contracts, security controls, tests, and monitoring.

06 / MANUFACTURING

LineSight production

Work orders, quality holds, traceability, and shift handoffs for plants.

Build LineSight, a manufacturing execution workspace for discrete production teams. Include production schedules, work orders, station checklists, quality holds, serial and lot traceability, downtime reasons, maintenance requests, and shift handoff notes. Use TypeScript, PostgreSQL, a Node API, and workers for ERP and machine-event ingestion. Model facilities, lines, orders, units, inspections, defects, and events. Enforce role boundaries, immutable traceability records, idempotent imports, real-time status updates, offline-tolerant floor workflows, testable APIs, monitoring, and clear error recovery.

07 / ENERGY

GridPulse field operations

Asset inspection, outage response, compliance evidence, and crew coordination.

Build GridPulse, an energy field-operations platform for distributed assets. Provide an asset map, inspection schedules, outage incidents, crew dispatch, work permits, safety checklists, meter evidence, and regulatory reporting. Use React, TypeScript, Node.js, PostgreSQL with PostGIS, object storage, and resilient background jobs for telemetry and weather adapters. Build organization-scoped access, critical-action confirmation, append-only safety events, offline mobile capture, notification rules, observability, migrations, API documentation, and a deployment plan.

08 / EDUCATION

Pathway learner success

Advising, interventions, program progress, and student support coordination.

Build Pathway, a learner-success platform for higher education advising teams. Include student profiles, degree progress, appointment scheduling, intervention plans, caseloads, risk indicators, referral workflows, and outcomes reporting. Use a server-rendered TypeScript app, PostgreSQL, a secure API layer, and queued imports from a student information system. Model institutions, programs, students, advisors, notes, appointments, and interventions. Protect sensitive records with least-privilege access, audit logs, retention controls, validation, actionable empty states, accessibility, tests, and integration retry rules.

09 / LEGAL

MatterSignal practice ops

Matters, deadlines, intake, conflicts, and approval trails for legal teams.

Build MatterSignal, a legal operations platform for a mid-size practice. Create matter intake, conflict checks, client and entity records, deadline calendar, task routing, document request tracking, outside-counsel spend review, and reporting. Use TypeScript, PostgreSQL, object storage with versioned metadata, and background processing for secure imports. Enforce matter-level authorization, ethical-wall boundaries, audit logs, retention rules, review queues, export controls, robust search validation, observable jobs, migrations, tests, and deployment documentation.

10 / PEOPLE OPS

TeamOrbit workforce hub

Onboarding, time-off, policies, equipment, and manager workflows.

Build TeamOrbit, a people-operations platform for a distributed company. Include employee directory, onboarding checklists, time-off approvals, equipment assignments, policy acknowledgements, manager tasks, and people analytics. Use Next.js, TypeScript, PostgreSQL, and a Node service layer with SCIM and HRIS integration adapters. Model organizations, teams, employees, roles, requests, assets, policies, and audit events. Keep authority server-assigned, protect employment data, make imports idempotent, design inclusive accessible flows, and provide validation, empty states, tests, observability, and deployment guidance.

11 / NONPROFIT

ImpactRelay program hub

Casework, grants, volunteers, outcomes, and accountable program delivery.

Build ImpactRelay, a nonprofit program-operations platform for community services. Provide participant intake, case plans, service referrals, volunteer scheduling, grant milestones, outcome measurement, consent tracking, and funder reports. Use TypeScript, PostgreSQL, a secure server API, and background workers for reporting exports. Model programs, participants, cases, services, volunteers, grants, outcomes, and permissions. Apply privacy-aware access controls, consent history, auditability, data-quality validation, accessible caseworker workflows, reporting queues, tests, monitoring, and integration documentation.

12 / WHOLESALE

Stockroom partner portal

Inventory allocation, quotes, orders, returns, and buyer self-service.

Build Stockroom, a B2B wholesale operations platform for brands and retail partners. Include account-specific catalogues, inventory allocation, quote requests, order approvals, shipment tracking, returns, price lists, and buyer support. Use React and TypeScript, Node.js services, PostgreSQL, Redis queues, and object storage for order documents. Model organizations, buyer roles, SKUs, inventory reservations, quotes, orders, shipments, and return cases. Enforce tenant isolation, idempotent marketplace imports, inventory consistency rules, accessible account workflows, error recovery, observability, tests, and production deployment details.

06 / COMPOSITIONS

Built to change
without losing itself.

One voice, three densities. A system can be recognisable without being repetitive.

Weekly signal •••

42,819

+12.8% compared to last week

New perspective

Shape the
next thing.

Read issue 06 →

Objects / 001

Violet
signal

06 / NEXT MOVEMENT

Find your
frequency.

Bring an early idea, a complex product, or a brand that needs its own gravity. We will make the system meet the moment.

Contact the studio ↗

Every direction.One luminous place.

Not one look.A vocabulary of looks.

Four worlds tobuild inside.

Prism Future

Ledger Editorial

Solar Form

Monumental Mono

Design meetsthe algorithm.

Three rulesdeliberately broken.

Brutalist Advocacy

Type-Mask Play

Protocol Signal

Look beyondthe interface.

The small thingscarry the feeling.

Movement witha reason.

Orbit

Line reveal

Signal pulse

Every availablebuilding block.

Atmosphere

Structure

Surfaces

First impression

System states

Response

Type motion

Direct the visualsystem.

High-voltage product launch

Measured editorial journal

Warm clarity commerce

Precision operations console

Movement campaign

Community festival identity

Live infrastructure monitor

Craft product catalogue

Architecture practice story

Direct-to-consumer health launch

Field analytics dashboard

Performance collection launch

Brief the wholebusiness system.

CareFlow clinic platform

RouteSignal dispatch

Stayline property desk

SiteLedger project control

ClearSettle controls

LineSight production

GridPulse field operations

Pathway learner success

MatterSignal practice ops

TeamOrbit workforce hub

ImpactRelay program hub

Stockroom partner portal

Built to changewithout losing itself.

Shape thenext thing.

Violetsignal

Find yourfrequency.

Every direction.
One luminous place.

Not one look.
A vocabulary of looks.

Four worlds to
build inside.

Design meets
the algorithm.

Three rules
deliberately broken.

Look beyond
the interface.

The small things
carry the feeling.

Movement with
a reason.

Every available
building block.

Direct the visual
system.

Brief the whole
business system.

Built to change
without losing itself.

Shape the
next thing.

Violet
signal

Find your
frequency.