Design System

Styleguide

A living reference for every visual element in the Turbo IT design system. Typography, colour, components, and animation — all in one place.

Typography Scale

Our type scale is built for clarity at every size. Based on Inter with a monospaced fallback for code.

Display · text-7xl font-bold

Display Text

H1 · text-6xl font-bold

Heading One

H2 · text-4xl font-bold

Heading Two

H3 · text-3xl font-semibold

Heading Three

H4 · text-2xl font-semibold

Heading Four

Body · text-base

Body text is used for the majority of content. It should be easy to read at any screen size with comfortable line-height and adequate contrast against the background.

Body Small · text-sm

Smaller body text for supporting content, meta information, and secondary descriptions. Still fully legible.

Caption · uppercase tracking-widest text-xs

Caption Text

Mono · font-mono text-sm

const turboIT = "premium digital experiences";

Colour Palette

Semantic colour tokens that adapt to light and dark themes automatically.

Background

--background

Foreground

--foreground

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Electric

--electric

Destructive

--destructive

Border

--border

Buttons

All button variants and sizes. Built with class-variance-authority for consistent styling.

Variants

Electric Accent

Sizes

With Icons

States

Cards

Standard cards and the signature GlowCard with hover glow effect.

Basic Card

The default card component with header, content, and footer slots.

Cards are the primary container for grouped content. They provide visual separation and hierarchy.

Glow Card

Hover to see the signature glow effect and subtle lift animation.

The GlowCard wraps the base Card with Framer Motion hover states for a premium interactive feel.

Accent Border

A card with a subtle electric border for emphasis and visual interest.

Use accent borders to draw attention to featured or highlighted content sections.

Badges & Chips

Compact labels for categorisation, status, and tagging.

Badge Variants

DefaultSecondaryOutlineDestructiveGhost

Tag Chips (dot variant)

Next.jsTypeScriptTailwind CSSReactFramer Motion

Tag Chips (border variant)

Web DesignE-commerceSEOIT Support

Form Inputs

Input fields, textareas, and selects with consistent focus and error states.

Default States

Text Input

Email Input

Select

Additional States

Filled Input

Disabled Input

Error State

Please enter a valid email address.

Textarea

Accordion

Collapsible content panels for progressive disclosure of information.

Pricing Cards

Three-tier pricing layout with a highlighted popular plan and electric accent.

Pricing

Transparent pricing, no surprises

Choose the plan that fits your ambition. All prices exclude VAT.

Starter

from

£299/month

Perfect for small businesses wanting a professional online presence.

Custom designed website
Mobile responsive
Basic SEO setup
Contact form
Hosting & SSL included
Monthly updates
Email support

Get Started

Growth

from

£499/month

For businesses ready to sell online and grow their customer base.

Everything in Starter
E-commerce / online orders
Payment processing
Inventory management
Monthly SEO work
Analytics & reporting
Priority support
Social media integration

Get Started

Scale

Custom

Bespoke solutions for complex requirements and larger businesses.

Everything in Growth
Custom web application
API integrations
Advanced functionality
Dedicated account manager
Same-day support
Strategy & consulting
Unlimited revisions

Let's Talk

Animations

Framer Motion presets used throughout the site. Click a button to preview each animation.

Trigger Animation

Click a button above to preview an animation.

Stagger Animation

Turbo IT