GraceSoft Facade: One Look, With Privacy and Accessibility Built In

If you’ve used more than one GraceSoft product, you may have noticed they don’t quite match. A slightly different purple here, a different button there, a theme toggle that only exists in one of them.

That’s what happens when each product is designed on the day it’s built. GraceSoft Facade is my fix: one design system that every future GraceSoft product will use.

What’s in it

The brand, as code. GraceSoft’s purple and black palettes, status colours, a type scale, spacing, corners and shadows, all as design tokens. Each product can set its own accent colour, and hover, focus and link colours are worked out from it.

Three typefaces, hosted with the product. Montserrat for the interface, Playfair Display for headlines and Source Code Pro for technical details. They’re served from the product itself, not from Google Fonts, so loading a page doesn’t tell a third party you visited.

Components. Buttons, forms, cards, badges, alerts and toasts, dialogs, headers, footers, tables, empty states, pricing tables and more. Every one has proper hover, active, focus and disabled states.

Light, dark or system. The theme is applied before the page paints, so there’s no white flash at night. It’s remembered between visits, stays in sync across tabs, and follows your device if you change it.

Icons. Over 2,000 Lucide icons and over 1,500 Phosphor icons in six weights, trimmed down at build time to only the ones a product uses.

Product stages. One setting shows an “Alpha”, “Beta” or “Early access” badge, a banner you can dismiss, and a “Send feedback” link. Switch to stable and they disappear.

Accessible by default

Every component is tested with axe against WCAG 2.2 AA in both light and dark mode. Every text and background pair meets AA contrast. Dialogs trap focus and hand it back when they close, Esc works where you’d expect, changes are announced to screen readers, and animation respects your reduced-motion setting.

I’d rather this be the floor for every product than a checklist item I remember on launch day.

Private and secure by default

Facade makes no third-party requests and sets no cookies. The only things it stores in your browser are your theme choice and which banners you’ve dismissed this session.

It also works under a strict Content Security Policy, the browser rule that blocks scripts a site didn’t explicitly approve. The small script that sets your theme before the page paints can be allowed by a one-time code or a published hash, so products never need to weaken their policy to use it.

Keeping everything on-brand, including AI-written code

I build with Claude Code, and AI is very good at inventing a “close enough” shade of purple. So Facade comes with guardrails:

• facade check, a linter that flags raw colour values, made-up component classes, inline styles, Tailwind’s default palette and icons that don’t exist. It runs in CI, so off-brand code fails the build.
• Brand rules written for AI, plus a Claude Code skill, so AI-written screens start from the same guidelines I do.

Works wherever I build

Facade works with Tailwind CSS v4 in one import line, as plain CSS and JavaScript for pages without a build step, and through optional Blade components for Laravel. It also generates favicons, a web app manifest and social preview tags from a single square logo.

What’s next

Facade is already powering GraceSoft Footing, the Laravel starter I’ll write about next. From here on, every new GraceSoft product starts with it.