Skip to content

Kitchen Sink

A collection of styles, components and blocks to see (almost) everything in one place

Typography

Heading Font

Bricolage Grotesque

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Body Font

Geist

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

1234567890!@#$%^&*()

Headings

Hero Text

Hero Text (mobile)

Desktop

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Mobile

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?

Lead Paragraph

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa deserunt ut accusantium aspernatur, architecto rerum, nam inventore laudantium omnis quae cupiditate facilis exercitationem tenetur provident eligendi autem debitis unde?

Lists

  • List item
  • List item
  • List item
  • List item

Font Sizes

Font size: 20px / 1.25rem
Line height: 150% 		Font size: 18px / 1.125rem
Line height: 150% 		Font size: 16px / 1rem
Line height: 150% 		Font size: 14px / 0.875rem
Line height: 150% 		Font size: 12px / 0.75rem
Line height: 150%
Text large
Extra bold 		Text medium
Extra bold 		Text regular
Extra bold 		Text small
Extra bold 		Text tiny
Extra bold
Text large
Bold 		Text medium
Bold 		Text regular
Bold 		Text small
Bold 		Text tiny
Bold
Text large
Semi bold 		Text medium
Semi bold 		Text regular
Semi bold 		Text small
Semi bold 		Text tiny
Semi bold
Text large
Medium 		Text medium
Medium 		Text regular
Medium 		Text small
Medium 		Text tiny
Medium
Text large
Normal 		Text medium
Normal 		Text regular
Normal 		Text small
Normal 		Text tiny
Normal
Text large
Light 		Text medium
Light 		Text regular
Light 		Text small
Light 		Text tiny
Light

Fluid Typography

Headings

Fluid H1 (56px → 90px) Fluid H2 (42px → 60px) Fluid H3 (28px → 36px) Fluid H4 (20px → 30px) Fluid H5 (18px → 24px) Fluid H6 (16px → 20px)

Color Swatches

Primitive colors are the foundational building blocks of a design system's color palette.
They serve as the base for more specific design decisions.

ORANGE

#FA4E03

PINK

#FB8D9D

BLUE

#10539E

GREEN

#42B446

INDIGO

#968ABF

BEIGE

#F2A984

YELLOW

#FABC3C

GREY

#3A3A3A

BLACK

#141414

BLACK (NEUTRAL)

#000000

WHITE

#FFFBEF

WHITE (NEUTRAL)

#FFFFFF

World Colors

DEV

#FABC3C

HOSTING

#FA4E03

SEO

#968ABF

SOCIAL

#42B446

Pills

Default Style

Pill text
Orange Pill
Blue Pill
"#FF0000" Pill
"hotpink" Pill

Hollow

Black Pill
Black Neutral Pill
White Pill
White Neutral Pill
Grey Pill
Dev Pill
Hosting Pill
SEO Pill
Social Pill

Solid

Black Pill
Black Neutral Pill
White Pill
White Neutral Pill
Grey Pill
Dev Pill
Hosting Pill
SEO Pill
Social Pill

Alignment

Left/Start Pill
Center/Middle Pill
Right/End Pill

Containerless

Containerless Pill
Containerless Pill
Containerless Pill

Tables

Tables components can be used in lots of different ways, either doing a lot of stuff automatically or leaving it all down to the developer how they want to implement things

Check the code to see the major difference between these different versions

Manual

Manual table
Month Developer
January Mike View
February Nathan View
March Cameron View

Automatic (Separate data)

Separate data
Month Developer
January Mike View
February Nathan View
March Cameron View

Automatic (Combined data)

Combined data
Month Developer
January Mike View
February Nathan View
March Cameron View

Lottie

Looped

Play once

Hover States

Set initial states

Slot for facade

Content

General Content

Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem!

Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem! Lorem, ipsum dolor, sit amet consectetur adipisicing elit. Magnam officia culpa, veritatis quos. Quaerat impedit laudantium ex modi, magni deserunt error tempora, nulla expedita. Rem nemo nostrum harum, temporibus autem!

Lorem Ipsum

Our road to AI visibility

Client Showcase
Pill

Heading

Want to load in more?

“We really noticed an increase in business straight away, and the results just keep on coming, which is why we’ve been working with them for nearly 15 years! Their insight and consistent care alongside their work on our SEO and PPC campaigns has ensured the enquiries continue to flow.”

John Roberts

Timbermat

“We couldn’t be happier with the quality of service we receive from First Internet. As a result of their work we have been able to see our business grow as a direct result of enquiries throughout the website which is supported by a well thought out and targeted SEO campaign.”

James Mountain

Fire Shield Systems

“Working with the social team at First Internet has completely transformed our social media presence. They have brought consistency and a clear strategy to our platforms and are always trialing new ideas to keep us ahead of the competition. It’s reassuring to know our channels are in expert hands.”

Alexandra Tomkinson

Bailey Walsh & Co

“Working with the social team at First Internet has completely transformed our social media presence. They have brought consistency and a clear strategy to our platforms and are always trialing new ideas to keep us ahead of the competition. It’s reassuring to know our channels are in expert hands.”

Alexandra Tomkinson

Bailey Walsh & Co

“We can’t recommend FI enough! Before working together, social media felt like a constant stress, especially managing our personal accounts. They really understand our brand voice and always come up with content that connects with our audience. The whole process has been seamless and enjoyable.”

Michael Lister

Marcia Mediation

“We can’t recommend FI enough! Before working together, social media felt like a constant stress, especially managing our personal accounts. They really understand our brand voice and always come up with content that connects with our audience. The whole process has been seamless and enjoyable.”

Michael Lister

Marcia Mediation

“Working with the girls at First Internet has been an absolute pleasure. They make social media feel fun and easy and always go the extra mile to make sure our content reflects who we are. Nothing is ever too much trouble, it feels like they are truly an extension of the team.”

Giuseppe Giulinnelli

Mulmar Food Service Solutions

“Working with the girls at First Internet has been an absolute pleasure. They make social media feel fun and easy and always go the extra mile to make sure our content reflects who we are. Nothing is ever too much trouble, it feels like they are truly an extension of the team.”

Giuseppe Giulinnelli

Mulmar Food Service Solutions

Pill
Example Table
Month Developer Approved
December Mike Yes
December Nathan No
January Cameron No
Meet the Team
Scott Co-Owner And Technical Director
Kat Co-Owner And Client Services Director
Julaine Co-Owner And Marketing Director
Andy Head of SEO
Kevin SEO Account Executive
Lorna Social Media Account Manager
Serena Social Media Executive
Joshua Account Manager
Amy Account Manager
Caitlyn Client Services Executive
Dan Lead Developer
Mike Web Developer
Cameron Web Developer
Nathan Web Developer
Tom Web Developer
Matthew Web Developer
Patrick Office, People & Culture Manager
Additional Pill

Questions

FAQs

Stacked Questions

Latest Work

11

ATG Airports

Black Brick

See how First Internet boosted Black Brick’s digital performance with targeted SEO strategy and content optimisation, driving increased organic visibility, quality leads and measurable business growth.

Timbermat

CTA

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos iure quos ratione distinctio quia, obcaecati fugiat voluptates nam vel error modi eaque maxime dolorem molestias, nemo perspiciatis, itaque necessitatibus, sequi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos iure quos ratione distinctio quia, obcaecati fugiat voluptates nam vel error modi eaque maxime dolorem molestias, nemo perspiciatis, itaque necessitatibus, sequi!

News

61
View all
Why First Internet

Title

01

We level up

No lone wolves here. We dive deep together: strategists, designers, devs, and clients — learning, questioning, and building smarter at every step. Collaboration isn’t a buzzword for us; it’s our default setting.
02

We’re audacious

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed euismod turpis. Phasellus vehicula commodo diam, eu convallis massa pharetra eu.
03

We challenge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed euismod turpis. Phasellus vehicula commodo diam, eu convallis massa pharetra eu.