Ostra

Style guide

Every colour below is a colour style and every text sample is a text style. Change one in Assets and the whole site follows.

Colours

Oyster

#D9D6CF · Page background

Pearl

#F4F2EE · Light text, panels

Sea

#0E2A47 · Text, buttons, dark sections

Sea 2

#1B3D63 · Muted text, hover

Nacre

#E9C9C1 · Accent, marquee, cursor

Type

Syne for display, Karla for reading. Each style has a phone size that applies under 600px.

Display · Syne 800 · 110 / 72 / 64 / 40

Films that move

Heading 2 · Syne 800 · 72 / 52 / 44 / 32

One room, every craft

Heading 3 · Syne 800 · 32 / 28 / 26 / 24

Long Coat Season

Body large · Karla 400 · 24 / 22 / 21 / 20

We direct, shoot, design and edit under one roof.

Body · Karla 400 · 18 / 18 / 17 / 17

Directors, designers, editors and a colourist share one floor, so an idea goes from the board to the grade without changing hands.

Label · Karla 600 · 15 / 15 / 15 / 14

Client · Year · Discipline

hello@ostra.exampleLisbon and LondonInstagramVimeoStyle guideTemplate guideA template by RiptCodes

Create a free website with Framer, the website builder loved by startups, designers and agencies.