Skip to main content

Style Guide

A reference of components and design elements, along with their usage

Styles

Type Scale

h1
Find your perfect community
h2
Find your perfect community
h3
Find your perfect community
h4
Find your perfect community
h5
Find your perfect community
h6
Find your perfect community
sh1
Find your perfect community
b1
Find your perfect community
b2
Find your perfect community
b3
Find your perfect community
b4
Find your perfect community
c2
Find your perfect community
c3
Find your perfect community

Colors

black
-
#000000
gray
0
#333333
1
#555555
2
#9b9b9b
3
#d4d4d4
4
#f3f3f3
5
#f6f6f6
white
-
#ffffff
nightshade
50
#fcefff
100
#BD8DC8
300
#834491
600
#4E155A
900
#1d0023
eggplant
-
#17063b
blurple
300
#858afa
500
#6364ff
600
#563acc
900
#2f0c7a
lime
-
#baff3b
goldenrod
-
#ffbe2e
error
-
#ff4d4f

Icons

api-gear
api-window
award
decentralized
donate-box
donate
feed
money
move-servers
move
open-source
price-tag
privacy
progressive-web
safe
safety-1
safety
screen
servers

Components

IconCard

Decentralized

Not controlled by a single website or company, Mastodon is a network of completely independent service providers forming a global, cohesive social media platform.

LinkButton

Sizes

Colors

SelectMenu

AppCard

SkeletonText

TwoUpFeature

Progressive web app

You can always use Mastodon from the browser on your desktop or phone! It can be added to your home screen and some browsers even support push notifications, just like a native app!

Open API

Mastodon is open-source and has an elegant, well-documented API that is available to everyone. Make your own app, or use one of the many third-party apps made by other developers!

ServerCard

General

mastodon.social

The original server maintained by the Mastodon gGmbH non-profit.

AppHero