text-align--right
Style Reference
Inspired by Material Design 3
white -
#FFFFFF
black - #000000
primary - #BD0C2F
primary - #BD0C2F
on-primary - #FFFFFF
primary-container - #FFDAD9
on-primary-container - #410009
primary-fixed - #FFDAD9
on-primary-fixed - #410009
primary-fixed-dim - #FFB3B2
on-primary-fixed-variant - #920020
secondary - #775656
on-secondary - #FFFFFF
secondary-container - #FFDAD9
on-secondary-container - #2C1515
secondary-fixed - #FFDAD9
on-secondary-fixed - #2C1515
secondary-fixed-dim - #E6BDBC
on-secondary-fixed-variant - #5D3F3F
tertiary - #755A2F
on-tertiary - #FFFFFF
tertiary-container - #FFDEAE
on-tertiary-container - #281900
tertiary-fixed - #FFDEAE
on-tertiary-fixed - #281900
tertiary-fixed-dim - #E5C18D
on-tertiary-fixed-variant - #5B431A
error - #BA1A1A
on-error - #FFFFFF
error-container - #FFDAD6
on-error-container - #410002
outline - #857372
background - #FFFBFF
on-background - #201A1A
surface - #FFF8F7
on-surface - #201A1A
surface-variant - #F4DDDC
on-surface-variant - #524343
inverse-surface - #362F2E
inverse-on-surface - #FBEEED
inverse-primary - #FFB3B2
shadow - #000000
surface-tint - #BD0C2F
outline-variant - #D7C1C1
scrim - #000000
surface-container-highest - #ECE0DF
surface-container-high - #F2E5E4
surface-container - #F8EBEA
surface-container-low - #FEF1F0
surface-container-lowest - #FFFFFF
surface-bright - #FFF8F7
surface-dim - #E4D7D6
Tone Palettes
Applications
Primary
99
95
90
80
70
60
50
40
30
20
10
Environment
Primary
On Primary
Primary Container
On Primary Container
Secondary
On Secondary
Secondary Container
On Secondary Container
Tertiary
On Tertiary
Tertiary Container
On Tertiary Container
Error
On Error
Error Container
On Error Container
Background
On Background
Surface
On Surface
Surface Variant
On Surface Variant
Outline
Outline-Variant
Secondary
99
95
90
80
70
60
50
40
30
20
10
Tertiary
99
95
90
80
70
60
50
40
30
20
10
Custom - Quaternary
99
95
90
80
70
60
50
40
30
20
10
Error
99
95
90
80
70
60
50
40
30
20
10
Neutral
99
95
90
80
70
60
50
40
30
20
10
Neutral Variant
99
95
90
80
70
60
50
40
30
20
10
Styles & Properties
Text Formatting
text-align--left
text-align--center
bold
no-decoration
no-decoration
Rich Text Styling
Static and dynamic content editing
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Text styles
Display 2
Inter Regular 41.886959075927734px/53.284080505371094px
Display 1
Inter Regular 41.886959075927734px/53.284080505371094px
Title A
Inter Regular 32.93000030517578px/41.886959075927734px
Title B
Inter Regular 25.88800048828125px/32.93207931518555px
Title C
Inter Regular 20.351999282836914px/25.88520050048828px
Heading
Inter Semi Bold 18.06399917602539px/23.010480880737305px
Subheading
Inter Medium 14.175999641418457px/18.03696060180664px
Callout
Inter Medium 15.039999961853027px/19.13088035583496px
Body
Inter Regular 16px/20.351999282836914px
Label
Inter Medium 13.4399995803833px/17.095680236816406px
Caption
Inter Regular 12.67199993133545px/16.116239547729492px
Lorem ipsum dolor
Inter Bold 41.900001525878906px/47.30509948730469px
Lorem ipsum dolor
Inter Bold 41.900001525878906px/47.30509948730469px
Lorem ipsum dolor
Inter Semi Bold 32.93207931518555px/41.886959075927734px
Lorem ipsum dolor
Inter Semi Bold 25.88520050048828px/32.93207931518555px
Lorem ipsum dolor
Inter Semi Bold 20.351999282836914px/25.88520050048828px
Lorem ipsum dolor
Inter Bold 18.06399917602539px/22.972320556640625px
Lorem ipsum dolor
Inter Semi Bold 14.175999641418457px/18.03696060180664px
Lorem ipsum dolor
Inter Semi Bold 16px/20.351999282836914px
Lorem ipsum dolor
Inter Semi Bold 15.039999961853027px/19.13088035583496px
Lorem ipsum dolor
Inter Bold 13.4399995803833px/17.095680236816406px
Lorem ipsum dolor
Inter Semi Bold 12.67199993133545px/16.116239547729492px
Layout Templates
Grids
6 column
5 column
4 column
Margins
margin-top
extra-large
margin-top
large
margin-top
medium
margin-top
small
margin-top
extra-small
margin-right
extra-large
margin-right
large
margin-right
medium
margin-right
small
margin-right
extra-small
margin-bottom
extra-large
margin-bottom
large
margin-bottom
medium
margin-bottom
small
margin-bottom
extra-small
margin-left
extra-large
margin-left
large
margin-left
medium
margin-left
small
margin-left
extra-small
Elevation
Card Colors
Shadows
.card .elevation1
.card .elevation2
.card .elevation3
.card .elevation4
.card .elevation5
.elevation1
.elevation2
.elevation3
.elevation4
.elevation5
Components
Form & Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Cards
Normal
Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing
Outlined
Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing
Fill
Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing
April 5, 2023
7 Ways To Improve Website Usability And Accessibility
Et nostrum delectus in est perspiciatis minus ea repellat autem.
Cumque ad recusandae.
Voluptatem et voluptatem illo et omnis.
Doloribus ullam et quia voluptas dignissimos velit accusamus sit perspiciatis.
Explicabo unde dolorem iure fugit veniam
April 5, 2023
7 of the Best Examples of Beautiful Blog Design
Harum voluptatem aliquam at eligendi nisi corrupti totam molestias aut.
Omnis minima mollitia.
Ipsa incidunt occaecati est.
Et iste dolore dignissimos excepturi soluta dicta voluptate.
Impedit sit ipsam et.
Sed quis rerum facere qui odio eligendi.
Quo omnis deserunt qui.
Qui est i
April 5, 2023
5 Great Web Design Resources
Voluptatibus cupiditate sint mollitia tempore aut velit.
Eveniet unde ut hic aspernatur ut eius veritatis eligendi veniam.
Repellat molestiae repellendus cum occaecati ut quas suscipit sunt.
April 5, 2023
15 Best Blogs To Follow About Web Design
Ut aspernatur doloribus voluptatem cupiditate quia possimus eum.
Qui doloremque cupiditate ut deserunt su
April 5, 2023
7 Things About Web Design Your Boss Wants To Know
Qui velit excepturi dicta qui vel in similique sed.
Sit eius ipsam ut praesentium hic harum doloribus quis ut.
Recusandae facilis natus et voluptatem consequatur rerum sed et sit.
Perspiciatis impedit maiores et est occaecati
April 5, 2023
Why We Love Webflow (And You Should, Too!)
Voluptates amet vel ullam totam vitae sunt quidem qui iusto
April 5, 2023
The Worst Advice We've Ever Heard About Web Design
Dolores ab similique qui neque.
Ipsa iste perspiciatis labore consequatur eaque sunt.
Dolor est doloremque ut dolor alias praesentium labore.
Qui illum ex aut officia assumenda omnis.
Est aspernatur iste dolor animi ut odit.
Asperiores fugit sed.
Cupiditate officia nobis officiis e
April 5, 2023
10 Great Examples of Responsive Websites
Voluptatibus veritatis quia.
Similique dolorum suscipit.
Amet ipsam aut occaecati eligendi tempore soluta itaque corrupti deserunt.
Qui totam culpa ut quibusdam et quo quam nihil aperiam.
Aut alias aut qui qui consequatur quod quo.
Sit vel enim quo hic.
Et et es
April 5, 2023
How to improve Web Design Process
Eligendi dolorem dolore earum necessitatibus soluta minima ullam sed cum.
Pariatur repellat vel sequi nulla incidunt.
Quod non consequatur eum qui reiciendis.
Vero et esse id est veritatis recusandae.
Quia facere quisquam dolorem et quibusdam non ea.
Quaerat asperiores libero omnis voluptate
April 5, 2023
5 Principles Of Effective Web Design
Ut ut eos commodi veritatis quas quia ut asperiores.
Ab nihil sed aspernatur quo reprehenderit.
Dolore quia et rerum.
Est sint sapiente quis officiis quibusdam autem sed dolorum ipsa.
Fac
Buttons
Elements
States
Primary Button
Secondary Button
Cancel Button
Primary Button
Static
Primary
Hover
Primary 50
Pressed
Primary 30
Secondary Button
Static
Surface, Black Outline
Hover
Surface +3
Pressed
Surface +5
Cancel Button
Static
Surface, Black Outline
Hover
Error 50
Pressed
Error 30
Utility Classes: Button Padding