@vibe-labs/design-layouts

Layout tokens, alignment, and safe area utilities for the Vibe Design System — flexbox/grid alignment shorthands and notch-aware safe area spacing.

Installation

@import "@vibe-labs/design-layouts";

Tokens

CSS custom properties defined in @layer vibe.tokens:

Safe Area Insets

Token	Default
--safe-top	env(safe-area-inset-top, 0px)
--safe-bottom	env(safe-area-inset-bottom, 0px)
--safe-left	env(safe-area-inset-left, 0px)
--safe-right	env(safe-area-inset-right, 0px)

Utilities / Generated Classes

Alignment (alignment.g.css)

Generated into @layer vibe.utilities:

• Place Items: .place-items-{start|center|end|stretch}
• Place Content: .place-content-{start|center|end|stretch|between|around|evenly}
• Justify Content: .justify-{start|center|end|between|around|evenly}
• Align Items: .items-{start|center|end|baseline|stretch}
• Align Self: .self-auto · .self-{start|center|end|stretch}

Safe Area (safe-area.g.css)

Utilities for notched / dynamic island devices:

• Padding: .pt-safe · .pb-safe · .pl-safe · .pr-safe · .px-safe · .py-safe · .p-safe
• Margin: .mt-safe · .mb-safe · .ml-safe · .mr-safe · .mx-safe · .my-safe · .m-safe
• Inset: .top-safe · .bottom-safe · .left-safe · .right-safe · .inset-safe · .inset-x-safe · .inset-y-safe

Dist Structure

File	Description
index.css	Barrel — imports all files below
layouts.css	Token definitions
alignment.g.css	Generated alignment utilities
safe-area.g.css	Generated safe area utilities

Dependencies

None — safe area tokens use env() with 0px fallbacks.

Build

npm run build

---

Usage Guide

Provides flexbox/grid alignment utilities and safe area spacing for notched devices in the Vibe Design System.

Import

@import "@vibe-labs/design-layouts";

Common Patterns

1. Centred hero section

<section class="flex flex-col items-center justify-center min-h-dvh gap-6">
  <h1 class="text-display-lg font-bold">Hero Title</h1>
  <p class="text-lg fg-secondary">Subtitle text</p>
  <button class="btn-lg">Get Started</button>
</section>

2. Grid with centred, non-stretching items

<div class="grid grid-cols-3 gap-6 place-items-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

3. Align a single item to center within its cell

<div class="grid grid-cols-2">
  <div>Left content</div>
  <div class="self-center">Vertically centred in its row</div>
</div>

4. Safe area padding for mobile apps (notch/dynamic island)

<header class="pt-safe px-4 bg-base sticky top-0 z-sticky">
  App Navigation
</header>

<footer class="pb-safe px-6 bg-base border-t border-subtle">
  Tab Bar
</footer>

5. Full-bleed layout that respects notch on all sides

<div class="p-safe min-h-dvh bg-background">
  <main>Content that avoids notched device edges</main>
</div>

6. Space content evenly across flex container

<div class="flex justify-evenly items-center h-16 bg-base">
  <a href="#">Home</a>
  <a href="#">Explore</a>
  <a href="#">Saved</a>
  <a href="#">Profile</a>
</div>

Token Reference

Token	Value	Use
--safe-top	env(safe-area-inset-top, 0px)	Notch / status bar area
--safe-bottom	env(safe-area-inset-bottom, 0px)	Home indicator area
--safe-left	env(safe-area-inset-left, 0px)	Side notch (landscape)
--safe-right	env(safe-area-inset-right, 0px)	Side notch (landscape)