Pallas UI
DocsComponents
Core Concepts
    • Introduction
    • Getting Started
    • Theming
    • Color Tokens
    • Spacing & Sizing
    • Layout Guide
    • AspectRatio
    • Box
    • Flex
    • Grid
    • Shapes
Previews
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Breadcrumb
    • Button
    • Carousel
    • Checkbox
    • Combobox
    • Command
    • Date Picker
    • Form
    • Input
    • Input OTP
    • Label
    • MenuBar
    • Modal
    • Popover
    • Progress
    • Radio Group
    • Segmented
    • Select
    • Separator
    • Sheet
    • Sidebar
    • Skeleton
    • Slider
    • Spinner
    • Steps
    • Switch
    • Tabs
    • Textarea
    • Toast
    • Tooltip
    • Typography
  1. Theming
  2. Spacing & Sizing

Spacing & Sizing

Size and spacing tokens definitions used in Pallas UI design system.

Pallas UI uses a consistent sizing and spacing system to ensure proper layout and component proportions.

Control Heights

Small100px x 1.75rem
Medium100px x 2rem
Large100px x 2.5rem

Layout Spacing

Default Layout Spacing

Smallspacing.layout.default.sm
Mediumspacing.layout.default.md
Largespacing.layout.default.lg

Internal Layout Spacing

Smallspacing.layout.internal.sm
Mediumspacing.layout.internal.md
Largespacing.layout.internal.lg

Section Layout Spacing

Smallspacing.layout.section.sm
Mediumspacing.layout.section.md
Largespacing.layout.section.lg

Component Spacing

Gap Component

Smallspacing.gap.component.sm
Mediumspacing.gap.component.md
Largespacing.gap.component.lg

Gap Inline

Extra Smallspacing.gap.inline.xs
Smallspacing.gap.inline.sm
Mediumspacing.gap.inline.md
Largespacing.gap.inline.lg

Padding

Padding Block

Smallspacing.padding.block.sm
Mediumspacing.padding.block.md
Largespacing.padding.block.lg

Padding Inline

Extra Smallspacing.padding.inline.xs
Smallspacing.padding.inline.sm
Mediumspacing.padding.inline.md
Largespacing.padding.inline.lg

Built with ❤️ by the carbonteq team. The source code is available on GitHub.

© 2025 Pallas UI. All rights reserved.