Headings
Heading 1 - Title
Heading 2 - Title
Heading 3 - Title
Heading 4 - Title
Heading 5 - Title
Heading 6 - Title
Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut finibus lectus. Praesent aliquet risus eget venenatis molestie. Donec vestibulum turpis pretium lorem mollis ultricies. Fusce sit amet lectus ipsum. Nam felis felis, consequat eu tristique eu, dignissim a orci. Aliquam a dictum quam. Praesent et purus eget sem ornare efficitur ut quis nibh. Vivamus odio neque, elementum at aliquet in, blandit eu ante. Duis vel viverra nunc. Donec quis tortor sit amet sem mattis sollicitudin. Morbi eget placerat nibh. In sit amet mattis urna.
- Coffe
- Tea
- Black tea
- Green tea
- Milk
- Coffe
- Tea
- Black tea
- Green tea
- Milk
Buttons
Style guide
Oblik design system
Colours, type, buttons and building blocks used across the template. Change a token or a tag style once and every page follows.
Colours
ink
#14110F
ink-soft
#2A2522
ink-muted
#746D6A
surface
#F5F3EE
white
#FFFFFF
line
#E4E0D8
brand
#114E0B
oxblood
#3B0B0B
blush
#F8E4E4
Headings, Parkinsans 500
Display title 80
Heading 2, forty-eight pixels
Heading 3, twenty-eight pixels
Heading 4, twenty-two pixels
Heading 5, eighteen pixels
Heading 6, sixteen pixels
Body, Inter 400
Lead paragraph at 20 pixels. We shape brands people remember and products they enjoy using.
Body paragraph at 18 pixels with a 1.3 line height and tight letter spacing, taken from the reference style. Used for most running text.
Small muted text at 16 pixels for captions, meta and supporting copy.
Eyebrow
Eyebrow white
Eyebrow light
Rich text
A heading inside an article
Rich text from the CMS uses the prose class. Paragraphs, links, lists and quotes are styled automatically.
- First list item
- Second list item
A short pull quote set in the heading font.Studio note
Form fields
Text input
Jane Doe
Select
Select an option
Success state
Shown inside every form after a successful submit.