Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Article using the card styles for visual consistency.
Design system
A scalable interface system built for performance, accessibility, and real-world product workflows.
System overview
Full tokens & typography → Style guideHow the interface behaves: tokens constrain color, type, surfaces, and spacing so composed UI stays consistent.Full tokens & typography → Style guide
In practice
The same tokens compose into predictable UI: surface, label, field, and action working together.
Color system
Primary (brand ramp)
Secondary (violet ramp)
Semantic
Typography
Heading 1Heading 2Heading 3
Body text uses the default size and line height for long-form reading and UI copy.
Small text for captions, hints, and secondary metadata.
const primary = 'var(--brand-700)';Surfaces & elevation
Surface steps stack from page (--surface-0) through raised cards; elevation uses shared shadow tokens. Toggle light/dark in the header to verify contrast.
--shadow-sm
--shadow-md
--shadow-lg
Spacing & radius
System in practice
Product workflow example
A real UI flow demonstrating system consistency across interaction patterns.
Stepper & Progress
A multi-step workflow component with next/previous navigation, plus visual linear and circular progress indicators that update as you advance through each step.
Steppers
- 1UX research & discovery
- 2UX flows & UI design
- 3Content & data gathering
- 4Development & integration
- 5Testing & QA
- 6Deployment & launch
- 7Maintenance & iteration
- UX research & discovery
- UX flows & UI design
- Content & data gathering
- Development & integration
- Testing & QA
- Deployment & launch
- Maintenance & iteration
Linear: 14%
14%
CircularLayout & composition
Reusable layout primitives for responsive composition—grids, asides, and card patterns. Visual tokens live in System overview.
Grid
Three patterns cover most product layouts: a balanced four-column grid, a content-friendly three-column grid, and a main region paired with an aside.
On viewports below 768px, the grid examples are hidden so cards stay readable; the main + aside pattern below still demonstrates responsive behavior.
Balanced layout (4 columns)
Card default styling.
Card surface 2 color.
Card surface 3 color.
Card surface 4 color.
Content-friendly layout (3 columns)
Card default styling.
Card surface 2 color.
Card surface 3 color.
Grid with Aside
Grid with Aside Article
Heading ButtonArticle using the card styles for visual consistency.
Actions
Interactive elements used to trigger user intent.
Loaders
The Loader component is a small, customizable spinner used for showing loading states. It accepts width, heightand border props (strings or numbers) and sets matching CSS variables (--loader-width, --loader-height,--loader-border) so the pseudo-element spinner can be styled consistently. Place the loader inside a centered container or use a positioned parent (e.g. position: relative) when showing an overlay.
CTA Band
A prominent call-to-action band for demos, downloads, or contact.
Ready to align your study team?
Get a demo tailored to your protocol and timelines.
Core forms & validation
The patterns you reach for first: controls, validation, search, and a composed contact slice—ordered for product relevance.
Forms & Inputs
Flexible form and input system supporting text, selects, checkboxes, radios, sliders, file uploads, and validation. All controls are accessible, customizable, and support helpful messaging and state via props.
Example: inline review
Label, helper text, validation, and actions as they appear in a real panel.
Control gallery
Inline Form Validation
Client-side rules with inline messages, an error summary, and accessible states.
Inline Async Validation
Debounced “email already taken?” check with loading state and accessible messages.
Tag chips with typeahead
The suggestion list filters as you type (for example, typing access narrows the list toward Accessibility Standards). Pick an item with the mouse, or Arrow keys then Enter or comma. If your text matches nothing in the list, Enter or comma adds a custom tag. When the field is empty, Backspace removes the last chip. With an empty field, focusing shows either recent picks (when configured) or the full suggestion list.
Pattern: contact & validation
A composed slice—input, primary action, inline outcome, and success feedback—shows how tokens and components work together beyond isolated controls.
Forms & validation
Advanced inputs
Specialized pickers, uploads, and composite fields—useful for dense tools; keep them behind the core patterns when telling the system story.
Combobox / Autocomplete
Single-select and multi-select with chips. Arrow keys + Enter, click to choose.
Single-select
- Projects
- Teams
- Reports
- Documents
- Billing
- Settings
Multi-select
- Front-end development
- Accessibility
- Design systems
- TypeScript
- UX research
- Performance
File Uploader
Drag files here or browse. Shows basic validation and mock progress.
File Uploader (Images)
Drag & drop or browse. Shows live thumbnails with remove & size checks.
Drop images here
or click to — up to 10 files, max 10 MB each
Meter / Score
Linear score with thresholds + native <meter> styling. Drag to preview values.
72 • Fair
0–49: Poor • 50–74: Fair • 75–89: Good • 90–100: Excellent
Date-Range Picker
Select start and end dates using the calendar or the quick presets. Click a day to set the start date, then click another day to set the end date (clicking an earlier day will swap start and end). Use the presets for common ranges and the Clear button to reset.
Use the arrow keys to move between days, Page Up/Page Down to move between months, Home/End to jump to the start/end of the week, and Enter or Space to select the focused date.
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Date Picker
Pick a single date with “Today” and “Clear”.
May 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5
6
Date Input (Popover)
Calendar opens on input/focus; ESC/outside to dismiss.
Data & feedback
Tables, filters, and feedback surfaces—empty, error, and success—so dense UIs stay understandable.
Toasts
Toasts are used to display brief, auto-dismissing notifications.
Toasts
Inline Alerts
Success: Your settings have been saved.
Info: New template guidance is available.
Warning: A site has overdue tasks.
Error: Couldn’t sync with the EDC. Try again.
Tooltips & Popovers
Short hints (hover/focus) and richer, non-modal popovers (click/ESC/outside).
Tooltips
Link with tooltipHover/focus chip
Popovers
Popovers Examples
Modals & Overlays
Centered modal and slide-over overlay. Keyboard: ESC to close. Focus is trapped inside.
Empty, error & success
Reserve these surfaces for recoverable context—pair a short explanation with a clear next step, including positive confirmation after success.
Empty list
No projects match these filters.
Clear filters or create a project to get started.
Error
Could not load results.
Check your connection and try again.
Success
Changes saved.
Your team can see the update.
Pattern: data dashboard slice
Filters, density, and tabular data are composed below—this block previews how those pieces align in one toolbar.
See Data table and Filters for full implementations and accessibility behavior.
Cards
Modular card layouts with header support, variant styling, and interactive hover/focus states for clear content grouping and visual hierarchy.
Quarterly roadmap
Prioritized themes for the next cycle, with owners and target dates.
Updated 2h ago · Strategy · 4 owners
With Header
This card has a header with an icon and text.
This card has no header. Just content.
Card 0 alternate styling.
Card 1 alternate styling.
Card 2 alternate styling.
Card inverse styling.
Data Table
Sortable columns, sticky header, and client-side pagination.
Sort by:
| ID | Phase | Version | Status | Task |
|---|---|---|---|---|
| 1000 | UI Design | I | Sprint Planning | 12 |
| 1001 | UI Development | II | In Review | 19 |
| 1002 | Accessibility Fixes | III | Deployed | 26 |
| 1003 | Bugs & Issues | I | Sprint Planning | 33 |
| 1004 | UI Design | II | In Review | 40 |
| 1005 | UI Development | III | Deployed | 47 |
| 1006 | Accessibility Fixes | I | Sprint Planning | 54 |
| 1007 | Bugs & Issues | II | In Review | 61 |
Page 1 / 4
Metric Cards
Small metric cards for dashboards and summaries.
...…
—
...…
—
...…
—
Timeline Sample
A vertical timeline using the .timeline and .step classes for sequential layouts.
1
Step 1
Start your project and set up the basics.
2
Step 2
Develop features and iterate quickly.
3
Step 3
Test, deploy, and monitor your app.
Filters
Toggle chips with counts, “Clear all,” and live results.
0 selected
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Logic Pills (Selected Filters)
Removable filter chips with AND/OR logic and quick “clear all”.
No filters selected
18 results
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
Result 14
Result 15
Result 16
Result 17
Result 18
Add:
Media & interaction
Interactive and visual content patterns.
Logo Rotator Demo
A demo of the LogoRotator component, rotating through 20 Cards with icons.
Built with
Technologies used on this site (not client logos).
Horizontal Carousel
Cards as image placeholders. Use the arrows or drag/scroll. Snaps per card.
Sample card 1
Placeholder imagery / copy.
Sample card 2
Placeholder imagery / copy.
Sample card 3
Placeholder imagery / copy.
Sample card 4
Placeholder imagery / copy.
Sample card 5
Placeholder imagery / copy.
Sample card 6
Placeholder imagery / copy.
Sample card 7
Placeholder imagery / copy.
Sample card 8
Placeholder imagery / copy.
Image Slider
Interactive image slider with:
- Large main image area with smooth sliding transitions
- Previous/Next arrow buttons
- Clickable thumbnail navigation
- Active image indicator
- Keyboard navigation (left/right arrows)
- Touch/drag/swipe support
- Responsive layout
- Customizable heading tag and class for info panel
Image Rotator
ImageRotator cycles through an array of images on a configurable interval. Key props:
images— array of {src, alt}interval— rotation period in millisecondstransition— animation style (fade, slide, zoom, flip, kenburns, dissolve, crossfade, none)transitionDuration— animation duration in ms (controls CSS and timing)width/height— sizing; accepts numbers or CSS strings
The component renders layered slides for smooth enter/exit animations and honours prefers-reduced-motion. Remote images are left unoptimized in dev to avoid Next.js optimizer errors.
System principles
Guidelines that define how the system is applied across interfaces.
One primary action per region
Primary actions are used sparingly to maintain clarity and focus.
Semantic colors are reserved for feedback
Warning and error states communicate system status, not hierarchy.
Core patterns precede advanced inputs
Common interactions are prioritized before introducing complexity.
Consistency is driven by tokens
Design tokens ensure alignment across components, themes, and states.
Accessibility is a baseline, not an afterthought
All components are designed to meet contrast, focus, and usability standards.
Built for real products
This system is designed to scale across production environments, balancing performance, accessibility, and usability.
Tabs & accordion
Disclosure patterns placed here so the workflow example stays the primary narrative for multi-step content.
Tabs
Accessible tab interface with ARIA roles, keyboard navigation (←/→, Home/End), focus management, and horizontal scrolling for overflow. Only one tab panel is visible at a time, and all controls are screen reader friendly.
Overview
Pill style tabs.
Overview
Accordion
Accessible accordion component with ARIA roles, keyboard navigation (↑/↓, Home/End), and smooth open/close animations. Only one panel is open at a time, and all controls are screen reader friendly.
Use the sign-in screen, choose “Forgot password,” and follow the email link. Links expire after a short window for security.