Layouts

The spatial arrangement of elements is key to the Fluxive Blueprint Theme. We utilize a grid-based background and specific container widths to create a sense of structure.

The Grid Background

To give the application a "technical" feel, the main background canvas is not just a solid color. It is a subtle grid pattern on top of the deep gray background.

• Base Color: #111827 (Gray 900)
• Pattern: 1px lines of rgba(255, 255, 255, 0.03)
• Grid Size: 32px x 32px

This subtle texture prevents the large dark areas from feeling "dead" or empty.

Page Structure

Container

Pages typically use a centered container layout for readability.

• Max Width: 1280px (standard desktop) or 1440px (dashboard view)
• Padding: 24px horizontal padding on mobile, 32px on desktop.

Sidebar Layout

For documentation and complex apps (like Studio), we use a persistent sidebar.

• Width: 280px or 320px
• Position: Fixed left
• Styling: Uses the Glassmorphism style to sit "above" the main content.

Spacing System

We adhere to a 4px baseline grid (Tailwind spacing scale). Common spacing values:

• 4px (0.25rem) - Tight spacing within components
• 8px (0.5rem) - Standard icon/text gap
• 16px (1rem) - Content padding, standard gap between elements
• 24px (1.5rem) - Card padding
• 32px (2rem) - Section separation
• 64px (4rem) - Major page sections