Logo

Typography

For blocks of text from a wysiwyg editor or to make sensible descions for basic html we use the prose For example blog posts are wrapped in prose prose-xl font-normal

Example h1 text

Here is an opening paragraph - some default styling is applied.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

That's what she said... hmmm mmm.

An unorddered list

  • Item one
  • Item two
  • Item three

A Second Heading

What shall we get at the shops?

<div class="prose font-normal">
	<h1>Example h1 text</h1>
	<p>Here is an opening paragraph - some default styling is applied. </p>
	<p>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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
		nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
		anim id est laborum. </p>
	<blockquote>That's what she said... hmmm mmm.</blockquote>
	<p>An unorddered list</p>
	<ul>
		<li>Item one</li>
		<li>Item two</li>
		<li>Item three</li>
	</ul>
	<h2>A Second Heading</h2>
	<p>What shall we get at the shops?</p>
</div>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-sm">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-md">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-lg">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-2xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-3xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-4xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here

<p class="text-5xl">Here is text xl a long paragrph - its improtant to see if the default text size matches the default text line-height and some more text to check large blocks. And even more text can go here and even more here</p>

Here is a big heading

<h2 class="text-6xl">Here is a big heading</h2>

Here is a big heading

<h2 class="text-7xl">Here is a big heading</h2>

Here is a big heading

<h2 class="text-8xl">Here is a big heading</h2>

Here is a big heading

<h2 class="text-9xl">Here is a big heading</h2>

Italic Callouts

Hey, This is really nice to look at!
<b class="ni-italic text-2xl">Hey, This is really nice to look at!</b>
Hey, This is really nice to look at!
<b class="ni-freehand text-2xl">Hey, This is really nice to look at!</b>

Buttons

<div class="mt-10 max-w-3xl mx-auto space-y-4 flex flex-col items-center justify-start sm:space-y-0 sm:flex-row sm:items-end sm:justify-around">
	<button type="button" class="btn btn-primary btn-xs btn-fx-shadow">Button text</button>
	<button type="button" class="btn btn-primary btn-sm btn-fx-shadow">Button text</button>
	<button type="button" class="btn btn-primary btn-md btn-fx">Button text</button>
	<button type="button" class="btn btn-primary btn-lg btn-fx">Button text</button>
	<button type="button" class="btn btn-primary btn-xl btn-fx">Primary button</button>
</div>

Colors

white +
50 95%
100 85%
200 70%
300 50%
400 25%
500 %
600 15%
700 30%
800 45%
900 60%
950 77%
+ black

Black & White

bg-black
#000
bg-white
#fff
bg-primary
var(--primary)
bg-transparent
transparent

LightGray

bg-lightGray-50
#F7F8F9
bg-lightGray-100
#E9ECEF
bg-lightGray-200
#D4D9DF
bg-lightGray-300
#B8BFCA
bg-lightGray-400
#949FB0
bg-lightGray-500
#718096
bg-lightGray-600
#606C7F
bg-lightGray-700
#4E5968
bg-lightGray-800
#3E4652
bg-lightGray-900
#2D333C
bg-lightGray-950
#1A1D22

Gray

bg-gray-50
#F6F6F8
bg-gray-100
#E4E7EC
bg-gray-200
#C9CED9
bg-gray-300
#A8B0C2
bg-gray-400
#7C87A2
bg-gray-500
#4E5E83
bg-gray-600
hsl(223, 25%, 35%)
bg-gray-700
hsl(222, 25%, 29%)
bg-gray-800
hsl(221, 25%, 23%)
bg-gray-900
hsl(220, 25%, 16%)
bg-gray-950
hsl(225, 25%, 9%)

Blue

bg-blue-50
#F2F7FF
bg-blue-100
#D9E8FF
bg-blue-200
#B3D1FF
bg-blue-300
#80B2FF
bg-blue-400
#408CFF
bg-blue-500
#0066FF
bg-blue-600
#0056D9
bg-blue-700
#0047B2
bg-blue-800
#00388C
bg-blue-900
#002866
bg-blue-950
#00173B

Purple

bg-purple-50
#F9F5FC
bg-purple-100
#EEE3F6
bg-purple-200
#DEC8EE
bg-purple-300
#C8A3E2
bg-purple-400
#AC75D4
bg-purple-500
#9147C6
bg-purple-600
#7B3CA8
bg-purple-700
#65318A
bg-purple-800
#4F266C
bg-purple-900
#3A1C4F
bg-purple-950
#21102D

Pink

bg-pink-50
#FFF5F7
bg-pink-100
#FFE2EA
bg-pink-200
#FFC6D5
bg-pink-300
#FFA1B9
bg-pink-400
#FF7296
bg-pink-500
#FF4374
bg-pink-600
#D93962
bg-pink-700
#B22E50
bg-pink-800
#8C243F
bg-pink-900
#661A2E
bg-pink-950
#3B0F1A

Red

bg-red-50
#FEF4F4
bg-red-100
#FDDFE1
bg-red-200
#FCBFC4
bg-red-300
#FB949C
bg-red-400
#F95E6B
bg-red-500
#F7293A
bg-red-600
#D22231
bg-red-700
#AC1C28
bg-red-800
#87161F
bg-red-900
#621017
bg-red-950
#39090D

Orange

bg-orange-50
#FFF9F2
bg-orange-100
#FFEDDA
bg-orange-200
#FFDCB5
bg-orange-300
#FFC583
bg-orange-400
#FFA845
bg-orange-500
#FF8C08
bg-orange-600
#D97706
bg-orange-700
#B26105
bg-orange-800
#8C4C04
bg-orange-900
#663803
bg-orange-950
#3B2001

Yellow

bg-yellow-50
#FFFCF3
bg-yellow-100
#FFF6DE
bg-yellow-200
#FFEEBE
bg-yellow-300
#FFE392
bg-yellow-400
#FFD55B
bg-yellow-500
#FFC825
bg-yellow-600
#D9AA1F
bg-yellow-700
#B28B19
bg-yellow-800
#8C6D14
bg-yellow-900
#66500E
bg-yellow-950
#3B2E08

Green

bg-green-50
#F3FBF8
bg-green-100
#DBF5EB
bg-green-200
#B8ECD7
bg-green-300
#89E0BD
bg-green-400
#4ED09C
bg-green-500
#14C17B
bg-green-600
#11A468
bg-green-700
#0D8655
bg-green-800
#0A6943
bg-green-900
#084D31
bg-green-950
#042C1C

Cards

simple cards

Turn your ideas into a reality image

Turn your ideas into a reality

Workshops
Workshops are at the heart of our Architecture & Design process. We get up on a white board with you and think visually about what you're trying to achive. We scribble. We explore. We create. From there, we design and build your prototype.
Rapid progress & visual results image

Rapid progress & visual results

Prototypes
As digital engineers, we know that prototypes are invaluable to any software or web project. Prototypes are a quick way to get the product in your hands, offering you a true feel for how it'll function. Not only does this mean quicker sign-off from important stakeholders, it also means we can iron out any issues before a single line of code is written.
A people-centric design process image

A people-centric design process

User experience Design
Great UX design captures the attention, sticks in the memory, and compels users to take action. It results in products that are so intuitive that users don't give a second thought to the design. We create digital products that do all that, and more.
Beautiful visual design image

Beautiful visual design

User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Feature cards - borderless

A borderless feature card expands to its container and has no default border - this can be determined by its parent template

Turn your ideas into a reality image

Turn your ideas into a reality

Workshops
Workshops are at the heart of our Architecture & Design process. We get up on a white board with you and think visually about what you're trying to achive. We scribble. We explore. We create. From there, we design and build your prototype.
Rapid progress & visual results image

Rapid progress & visual results

Prototypes
As digital engineers, we know that prototypes are invaluable to any software or web project. Prototypes are a quick way to get the product in your hands, offering you a true feel for how it'll function. Not only does this mean quicker sign-off from important stakeholders, it also means we can iron out any issues before a single line of code is written.
A people-centric design process image

A people-centric design process

User experience Design
Great UX design captures the attention, sticks in the memory, and compels users to take action. It results in products that are so intuitive that users don't give a second thought to the design. We create digital products that do all that, and more.
Beautiful visual design image

Beautiful visual design

User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Feature cards - borderless inside a container

Turn your ideas into a reality image

Turn your ideas into a reality

Workshops
Workshops are at the heart of our Architecture & Design process. We get up on a white board with you and think visually about what you're trying to achive. We scribble. We explore. We create. From there, we design and build your prototype.
Rapid progress & visual results image

Rapid progress & visual results

Prototypes
As digital engineers, we know that prototypes are invaluable to any software or web project. Prototypes are a quick way to get the product in your hands, offering you a true feel for how it'll function. Not only does this mean quicker sign-off from important stakeholders, it also means we can iron out any issues before a single line of code is written.
A people-centric design process image

A people-centric design process

User experience Design
Great UX design captures the attention, sticks in the memory, and compels users to take action. It results in products that are so intuitive that users don't give a second thought to the design. We create digital products that do all that, and more.
Beautiful visual design image

Beautiful visual design

User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Feature Skewed cards

Turn your ideas into a reality image

Turn your ideas into a reality

Workshops
Workshops are at the heart of our Architecture & Design process. We get up on a white board with you and think visually about what you're trying to achive. We scribble. We explore. We create. From there, we design and build your prototype.
Rapid progress & visual results image

Rapid progress & visual results

Prototypes
As digital engineers, we know that prototypes are invaluable to any software or web project. Prototypes are a quick way to get the product in your hands, offering you a true feel for how it'll function. Not only does this mean quicker sign-off from important stakeholders, it also means we can iron out any issues before a single line of code is written.
A people-centric design process image

A people-centric design process

User experience Design
Great UX design captures the attention, sticks in the memory, and compels users to take action. It results in products that are so intuitive that users don't give a second thought to the design. We create digital products that do all that, and more.
Beautiful visual design image

Beautiful visual design

User Interface Design
We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Beautiful visual design

User Interface Design

We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Beautiful visual design

User Interface Design

We design user interfaces that are as intuitive as they are beautiful. And we think both are equally important. Ease-of-use is integral to a smooth user experience, while carefully-crafted aesthetics make your project stand-out from the crowd and stick in the mind.

Icons

Validating your idea icon
cost-effective.svg
Validating your idea icon
location.svg
Validating your idea icon
visual.svg
Validating your idea icon
books.svg
Validating your idea icon
tech.svg
Validating your idea icon
robot.svg
Validating your idea icon
deep-understanding.svg
Validating your idea icon
custom-built.svg
Validating your idea icon
our-knowledge.svg
Validating your idea icon
feature-list.svg
Validating your idea icon
analytical.svg
Validating your idea icon
startup.svg
Validating your idea icon
suit-case.svg
Validating your idea icon
games.svg
Validating your idea icon
coffee.svg
Validating your idea icon
clickable-prototype.svg
Validating your idea icon
showcase.svg
Validating your idea icon
invent.svg
Validating your idea icon
people.svg
Validating your idea icon
engaging.svg
Validating your idea icon
seo-get-found.svg
Validating your idea icon
digital-marketing.svg
Validating your idea icon
social-meetup.svg
Validating your idea icon
sme.svg
Validating your idea icon
convertleads.svg
Validating your idea icon
glasses.svg
Validating your idea icon
future.svg
Validating your idea icon
collaborative.svg
Validating your idea icon
scalable.svg
Validating your idea icon
architecture.svg
Validating your idea icon
chat.svg
Validating your idea icon
fast.svg
Validating your idea icon
dogs.svg
Validating your idea icon
formal-interview.svg
Validating your idea icon
fruit.svg
Validating your idea icon
bike.svg
Validating your idea icon
angel-investor.svg
Validating your idea icon
sprint-plan.svg
Validating your idea icon
roi.svg
Validating your idea icon
designed-for-your-user.svg
Validating your idea icon
custom-software.svg
Validating your idea icon
secure.svg
Validating your idea icon
burger-and-drink.svg
Validating your idea icon
flexible-work.svg
Validating your idea icon
learning.svg
Validating your idea icon
enterprise.svg
Validating your idea icon
reliable-results.svg
Validating your idea icon
agile-development.svg
Validating your idea icon
mobile.svg
Validating your idea icon
cloud-compute.svg
Validating your idea icon
contact.svg
Validating your idea icon
blog.svg
Validating your idea icon
academy.svg
Validating your idea icon
approach.svg
Validating your idea icon
neon.svg
Validating your idea icon
history.svg
Validating your idea icon
ecommerce.svg
Validating your idea icon
cloud-database.svg
Validating your idea icon
culture.svg
Validating your idea icon
writing.svg
Validating your idea icon
startup.svg
Validating your idea icon
team.svg
Validating your idea icon
digital-transformation.svg
Validating your idea icon
interaction.svg
Validating your idea icon
process.svg
Validating your idea icon
ai.svg
Validating your idea icon
pitchdecks.svg
Validating your idea icon
digital-marketing.svg
Validating your idea icon
illustration.svg
Validating your idea icon
branding.svg
Validating your idea icon
sme.svg
Validating your idea icon
about-us.svg
Validating your idea icon
work.svg
Validating your idea icon
architecture.svg
Validating your idea icon
web-dev.svg
Validating your idea icon
technologies.svg
Validating your idea icon
sprint.svg
Validating your idea icon
social-media.svg
Validating your idea icon
support.svg
Validating your idea icon
software-dev.svg
Validating your idea icon
join.svg
Validating your idea icon
arvr.svg
Validating your idea icon
pizza.svg
Validating your idea icon
learning.svg
Validating your idea icon
tick.svg
Validating your idea icon
enterprise.svg
Validating your idea icon
dna.svg

Timeline

Scrolling Cards