Style Guide

Brand

Typography

Font Styles

fs0
Display

Heading

fs1
H1

Heading

fs2
H2

Heading

fs3
H3

Heading

fs4
H4

Heading

fs5
H5
Heading
fs6
H6
Heading
fs7
Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

fs7.1
Paragraph Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

fs7.2
Paragraph Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

Font Weight

fw0
inherit
Lorem ipsum
fw1
Lorem ipsum
fw2
Lorem ipsum
fw3
Lorem ipsum

Line Clamp

lc1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

lc4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Typography Elements

All Ordered List
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
All Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
All Block Quotes
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
rich-text

Lorem ipsum dolor sit amet, consectetur adipiscing

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

Rich Text

rich-text

Lorem ipsum dolor sit amet conse ctetur

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

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

Lorem ipsum dolor sit amet conse ctetur

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

Caption goes here with a link if required

Lorem ipsum dolor sit amet conse ctetur

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

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

Lorem ipsum dolor sit amet conse ctetur

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • List item one
  • List item two
  • List item three

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

Lorem ipsum dolor sit amet conse ctetur

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

  1. List item one
  2. List item two
  3. List item three
Lorem ipsum dolor sit amet conse ctetur

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

Color

Brand

Brand
Brand Colour
HEX: #c88f42
RGB: 200, 143, 66
CMYK: 0, 28, 67, 22
Dark 1
Dark Background
HEX: #262421
RGB: 38, 36, 33
CMYK: 0, 6, 12, 92
Dark 2
Dark Text
HEX: #34322e
RGB: 52, 50, 46
CMYK: 0, 5, 10, 86
Light 1
Light Background
HEX: #ffffff
RGB: 255, 255, 255
CMYK: 0, 0, 0, 0
Light 2
Light Text
HEX: #f7f6f4
RGB: 247, 246, 244
CMYK: 0, 0, 1, 3
Medium Grey
Medium Text
HEX: #969491
RGB: 150, 148, 145
CMYK: 0, 2, 4, 40
Medium Grey Fade
Borders & Strokes
HEX:
RGB:
CMYK:

Themes

data-theme="invert"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

data-theme="inherit"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

data-theme="light"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

data-theme="dark"

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Elements

Button styles

data-button-style="solid"
Button
Button
Button Text
data-button-style="outlined"
Button
Button
Button Text

Social share

Icons

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Notifications

Standard notification component.
Standard notification component.
Notification title
Standard notification component.
Alert! Something went wrong while submitting the form.
Success! That went well.

Section Components

We are hiring!

See our Careers and apply today.

Warren & Partners are a boutique Irish tax and business advisory firm based in Ballsbridge, Dublin. Our experienced-team of tax advisors will create unique tax solutions for your specific business needs.

Warren & Partners are a boutique Irish tax and business advisory firm based in Ballsbridge, Dublin. Our experienced-team of tax advisors will create unique tax solutions for your specific business needs.

Layout

Properties

Grid
gd1
Columns Portrait
cp{1-24}
Columns Landscape
cl{1-24}
Columns Tablet
ct{1-24}
Columns Desktop
cd{1-24}
Rows Portrait
rp{1-12}
Rows Landscape
rl{1-12}
Rows Tablet
rt{1-12}
Rows Desktop
rd{1-12}
Start Portrait
sp{0-24}
Start Landscape
sl{0-24}
Start Tablet
st{0-24}
Start Desktop
sd{0-24}
Order Portrait
op{0-2}
Order Landscape
ol{0-2}
Order Tablet
ot{0-2}
Order Desktop
od{0-2}

Example Grid

Adaptive

Size

0
0.125
0.25
0.5
0.75
1
1.25
1.5
2
2.5
3
3.5
4
4.5
5
5.5
6
6.5
7
7.5
8
8.5
9
9.5
10
11
12
13
14
15
16

Space

none
extra-small
small
medium
large

Miscellaneous

Utilities

pe1
pointer-events: children
Clickable
Parent not clickable.
Direct children clickable.
cf1
cover full
width: 100%;
height: 100%;
ca1
cover absolute
width: 100%; height: 100%;
position: absolute; top: 0; left: 0;
data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"