Loading
Loading
Modern Softworks visual language and design tokens
Font family: Space Grotesk. All sizes are responsive and scale with viewport.
Base unit: 8px. Fixed scale for component-level spacing.
Layered ring shadows where y-offset equals blur, creating visible bands.
Warm palette for feedback states. Success uses brand emerald, info uses distinctive purple.
Cinematic and intentional. Animations feel choreographed, not incidental.
Lift + glow hover effect for primary, subtle lift for secondary. All buttons include marching ants focus ring for keyboard navigation.
Use for main actions: CTAs, form submissions, primary navigation.
Use for secondary actions: Cancel, Back, alternative options.
Diagonal stripe pattern overlay at 50% opacity signals unavailable state. Hover to see tooltip explaining why the button is disabled.
Hover to see lift + glow effect. Press Tab to see marching ants focus ring. Click and hold to see active (pressed) state.
For users with vestibular disorders or motion sensitivity. Buttons respond instantly without lift animations or marching ants.
Hover removes lift effect. Focus ring becomes solid instead of animated. Press-down scale effect retained for tactile feedback.
Animated underline that scales in from the left on hover. Uses ease-out-quart timing for a smooth, cinematic feel. Color transitions to accent-primary-hover on interaction.
Hover over links to see the underline scale in from the left. The animation uses ease-out-quart for a smooth, cinematic feel.
Learn more about our accessibility services and how we can help your team build inclusive products.
Read our case studies to see how we've helped companies improve their WCAG compliance.
For users with vestibular disorders or motion sensitivity. The underline fades in instantly instead of scaling, providing the same visual feedback without the animation.
Read about our pricing options and find the right plan for your organization.
Underline appears instantly via opacity instead of scaling from left. No transform animation — just a simple fade.
Blog post and case study cards with staggered entrance animations, hover lift effects, and glowing borders. Cards feature tag categories, stats grids, and accessible focus states.
Cards animate in with blur + rise + scale, staggered by 100ms each. Click Replay to watch the animation again.
A practical guide to creating form experiences that work for everyone. We cover validation, error handling, and focus management.
A federal agency's ServiceNow portal was failing audits left and right. We rebuilt 24 core widgets from scratch, trained their internal team on accessibility best practices, and achieved 100% WCAG 2.1 AA compliance in just 12 weeks.
How we achieved 100% compliance on federal ServiceNow implementations. The out-of-the-box widgets fail basic checks.
Feature image with zoom on hover, reading time badge that highlights, colored category tags, and date footer.
A comprehensive breakdown of the new success criteria. We analyze each addition, explain the rationale, and show practical implementation examples.
From Figma tokens to production components with full keyboard and screen reader support. We cover the complete pipeline.
Results-focused cards with stats grid, optional client logo, and "Read Case Study" CTA. Logo is optional for client anonymity.
Their checkout flow was a conversion killer—especially for users with disabilities. We redesigned the entire 5-step flow with accessibility baked in from the start, improving both usability and business metrics.
Patients were abandoning critical healthcare tasks because the portal was unusable with assistive tech. We audited, remediated, and retrained their team on accessibility best practices.
Two accordion designs: FAQ for general use with floating answer cards and focus mode, and Terminal-style for documentation with tabbed navigation and staggered text animations.
Clean, minimal FAQ component with floating answer cards and focus mode. When an item is open, inactive items dim to 40% opacity. The header hover uses 0.7s timing for a cinematic feel.
Everything you need to know about our accessibility consulting services. Can't find what you're looking for? Reach out to our team.
Mac-style terminal window with tabbed navigation. When switching tabs, question text slides out left then cascades in from the right with a staggered reveal (60ms between each) and subtle spring bounce. Arrows stay anchored during animation.
npm install @modern-softworks/a11y-toolkit. Then import the components you need in your project. The toolkit is tree-shakeable, so you only bundle what you use.npx @modern-softworks/create-a11y-app to scaffold a new project with all best practices pre-configured. The generated project includes example components and documentation.a11y.config.js file to your project root. Set the contrastLevel option to either "AA" or "AAA" depending on your compliance needs. The toolkit will automatically flag colors that don't meet the threshold.eslint-plugin-a11y-toolkit to your ESLint config to catch accessibility issues during development.prefers-reduced-motion by default. You can also force reduced motion mode by setting forceReducedMotion: true in your config for testing purposes.outline: none somewhere in the cascade. Our components use :focus-visible which only shows focus rings for keyboard navigation. Make sure you haven't overridden the --focus-ring-color variable.npm run a11y:audit to get a detailed report of missing or incorrect ARIA attributes. The report includes specific line numbers and suggested fixes."@modern-softworks/a11y-toolkit" to your types array in tsconfig.json. You may also need to restart your TypeScript server.Ephemeral feedback messages that appear in the bottom-right corner. Features cinematic slide-in animation with blur, auto-dismiss with progress bar, and semantic color variants.
Four variants matching semantic color tokens. Each includes a glowing icon badge.
Click buttons to trigger live toast notifications. Toasts appear in the bottom-right corner, auto-dismiss after 5 seconds, and can be manually dismissed. Hover to pause the timer.
For users with vestibular disorders or motion sensitivity. Toasts fade in/out without blur, transform, or slide animations. Progress bar remains at full width.
Entrance/exit use simple opacity fade (0.2s/0.15s). No blur, transform, or slide. Progress bar animation disabled — shown at full width.
Accessible modal dialogs with focus trap, escape key handling, and cinematic blur + scale animations. Includes a Newsletter signup modal built on the base component.
Reusable modal container with focus trap, escape key handling, overlay click to close, and cinematic blur + scale + rise animation with staggered content.
Split-panel newsletter signup with accent gradient, benefits list, and staggered content animation. Features email validation, loading state, and success confirmation.
For users with vestibular disorders or motion sensitivity. Modal appears instantly without blur, scale, rise, or stagger animations.
Overlay appears instantly without backdrop blur. Modal appears without blur, scale, or transform. Content appears all at once (no stagger).
Sticky header navigation with morphing dropdown menus. Features cinematic blur + scale entrances, staggered item reveals, and smooth transitions between dropdown panels. The live navigation is visible at the top of this page.
The dropdown uses a choreographed animation sequence:
Hover over Services or Resources in the navigation above to see the dropdown. Move between them to see the morphing animation. Hover over dropdown items to see the lift effect and arrow slide-in.
Toggle reduced motion to test the navigation without animations. This affects both desktop dropdowns and mobile menu.
Form components with marching ants focus ring, validation states, and disabled patterns. All inputs support keyboard navigation with animated focus indicators.
Basic text input with focus ring animation. Tab to see focus state.
Error state for form validation feedback.
Multi-line text input for longer content like messages.
Native select with custom styling and focus ring.
Checkboxes with animated check mark and spring easing.
Radio buttons for single-choice selections.
Inline layout for newsletter signups with input and button side-by-side.
A complete form demonstrating all components together.
Form components adapt for users who prefer reduced motion. Focus indicators remain visible but static, and state changes happen instantly.
Focus rings become solid outlines. Checkbox and radio state changes are instant (no elastic/spring effects). All elements remain fully functional.