Standards

Design System

A living pattern library built on Atomic Design principles. Framework-agnostic tokens and patterns that ship as a Figma kit, a component codebase, or both — a source document teams use while collaborating in design sprints and development cycles.

FigmaReactVueSvelteWeb Components

Global Tokens

Color Palette
Cyan
#00d4ff
Purple
#a855f7
Background
#06060e
Surface
rgba(100,200,255,0.04)
Text
#eaf4ff
Muted
#7ea0ba
Dim
#7a9db4
Border
rgba(100,200,255,0.12)
Typography Scale
GilroyHeadings · 800
Gilda DisplaySection titles · 400
Helvetica NeueBody / UI · 400,600
CharterLong-form text · 400
monospaceCode · tokens
SPACING UNIT: 4px
Gradients & Elevation
Primary Gradient
Subtle Tint
Elevation 1
Elevation 2

Component-Based Development

Every design token and pattern in this system maps directly to framework components. The same visual language renders identically across React, Vue, Svelte, and native Web Components — design once, implement anywhere.

ButtonPrimary interactive element with variant, size, loading, and icon props. All variants inherit from shared design tokens.
Button.tsxTypeScript
1import { forwardRef } from 'react';
2import styles from './Button.module.css';
3
4type Variant = 'primary' | 'secondary' | 'ghost' | 'gradient';
5type Size = 'sm' | 'md' | 'lg';
6
7interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8 variant?: Variant;
CardContent container with stagger animation, elevation levels, and optional interactive role with keyboard support.
Card.tsxTypeScript
1import { stg } from '@/lib/motion';
2import styles from './Card.module.css';
3
4interface CardProps {
5 index?: number;
6 elevated?: boolean;
7 interactive?: boolean;
8 children: React.ReactNode;
⚛
Token-DrivenAll styles derive from CSS custom properties. Swap the token layer to re-theme the entire library.
♿
Accessible by DefaultARIA attributes, focus management, and keyboard handlers are built into every component, not bolted on.
📐
Composition over ConfigurationSlot-based APIs and render props for maximum flexibility. Components compose, not configure.
🧪
Test CoverageEach component ships with unit tests, visual regression snapshots, and accessibility audits via axe-core.

Atoms

Buttons
Badges & Labels
ActiveIn ProgressSuccessErrorDefault
Icons · 16/20/24px
✉
☎
in
Dr
🔍
↗
Avatars
R
R
R
Toggles & Checkboxes

Molecules

Input Fields
Placeholder text...
Input value
Invalid input
This field is required
Disabled field
Notification Cards
Notifications
›
Title of unread notification
This is where the notification text is located
›
Title of unread notification
This is where the notification text is located
›
Title of read notification
This is where the notification text is located
▲
Title of unread notification
This is an error or change event
More
Tabs
OverviewComponentsTokensChangelog
Breadcrumbs
Home/Design System/Atoms
Tooltips & Popovers
Tooltip text
Popover Title
Contextual content

Organisms

App Header · Navigation Bar
Romario Coffie Portfolio
HomeMockups ▾PlanningDesign System
Connect
Sidebar Navigation
Hero
Work
About
Photoshoots
Planning
Design System
Backlog
Footer Bar
© Romario Coffie 2025
✉inDr
Project Card
ui design + front end
Project Name

Brief project description text that summarizes the key deliverable.

Stat Cards
Users
15M+
+12%
Sessions
34%
+8%
Bounce Rate
22%
-5%
Components
60+
+15

Patterns & States

Loading States
Empty State
No data available
+ Add item
Progress Bar
Upload75%
Processing45%
Complete100%

Grid System

A 12-column fluid grid (rgrid) built on CSS Grid with responsive span classes. Gutters scale with viewport via clamp().

1
2
3
4
5
6
7
8
9
10
11
12
s12 — Full width
s6
s6
s4
s4
s4
s3
s3
s3
s3
Breakpoints
sm≤ 640px1 col stack
md641 – 1024px6-col max
lg1025 – 1440pxFull 12-col
xl1441px +Max-width 1440
Spacing Scale
--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
48px
--space-2xl
64px

Responsiveness

Fluid typography, container queries, and viewport-aware layouts ensure every component adapts gracefully across devices.

Desktop
3-col layout · 100% width
Tablet
2-col layout · 65% width
Mobile
1-col layout · 35% width
Fluid Typography Scale
Displayclamp(32px, 5vw, 64px)
Headingclamp(24px, 3.5vw, 44px)
Subheadclamp(18px, 2.5vw, 28px)
Bodyclamp(14px, 1.5vw, 18px)
Captionclamp(11px, 1vw, 13px)

Accessibility (a11y)

WCAG 2.1 AA compliance across all interactive components. Semantic HTML, ARIA roles, keyboard navigation, focus management, and contrast ratios verified.

Contrast Ratios
Text on Dark15.7:1AAA
Cyan on Dark9.2:1AAA
Purple on Dark4.8:1AA
Dim on Dark4.5:1AA
Keyboard & Focus
TabMove focus forward through interactive elements
Shift+TabMove focus backward
Enter / SpaceActivate focused button or link
EscapeClose modals, dropdowns, overlays
Arrow KeysNavigate within composite widgets
Focus Visible
2px cyan ring on all interactive elements
Semantic HTML
Proper headings, landmarks, and ARIA labels
Screen Reader
Alt text, aria-live regions, role attributes
Motion Reduced
prefers-reduced-motion disables animations
Compliance Standards
WCAG 2.1 AA
PerceivableAll non-text content has text alternatives. Color is never the sole means of conveying information.
WCAG 2.1 AA
OperableAll functionality is keyboard-accessible. No timing constraints on user interactions.
WCAG 2.1 AA
UnderstandableConsistent navigation patterns. Error identification with suggestions for correction.
WCAG 2.1 AA
RobustSemantic HTML with valid ARIA. Tested across assistive technologies: VoiceOver, NVDA, JAWS.
ARIA 1.2
Roles & StatesLive regions for async updates. Modals trap focus. Expandables announce state changes.
Section 508
Federal ComplianceAll interactive elements meet federal accessibility requirements for public-facing applications.

Adaptive Components

Components that adapt their structure, density, and behavior based on platform context. iOS follows Human Interface Guidelines, Android follows Material 3, and web uses the design system's native tokens.

iOS (HIG)
SF Symbols icon set
44pt minimum touch targets
Navigation bar with large titles
Sheet presentations (modal)
Haptic feedback patterns
radius: 14px
Material 3
Material Design icons
48dp touch targets
Top App Bar with scroll behavior
Bottom Sheet & Snackbar
Dynamic Color from wallpaper
radius: 28px
Web (DS Tokens)
Lucide icon library
Keyboard + pointer targets
Sticky nav with scroll spy
Overlay modals + toasts
CSS custom property theming
radius: 12px
Density Modes
Compact
Button
Data-dense tables, toolbars
Default
Button
Standard interactive contexts
Comfortable
Button
Touch-first, mobile interfaces

Animations & Motion Design

Interactive prototypes and motion studies exploring gesture-driven interfaces, micro-interactions, page transition choreography, and scroll-based animation sequences.

Gesture Navigation
Swipe-driven card stack with physics spring dynamics and velocity tracking
Origami Studio
Parallax Depth Layers
Multi-layer scroll with variable velocity, depth-of-field blur, and z-axis transforms
Origami Studio
Card Open Transition
Shared element morph from grid thumbnail to full detail view with spring easing
After Effects → Lottie
Pull to Refresh
Custom elastic indicator with multi-state feedback: idle, pulling, loading, success
Origami Studio
Tab Bar Morph
Icon-to-label transition with spring easing and background pill animation
Principle
Onboarding Flow
Sequenced page reveals with parallax imagery and staggered content entry
Origami Studio
Origami StudioAfter EffectsPrincipleLottieFramer Motion
Live Demos
Pulse Glow
Radial glow pulse with opacity and scale modulation. Used for attention-drawing indicators.
ease-in-out 2s infinite
Stagger Waterfall
Sequential element entry with incremental delay. Core pattern for page section loading.
cubic-bezier(0.16,1,0.3,1) 0.55s
Spring Bounce
Overshoot easing that simulates physical spring tension. Used in interactive feedback.
cubic-bezier(0.34,1.56,0.64,1) 0.6s
Fade + Slide
Opacity and translateY composite. The default waterfall entry for all content blocks.
cubic-bezier(0.16,1,0.3,1) 0.5s
Shape Morph
Border-radius and scale transform creating organic shape transitions between states.
ease-in-out 3s infinite
Skeleton Shimmer
Gradient sweep loading placeholder. Communicates progress for async data fetching.
linear 1.5s infinite