@vibe-labs/design-layouts

Layout tokens, alignment, and safe area utilities for the Vibe Design System.

Usage

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

Contents

Tokens (layouts.css)

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)

Generated Utilities

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