Spacing
Y3NKO uses Tailwind’s default spacing scale based on a 4px unit.
Spacing Scale
| Tailwind | Value | Usage |
|---|---|---|
1 | 4px | Icon-to-text gaps |
2 | 8px | Badge padding, tight spacing |
3 | 12px | Input padding |
4 | 16px | Card padding, standard gaps |
6 | 24px | Section content padding |
8 | 32px | Between major groups |
12 | 48px | Large section gaps |
16 | 64px | Section vertical padding (mobile) |
20 | 80px | Section vertical padding (desktop) |
24 | 96px | Hero section padding |
Container
Standard Container
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Page content */}
</div>Narrow Container
For search bars, CTA text, and focused content:
<div className="max-w-5xl mx-auto px-4">
{/* Narrow content */}
</div>Prose Container
For centered text content:
<div className="max-w-4xl mx-auto px-4">
{/* Article content */}
</div>Section Spacing
Vertical Section Padding
{/* Mobile-first with responsive */}
<section className="py-16 md:py-20 lg:py-24">
{/* Section content */}
</section>Section with Alternating Background
<section className="py-16 md:py-20 bg-[var(--paper)]">
{/* Light section */}
</section>
<section className="py-16 md:py-20 bg-white">
{/* White section */}
</section>Component Spacing
Card Padding
<Card className="p-4 md:p-6">
{/* Card content */}
</Card>Grid Gaps
{/* Card grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
{/* Cards */}
</div>
{/* Form fields */}
<div className="space-y-4">
{/* Stacked inputs */}
</div>
{/* Inline items */}
<div className="flex items-center gap-2">
{/* Icon + text */}
</div>Button Spacing
{/* Button group */}
<div className="flex gap-3">
<Button>Primary</Button>
<Button variant="outline">Secondary</Button>
</div>Common Patterns
Page Layout
<main className="min-h-screen">
{/* Hero with negative margin overlap */}
<section className="relative">
<HeroImage />
<div className="-mt-10 relative z-10">
<SearchBar />
</div>
</section>
{/* Content sections */}
<section className="py-16 md:py-20">
<Container>
<SectionHeading />
<div className="mt-8 md:mt-12">
<ContentGrid />
</div>
</Container>
</section>
</main>Card Layout
<article className="group">
{/* Image container */}
<div className="relative aspect-[4/3] overflow-hidden rounded-t-xl">
<Image />
</div>
{/* Content */}
<div className="p-4">
{/* Meta row */}
<div className="flex items-center justify-between mb-2">
<Location />
<Rating />
</div>
{/* Title */}
<h3 className="mb-2">Title</h3>
{/* Details */}
<div className="flex items-center gap-3 text-sm mb-3">
<span>3 beds</span>
<span>6 guests</span>
</div>
{/* Price */}
<p className="font-bold">GHS 850/night</p>
</div>
</article>Form Layout
<form className="space-y-6">
{/* Field group */}
<div className="space-y-4">
<div>
<Label className="mb-2">Email</Label>
<Input />
</div>
<div>
<Label className="mb-2">Password</Label>
<Input type="password" />
</div>
</div>
{/* Actions */}
<div className="flex justify-end gap-3 pt-4">
<Button variant="outline">Cancel</Button>
<Button>Submit</Button>
</div>
</form>Responsive Spacing
Use Tailwind’s responsive prefixes:
{/* Tighter on mobile, more generous on desktop */}
<div className="p-4 md:p-6 lg:p-8">
{/* Smaller gaps on mobile */}
<div className="gap-4 md:gap-6 lg:gap-8">
{/* Stack on mobile, row on desktop */}
<div className="flex flex-col gap-4 md:flex-row md:gap-6">Negative Margins
Use sparingly for overlapping elements:
{/* Search bar overlapping hero */}
<div className="-mt-10 relative z-10">
<SearchBar />
</div>
{/* Card image overlap */}
<div className="-mt-4 px-4">
<Image />
</div>Touch Targets
Minimum 44x44px for touch devices:
{/* Icon button with adequate size */}
<button className="p-3 min-w-[44px] min-h-[44px]">
<Icon className="w-5 h-5" />
</button>
{/* Link with padding for touch */}
<a className="inline-flex py-3 px-4">
Link Text
</a>