Style Guide

Brand

Logo primary

Logo alternatives

Social & Favicon

Typography

Body: Poppins (available on Google Fonts and Adobe Fonts)
Headings: Fields Display (available on Adobe Fonts)

Font Styles

fs0

Display

Heading

fs1

Heading

fs2

Heading

fs3

Heading

fs4

Heading

fs5

Heading

fs6

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

lc3

lc4

Typography Elements

All Ordered 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 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

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 conse ctetur

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 conse ctetur

List item one
List item two
List item three

Lorem ipsum dolor sit amet conse ctetur

Color

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

Button

data-theme="inherit"

Heading

Button

data-theme="light"

Heading

Button

data-theme="dark"

Heading

Button

Elements

Button styles

data-button-style="solid"

Button

Button Text

data-button-style="outlined"

Button

Button Text

Social share

Icons

Icon set: Streamline Light 3.0 (new icons available as required in Figma Style Guide)
‍

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.

Notification title

Standard notification component.

Alert! Something went wrong while submitting the form.

Success! That went well.

Cookie banner

Section Components

We are hiring!

See our Careers and apply today.

Connect with us on

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.125

0.25

0.5

0.75

1.25

1.5

2.5

3.5

4.5

5.5

6.5

7.5

8.5

9.5

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"