Get in touch

Nothing we do happens without you!
‍If you want to talk to us about something you feel we could help with, it’d be great to meet you.

+44 (0) 7739 337 007

hello@ostmodern.co.uk

London, UK

By submitting this form you agree to us storing your data, and acknowledge our Privacy Policy
Thank you

Your submission has been received,
we will be in touch shortly.
Error

‍ Something went wrong while submitting the form, please try again.

Breakpoint currently unavailable. I'm working hard to this happen, I PROMISE.

¯\_(ツ)_/¯

Typography

Typography

Heading
2xl
font-size: 4.5rem; /* 72px */

line-height: 1;

heading - 2xl

xl
font-size: 3.75rem; /* 60px */
line-height: 1;

heading - xl

lg
font-size: 3rem; /* 48px */

line-height: 1;

heading - lg

md
font-size: 2.25rem; /* 36px */

line-height: 1.5;

heading - md

sm
font-size: 2.25rem; /* 36px */

line-height: 2.5rem; /* 48px */
heading - sm
xs
font-size: 1.875rem; /* 27px */

line-height: 2.25rem; /* 32px */
heading - xs
2xs
font-size: 1.875rem; /* 27px */

line-height: 2.25rem; /* 32px */
heading - 2xs
Text
2xl
font-size: 1.5rem; /* 27px */

line-height: 2rem; /* 40px */

Text - 2XL

xl
font-size: 1.5rem; /* 24px */

line-height: 2rem; /* 32px */

Text - XL

lg
font-size: 1.125rem; /* 18px */

line-height: 2rem; /* 32px */

Text - LG

md
font-size: 1rem; /* 16px */

line-height: 1.5rem; /* 24px */

Text - Base

sm
font-size: 0.875rem; /* 14px */

line-height: 1.25rem; /* 20px */

Text - SM

xs
font-size: 0.75rem; /* 12px */

line-height: 1rem; /* 16px */

Text - XS

Rich text - Post

What’s a Rich Text element?

Link

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.

  • Unordered list item
  • Unordered list item
  1. Ordered list item
  2. Ordered list item

H1

H2

H3

H4

H5
H6
Blockquote
Caption

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.

Typography

Color

Grey
900
Grey 900
#0C0C0E
800
Grey 800
#282B2F
700
Grey 700
#53565A
500
Grey 500
#797F85
400
Grey 400
#91979D
100
Grey 100
#ECEEF0
50
Grey 50
#F4F7F9
Grey Green
800
Grey Green 800
#0C0C0E
Red
600
Red 600
#FD3B00
Blush
500
Blush 500
#9D918E
300
Blush 300
#E1D4D2
Stone
500
Stone 500
#A6A89A
300
Stone 300
#E6E8DA
Green
500
Green 500
#00AD46
Ostmodern ⁄ Styleguide

Layout

Grid (equal)
3 Col
2 Col