At Clerk, we believe authentication should be as elegant and intuitive as the rest of your product. That's why our platform provides developers with drop-in authentication components that are secure, scalable, and easy to implement—just like Stripe, but for auth.
But we also know that authentication is part of your brand experience. From sign-up to user profile, every touchpoint needs to reflect your visual identity. And while our UI components are easily customizable for developers, we are now bringing that to designers as well.
Today, we're excited to introduce Mosaic, our new Figma design system. Mosaic gives product teams a powerful, visual way to explore and brand Clerk's UI components before writing a single line of code.
Mosaic is a Figma design system that mirrors every Clerk UI component—exactly as they appear in production. You can use it to:
Whether you're a designer creating your first Clerk experience, or a developer collaborating with a design team, Mosaic provides a shared foundation to ensure your auth UI feels like your product—not ours.
Clerk has always been about giving you control without the complexity. We provide fully-featured authentication out of the box, and you can customize every aspect of the UI through themes, CSS variables, or the API.
But we noticed something important: many design teams wanted to preview and prototype these customizations visually—before implementation. Some teams were rebuilding Clerk's components manually in Figma. Others were stuck with screenshots or guesswork.
Mosaic solves that problem. It's a ready-to-use, fully branded design kit that helps you explore, customize, and validate Clerk components right in Figma. You no longer have to imagine what your sign-up form will look like—you can see it, test it, and iterate.
We've designed Mosaic to be as intuitive as possible. Here's how to get started and make Clerk's components your own in just a few steps.
You can access the Clerk Mosaic UI Components in the Figma Community.
If you prefer learning by watching rather than reading, we've put together a concise, 5-minute introductory video. It walks you through everything from setup to customization, so you can get up and running quickly.
Before diving into components, start by defining your core brand colors.
Open Figma's Variables panel and update the following key color variables:
PrimaryBackgroundInputDangerSuccessWarningForegroundMutedForegroundPrimaryForegroundInputForegroundNeutralBorderShadowRingMutedAll Mosaic components are linked to these variables. That means once you set your colors, every component will update automatically—keeping your brand consistent throughout.
For developers implementing these designs, you can achieve the same dynamic theming using Clerk's CSS variables support.
Want to tweak the shape of UI elements? You can also adjust the border radius variable to match your design language, whether that's soft and rounded or sharp and clean.
Once your core colors are defined, run the Clerk Mosaic Color Generator plugin in Figma. This tool automatically generates the full color palette needed for Clerk's UI components—shades, tints, contrast-safe variants, and more.
This step ensures visual cohesion and accessibility across your entire auth experience, without manual color tweaking.
Personalization matters—especially for components that display real user data.
To make your designs feel realistic and aligned with your brand, update the Figma company logo to your company logo. This will be used across the components to showcase your brand. Also, assign your logo's fill color to the PrimaryForeground variable to ensure proper contrast and consistency.
Next, bring in your brand typography.
In Figma Variables, update the following:
fontFamilyfontFamilyButtonsMosaic will automatically apply these fonts across all headings, labels, buttons, and body text—giving your auth UI the same voice as the rest of your app.
With colors, typography, and imagery set, you're now ready to use Mosaic with your own visual identity.
Simply pull any UI component into your canvas and set the appearance mode you've configured. You'll instantly see each component styled with your brand's look and feel—ready for design reviews, prototyping, or handoff.
Mosaic includes every core Clerk component, organized and documented within the Figma file. That includes:
<SignIn /><SignUp /><UserProfile /><UserButton /><OrganizationProfile /><OrganizationSwitcher /><CreateOrganization /><VerifyEmail /><VerifyCode /><ResetPassword />Each component is interactive and pre-wired to respond to your Figma variables, so you can test different states and variations instantly. There's no need to recreate anything from scratch—just customize and go.
When you're ready to implement these components in code, our comprehensive component documentation provides everything you need to get started.
(Foundational internal components used to build these aren't exposed—they're there to keep things structured, but you won't need to touch them.)
One important note: Mosaic is a Figma file, so when you duplicate it to your own workspace, it becomes disconnected from future updates.
If we release a new component or update the design system, you'll need to pull the latest version manually and reapply your brand settings (colors, avatar, typography). We'll announce all updates clearly, so you never miss a new feature or visual improvement.
Authentication is the front door to your product—and Mosaic ensures that door looks exactly the way you want it to.
With a simple, visual setup process, deeply customizable styles, and a full suite of production-matching components, Mosaic gives you the tools to design authentication flows that belong to your brand from the first pixel to the last.
We're excited to see what you build with it!
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。