Fat Fuzzy UI is a design guide and component library and that aims to maximize use HTML and CSS’s native capabilities to produce harmonious and robust designs.
The underlying intention of all this is that interfaces may adapt to all sorts of browser environments and display conditions so that users can happily access the content and functionality of the app (a website being a specific kind of app).
The structure of the library as well as the way the components are designed draws heavily from the following sources:
- The blog post Algorithmic Design and the lessons and examples in every-layout
- CUBE CSS
- Open Props
- Inclusive Components
This library and the rest of the work on this website were conceived as a research project and are not specifically intended for distribution, but if you are curious as to how it’s built, the code is available under an MIT license here:
- @fat-fuzzy/ui: a component library, built in Svelte, recently migrated to Svelte 5. I am very happy with the transition!
- @fat-fuzzy/style: a CSS library
- @fat-fuzzy/playbook: the library that underlies the component demos
tokens
These are the Design Tokens of the UI library.
They provide the base design values used to build Blocks, Layouts, and Recipes.
tokens
Color
Base colors
Theme colors
primary
accent
highlight
Semantic colors
info
success
warning
error
Typography
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
Fox Jumps Over Dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
blocks
Blocks are the smallest self contained components that provide a piece of information, action, or navigation option to the user of the app.
layouts
In CUBE CSS Layouts are compositions. This means that Layouts are components used to structure and organize the content and interface elements it contains.
recipes
Recipes are components that provide solutions to common UI usage patterns, and are created using Blocks, Layouts, and other Recipes.