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

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 cloud-compute.svg
Validating your idea icon contact.svg
Validating your idea icon blog.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 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 tick.svg
Validating your idea icon enterprise.svg
Validating your idea icon dna.svg