Tetzu Design System

System Design

A modern, gradient-led UI foundation for technology consulting. Keep experiences consistent, polished, and immediately recognizable.

Primary Gradient

linear-gradient(to right, #22D3EE, #3B82F6)

Logo Gradient

linear-gradient(to right, #0891B2, #2563EB)

Background Overlay

linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(239,246,255,0.7), rgba(236,254,255,0.6))

Design Principles

The north star for layout, motion, and visual hierarchy

Clarity First

Typography, whitespace, and contrast make content effortless to scan.

Depth With Intent

Glass surfaces and elevation build hierarchy without clutter.

Motion With Purpose

Subtle scale and shadow cues reinforce interactivity and focus.

Color Foundations

Core cyan and blue palette paired with neutral surfaces

Primary Cyan

The core gradient family used for CTAs, highlights, and visual energy.

Cyan 50

#ECFEFF

Cyan 100

#CFFAFE

Cyan 200

#A5F3FC

Cyan 300

#67E8F9

Cyan 400

#22D3EE

Cyan 500

#06B6D4

Cyan 600

#0891B2

Blue Pairing

Blue tones that balance the gradient system and anchor readability.

Blue 400

#60A5FA

Blue 500

#3B82F6

Blue 600

#2563EB

Blue 700

#1D4ED8

Neutrals

Calm surfaces for layouts, cards, and backgrounds.

White

#FFFFFF

var(--color-bg)

Bg Subtle

var(--color-bg-subtle)

Surface 1

var(--color-surface-1)

Surface 2

var(--color-surface-2)

Border

var(--color-border)

Text

Text colors tuned for clarity and hierarchy.

Text Muted

var(--color-text-muted)

Text Subtle

var(--color-text-subtle)

Text

var(--color-text)

Gradient Palette

Dynamic gradients for buttons, backgrounds, and visual hierarchy

Primary Gradient

Primary brand gradient for CTAs and key surfaces

linear-gradient(to right, #22D3EE, #3B82F6)

Logo Gradient

Logo treatments and wordmark highlights

linear-gradient(to right, #0891B2, #2563EB)

Button Hover

Hover + focus states for primary actions

linear-gradient(to right, #0891B2, #2563EB)

Icon Gradient

Icon containers, badges, and highlights

linear-gradient(to bottom right, #22D3EE, #3B82F6)

WhatsApp contact surfaces and integrations

linear-gradient(to bottom right, #4ADE80, #16A34A)

Background Overlay

Frosted overlays for hero and section backdrops

linear-gradient(to bottom right, rgba(255,255,255,0.8), rgba(239,246,255,0.7), rgba(236,254,255,0.6))

Component Patterns

Primary UI building blocks with gradient-led styling

Buttons

Primary CTA

className="btn-base btn-primary btn-size-lg"

WhatsApp Action

className="btn-base btn-whatsapp btn-size-lg"

Icon Containers

Gradient Icon

Use for key features

className="w-16 h-16 rounded-2xl icon-gradient flex items-center justify-center"

Security Badge

Icons stay white

className="w-16 h-16 rounded-2xl icon-gradient flex items-center justify-center"

Cards

Glass Card

Primary card style with depth and soft interaction.

Elevated Card

Use for feature callouts or tiered content.

Interactive Card

Hover adds lift and soft glow for emphasis.

Guidelines

Use the Primary Gradient for CTAs and hero surfaces. Reserve the Logo Gradient for wordmark treatments and high-impact accents.

Glass cards use backdrop blur with translucent fills. Pair them with subtle borders and elevated shadows for depth.

Icons live inside gradient containers for emphasis. Keep the icon set consistent (Lucide) and avoid mixing styles.

Typography

Clean, modern typefaces for clear hierarchy

Font Family

Inter

font-family: var(--font-inter), -apple-system, BlinkMacSystemFont, sans-serif;

Font Weights

Regular (400)--font-weight-normal

Medium (500)--font-weight-medium

Semibold (600)--font-weight-semibold

Bold (700)--font-weight-bold

Extrabold (800)--font-weight-extrabold

Type Scale

Heading XL

text-6xl md:text-8xl font-extrabold

Heading Large

text-4xl md:text-5xl font-bold

Heading Medium

text-2xl font-bold

Body Large

text-lg text-[var(--color-text-subtle)]

Body Regular

text-base

Body Small

text-sm text-[var(--color-text-muted)]

Icon Library

Lucide icons inside gradient containers

MessageCircle

Communication

Calendar

Time

Mail

Communication

Cloud

Tech

Users

People

Code

Tech

Zap

Energy

Shield

Security

Database

Tech

Settings

Config

Sparkles

Visual

Palette

Visual

Type

Text

Layers

Layout

Box

Objects

Grid3x3

Layout

import { IconName } from 'lucide-react';

Depth & Layout

Elevation, blur, spacing, and rounded geometry

Border Radius

Small

12px

var(--radius-sm)

Medium

16px

var(--radius-md)

Large

24px

var(--radius-lg)

XLarge

28px

var(--radius-xl)

Pill

999px

var(--radius-pill)

Box Shadows

shadow-lg

Default card shadow

shadow-xl

Elevated elements

shadow-2xl

Hero sections

Backdrop Blur

backdrop-blur-md

Standard glass effect

backdrop-blur-lg

Enhanced blur

backdrop-blur-xl

Maximum frosted glass

Spacing Scale (8pt)

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

24px

--space-6

32px

--space-7

48px

--space-8

64px