base5 logo

base5 Elements

Home

Colours


Emphasis

Emphasis text colour

#00111c

Brave Navy

Main /global/ colour

#0A283C

Blue Steel

Global muted/meta text colour

#517B96

Victory Stone

Global borders colour

#C2CCE2

Valiant Mist

Global muted backgorund colour

#F1F4FB

Epic Blue

Global Primary colour

#0050FF

Vibrant Coral

Global link colour

#FF6C6A

Dynamic Green

Global Text Success colour

#00b9a0

Dynamic Green 30%

rgba(0,185,160,.3)

Selection colour

Selection/ins/mark background colour - Lightning Lime 40%

rgba(225,255,100,.4)

Lightning Lime

#e1ff64

Spark Yellow

#ffff55

Hero Blush

#ffd5ff

Iceberg Teal

#74e6ff

Supreme Violet

#b43cff

Lightning Lime 40%

rgba(225,255,100,.4)

Radiant Yellow

rgba(255,255,85,.4)

Hero Blush 30%

rgba(255,213,255,.3)

Iceberg Teal 30%

rgba(116,230,255,.3)

Supreme Violet 30%

rgba(180,60,255,.3)

Custom fluid typography


Fully variable sizes across various devices screens

Variable text size calculation is based on device screen width where min width is 320px and max width is 1600px /max width of Xlarge container/. So, for example, default /base/ text size has range from 16-18px /fluid, without jumping on manual screen resizing/ from min to max device screen width - 320-1600px and up.

To view fluid typography in action start shrinking browser window and observe how text resizes.


Tag Text size in pixels on screens of 320px width and smaller Text size in pixels on screens of 1600px width and larger Line height
Tiny 11.11 11.52 1.5
Small/Meta 13.33 14.40 1.5/1.4
Base 16 18 1.65
H6 16 18 1.65
H5 19.20 22.50 1.4
H4 23.04 28.13 1.4
H3 27.65 35.16 1.4
H2 33.18 43.95 1.3
H1 39.81 54.93 1.2
Heading Small 47.00 68.00 1.2
Heading Medium 52.88 85.00 1.1
Heading Large 59.48 106.25 1.1
Heading XLarge 66.92 132.81 1
Heading 2XLarge 75.28 166.02 1
Heading 3XLarge 84.70 207.52 1
Text Large 19.20 22.50 1.5
Text Lead 23.04 28.13 1.5

Home page example

On Home page all Headings /Where convos begin, Create, Produce, Explore, Insights/ are Heading Small sized. Titles for Clients section /We've loved working with/ and Footer /Don't settle for ordinary and forgettable./ are H2 sized. For Leading text /like the one below header and before Services section, Text Lead class has been used /same size as H4 with 1.5 line height and emphasis text colour/. Main footer links has Text Large class assigned /same size as H5 with 1.5 line height/.

Display - Playfair Display variable font /400/500/600/700/800


3xlarge, 2xlarge, xlarge, large, medium, small

Produce

Produce

Produce

Produce

Produce

Produce


Headings - Manrope variable font /bold/700


3xlarge, 2xlarge, xlarge, large, medium, small

Produce

Produce

Produce

Produce

Produce

Produce


H tags


h1, h2, h3, h4, h5, h6

Typography is the art and technique

Typography is the art and technique

Typography is the art and technique

Typography is the art and technique

Typography is the art and technique
Typography is the art and technique

Text styles - Manrope variable font /200/300/400/500/600/700/800


H1 - We've loved working with

Lead text - We'll amplify your story and trigger meaningful conversations at scale.

Lorem ipsum dolor sit amet, this is Bolder text, sed do eiusmod tempor this is Bold text et dolore magna aliqua. This is Extra Bold text enim ad minim veniam, this is lighter text quis nostrud exercitation ullamco this is Light text laboris nisi ut aliquip ex ea commodo consequatsub. Duis aute irure dolor in reprehenderit in This is link within article voluptate velit esse cillum dolore eu this is Emphasized text fugiat nulla pariatur cillum dolore eu5. This is Primary text excepteur sint occaecat cupidatat non proident, this is Muted text sunt in culpa qui officia deserunt mollit anim id est laborum.

Large text - Unlocking epic outcomes through creative content marketing. We'll amplify your story and trigger meaningful conversations at scale.

Small text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tiny text - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Meta text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is button link

Light text /200/ - Base, H5, H4, H3, H2, H1, Heading small, Heading medium, Heading large, Heading xlarge, Heading 2xlarge, Heading 3xlarge

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.

Create
Create
Create
Create
Create
Create


Lighter text /300/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Normal text /400/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Emphasized text /#00111c (darken main colour #0A283C), font weight 500/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Bolder text /600/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Bold text /700/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Extra Bold text /800/ - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Italic text - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Small text - Base, H*

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Meta text - Base, H*

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Lead text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Large text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Muted text - Base, H5, H4, H3, H2, H1

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Primary text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Success text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Warning text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Danger text

Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.


Link
Don't settle for ordinary and forgettable.
Don't settle for ordinary and forgettable.
Article style link

Mark document changes as inserted text using the ins element.

Mark document changes as deleted text using the del element.

Define inline code snippets using the code element.

De-emphasize text for small print using the small element.

Define subscript text using the sub element..

Define superscript text using the sup element.

Define underlined text using the u element.


Buttons


Buttons & Links

Regular Buttons


Small Buttons


Large Buttons


Button with icon



White Outline Button

Button Link


Engage with us
Take a peek
Read more
Read all
Read all


Margins and Paddings


Space dividers

Tag Space in pixels on screens of 0 - 1200px width Space in pixels on screens of 1200px width and larger
Small Margin 10 10
Base Margin 20 20
Medium Margin 40 40
Large Margin 40 70
XLarge Margin 70 140
Small Padding 15 15
Base Padding 30 40
Large Padding 40 70

Margin and Padding explained

Margin property controls the space outside an element, and the padding property controls the space inside an element. To create the gap, the padding either grows the element's size or shrinks the content inside. By default, the size of the element increases.

base5 uses Base Margin as a separator for regular text blocks /Headings uses Medium top margin for easier reading/. Check demo articles on Insights page to see text margin dividers in action.

Learn more on margin and padding space dividers used in web development
Margins /bottom/

Small

Small

Base

Base

Medium

Medium

Large

Large

XLarge

XLarge


Paddings


Element with Small Padding

Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.

Element with Base Padding

Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.

Element with Large Padding

Unlocking epic outcomes through creative content marketing. We’ll amplify your story and trigger meaningful conversations at scale.


Section


Horizontal layout sections with different background colors and styles.

Sections are used to separate the content of a page into differently styled blocks. You can place a Container to modify the width of the content inside sections and add horizontal padding.


Section vertical padding /top and bottom/
Tag Device screen width <= 900px
/small to medium - phones and tablets/
Device screen width of 900px and larger
/large - desktop/
XSmall Section 20px 20px
Small Section 40px 40px
Base Section 40px 70px
Large Section 70px 140px
XLarge Section 140px 210px

Home page example

On Home page we have Base Section set for every section there /Hero, Intro text, Clients, Services, CTA and Insights/. For some sections we are removing top and/or bottom padding to comply with element design /Hero - top padding removed to let the illustration goes up to the top, CTA - both paddings removed (top and bottom) to set the illustration from top to bottom edge/

You can take a closer look on section dividing example on Home page between Clients /muted background colour applied/ and Services section. Both sections uses Base Section padding so dividing space between last element inside Clients and first element inside Services are sum of both sections paddings - e.g. on Desktop screens 140px and on smaller screens 80px.

Elements on this page /page navigation and content/ are within Base Section


Large Section padding /grey space/ example /140px top and bottom on desktop screens/

Section Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.


Container


This component allows you to align and center your page content inside Section.

The element will be centered and have padding on the sides, that adapts automatically for large screens.


Container max width
Tag Max width
XSmall Container 750px
Small Container 900px
Base Container 1200px
Large Container 1400px
XLarge Container 1600px

Container horizontal padding /left and right/
Device screen width <= 640px
/small - phones/
Device screen width of 640px - 900px
/medium - tablets/
Device screen width of 900px and larger
/large - desktop/
15px 30px 40px

Home page example

On Home page we have XLarge container for header /Hero/ elements /black box with text and illustration/, Small container for Hero and Services intro text and Large container for everything else /including top navigation menu/.

Elements on this page /sections navigation and content/ are within XLarge container.