Preview images coming soon
A complete Figma design system with variables, modes, auto-layout components and documented usage rules — the foundation a product team can build on for years rather than a pretty component sheet.
Most Figma kits are collections of components. A design system is a set of decisions, documented, with the components as the output. Fathom ships the decisions: what each colour role means, when to use which spacing step, how density changes across contexts, and what a component is not for.
Colour is defined as primitives mapped to semantic roles — surface, content, border, accent, and status — so light, dark and high-contrast modes are three mode values rather than three duplicate libraries. Spacing, radius, typography and elevation are all variable-driven. Switching a frame between modes is instant and complete, and handing tokens to engineering is an export rather than a translation exercise.
Every component uses auto-layout with correct resizing behaviour, component properties for variants and boolean elements, and instance swap slots where they genuinely help. Nested instances do not break when resized. Icons are a single variable-driven set. Form components include every state — default, hover, focus, filled, disabled, error, and read-only — because missing states are where handoff arguments start.
Each component page carries usage notes: what it is for, what to use instead in adjacent cases, accessibility requirements, and content guidance including maximum sensible label lengths. There is a contribution page describing how to propose changes without forking the library, which is the part that determines whether a system survives its second year.
Includes page templates for marketing, application and email contexts, a starter grid and breakpoint system, and a mapping sheet aligning every token to Tailwind's default scale so implementation matches design by default rather than by negotiation.
A Figma account. Variables and modes require a Professional plan or higher to edit; viewing and copying components works on any plan.
Be the first to share how this product worked for you after you buy it.
More assets from the same shelf.
A production admin UI kit in HTML and Tailwind: 46 screens, 120 components, real data tables, charts and forms — all keyboard accessible with a designed dark mode.
$129.00
Every screen and state in a modern checkout, designed and coded: cart, address, shipping, payment, review, confirmation, plus the failure paths most kits pretend do not exist.
$79.00
We use cookies to enhance your experience, analyze traffic and personalize content. You can accept all cookies, reject the optional ones, or customize your choices.
Essential
Required for core functionality such as security, sessions and saved preferences. Always active.
Analytics
Help us understand how visitors use the site so we can improve it.
Marketing
Used to deliver relevant campaigns and measure their effectiveness.
Preferences
Remember your settings such as region, language and display options.
