Fat UI

Typography

Abril Fatface Display

For displaying titles, CTAs, and big prices.

Montserrat

For body and informative texts.

Azeret

For code snippets.

Articles (blocks of text)

Link to an article

Colors

Click on a color to set it as accent color! (Or use the ?accent=<color> URL parameter)

Buttons

Chips

Default
Selected

Colored
Selected

Small
Selected

Small
Selected

Cards

Elevation 1
Elevation 2

Form Elements


Search bars

  • Is this what you're looking for?
  • Or this?
  • Maybe... this?

Inputs


Text areas


Checkboxes




Radio



Select

Default
Elevated
Themed
Bordered

Lists


Default

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Seperated

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Deep

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Tables

ProductAmountPriceCustomerType 
Hamburger1 db1290 FtAnnaIn place
Pizza1 db2340 FtHubaTo go
Ice Tea8 db690 FtDezsoDelivery
ProductAmountPriceCustomerType 

Banners



Dialogs

Payment confirmation

Are you sure?




Whoops, something bad happened!

Please refresh the page.

Components


Data card

Free space
156 TB
Income
$1990
Trees planted
27 891
Hours listened
5 462


Menu card

Home
Settings




Pagination


Alphabetic



Numeric



Switcher

Left
Middle
Right

Notifications

    Notifications

  • 14:57

    New! Realtime communication between users!

    Users are now notified about each others activity without refreshing the page.

    Learn more
  • 01:08

    Everything operates normally.

  • Yesterday, 18:13

    Database maintenance

    We are making changes to our database this evening around 1am. Saving and loading data might be slower than usual.