Spacing & Layout

IVRY nutzt die Tailwind-Standard-Skala (4 px Grid). Border-Radius startet bei lg — runder statt eckig, aber nie verspielt.

Spacing-Scale

Basis ist 4 px. Mehr als spacing-24 sollte man hinterfragen — meist ist das falscher Hero-Whitespace.

Klasse	Pixel	Visuell
p-px · m-px · gap-px	1px
p-0.5 · m-0.5 · gap-0.5	2px
p-1 · m-1 · gap-1	4px
p-2 · m-2 · gap-2	8px
p-3 · m-3 · gap-3	12px
p-4 · m-4 · gap-4	16px
p-5 · m-5 · gap-5	20px
p-6 · m-6 · gap-6	24px
p-8 · m-8 · gap-8	32px
p-10 · m-10 · gap-10	40px
p-12 · m-12 · gap-12	48px
p-16 · m-16 · gap-16	64px
p-20 · m-20 · gap-20	80px
p-24 · m-24 · gap-24	96px

Border-Radius

Cards nutzen rounded-xl (12 px), Inputs rounded-md (6 px), Avatare rounded-full. rounded-none vermeiden — wirkt aus der Zeit gefallen.

rounded-none

rounded-sm

2 px

rounded

4 px

rounded-md

6 px

rounded-lg

8 px

rounded-xl

12 px

rounded-2xl

16 px

rounded-3xl

24 px

rounded-full

9999 px

Shadows

Schatten bitte sparsam — im Dark-Mode fast nie, im Light-Mode nur für Elevation-Semantik.

shadow-xs

Sehr subtil — für Inputs im Focus.

shadow-sm

Standard für Cards in Listen.

shadow-md

Elevation bei Hover.

shadow-lg

Dropdown-Menüs, Popovers.

shadow-xl

Modal- und Drawer-Overlays.

shadow-2xl

Nur für Hero-Cards auf Landing.

Breakpoints

Tailwind v4 Default. Mobile-first — Basis ist immer kleinstes Screen, dann hochskalieren.

Prefix	Min-Width	Einsatz
sm:	640 px	Small Tablet, große Phones
md:	768 px	Tablet, landscape Phone
lg:	1024 px	Kleine Desktops, große Tablets
xl:	1280 px	Standard-Desktop
2xl:	1536 px	Große Screens

Container

max-w-7xl für Landing + Portal-Content, max-w-3xl für Prose. Immer zentriert via mx-auto.

vue

<!-- Standard-Container: max-w-7xl mit responsivem Padding -->
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
  <!-- Content -->
</section>

<!-- Prose-Container für Fließtext: max-w-3xl -->
<article class="mx-auto max-w-3xl px-4">
  <!-- Blog-Content -->
</article>