Design System

Zentrale Referenz für alle Design Standards, Komponenten und Stilelemente der SprintCX Website.

Typografie

H1 Heading

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

H2 Heading

text-3xl md:text-4xl font-bold font-sans

H3 Heading

text-2xl md:text-3xl font-bold font-sans

H4 Heading

text-xl md:text-2xl font-bold font-sans

Body Large

text-lg font-semibold font-sans

Body Text

text-base font-sans

Small Text

text-sm font-sans

Nunito Example

Lato Example

font-sans (Inter), font-nunito, font-lato

Farbpalette

zoho-red#E42527
zoho-blue#226DB4
zoho-green#009C3D
zoho-yellow#F7A81B
dark-gray#333333
mid-gray#666666
light-gray#F5F5F5
white#FFFFFF

Buttons

variant="default"
variant="secondary"
variant="outline"
variant="ghost" | size="sm"
variant="destructive" | size="lg"
disabled

Formular-Elemente

Cards / Boxen

Blog Post Card
Beispiel für Blog Card

Content...

Service Card

Service description.

Case Study Placeholder

Icons & Grafiken

Lucide React Icons, SVGs in /public, Images optimized with next/image

Layout Komponenten

container mx-auto max-w-7xl px-4 lg:px-8
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6
section py-16
max-w-6xl mx-auto px-4 sm:px-6 lg:px-8

Spezial-Komponenten

Accordions, Tabs, Testimonials etc. use Shadcn/Radix or custom blocks from components/blocks/

Accordion Example
Custom implementation with Tailwind + Radix.
Testimonial
"Great service!" - Client

Shadows, Border-Radii, Transitions

shadow-smmdlg2xl
rounded-nonesmlg3xl

Transitions: transition-all duration-300 ease-in-out hover:scale-105