Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | UILORA | Large header title text (displayed in 6xl bold). |
| description | string | Precision-crafted component library for modern web interfaces. | Main block description text. |
| accentColor | string | #ff3b30 | Accent color hex for the floating circle and bottom dot highlight. |
When to Use
Perfect for typography showcases, design systems, and Next.js applications that want a clean Swiss-style aesthetic. Use this layout to communicate objective clarity, precision, and structural honesty.
Best Practices
Adhere to a strict 8px grid for consistent spacing. Use sans-serif fonts to maintain the Swiss feel. The accentColor should be used sparingly — one vivid pop against the neutral grey grid.
Why This Component Matters
Swiss design aesthetics communicate technical reliability and timeless craft. This Uilora-branded template reflects a brand identity rooted in design history while staying modern and production-ready.
FAQ
QIs the grid rigid?
Yes, the layout follows a strict Swiss column system to ensure perfect alignment and mathematical balance across all screen sizes.
QWhat does the accent color control?
It drives the floating red circle in the large block and the third color dot in the bottom row — used sparingly per Swiss design philosophy.
QCan I change the year?
The year '(2024)' is hardcoded as a Swiss editorial convention. Clone the component to make it dynamic.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.
Botanic Layout
Organic bento grid with botanical themes, curved shapes, and Uilora branding.