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 to build interfaces that can adapt to all sorts of browser environments and display conditions so that users may 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:

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:

tokens

These are the Design Tokens of the UI library. They provide the base design values used to build Blocks, Layouts, and Recipes.

tokens

Base colors

bg:light
bg:dark

Theme colors

primary
surface:0:primary
surface:1:primary
surface:2:primary
surface:3:primary
surface:4:primary
surface:5:primary
accent
surface:0:accent
surface:1:accent
surface:2:accent
surface:3:accent
surface:4:accent
surface:5:accent
highlight
surface:0:highlight
surface:1:highlight
surface:2:highlight
surface:3:highlight
surface:4:highlight
surface:5:highlight

Semantic colors

info
surface:0:info
surface:1:info
surface:2:info
surface:3:info
surface:4:info
surface:5:info
success
surface:0:success
surface:1:success
surface:2:success
surface:3:success
surface:4:success
surface:5:success
warning
surface:0:warning
surface:1:warning
surface:2:warning
surface:3:warning
surface:4:warning
surface:5:warning
danger
surface:0:danger
surface:1:danger
surface:2:danger
surface:3:danger
surface:4:danger
surface:5:danger

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.

blocks

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.

layouts
Raviolo 1
Raviolo 2
Raviolo 3
Raviolo 1
Raviolo 2
Raviolo 3
Raviolo 1
Raviolo 2
Raviolo 3

This paragraph shows how text content will adapt inside a chosen Layout. Layouts are components that help to organize how content is displayed on the screen. They are versatile, efficient, and designed to work in harmony with the browser's built-in layout algorithms.

recipes

Recipes are components that provide solutions to common UI usage patterns, and are created using Blocks, Layouts, and other Recipes.

recipes

SignUp

A sample signup form