Swiss Style
Swiss design-inspired landing page with clean typography and grid-based layouts.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | #000000 | Primary text color (black). |
| backgroundColor | string | #ffffff | Clean white background. |
| accentColor | string | #ef4444 | Minimal accent color (red). |
| fontWeight | string | 400 | Typography weight (300-700). |
| gridColumns | number | 12 | Number of grid columns. |
When to Use
Excellent for professional services, architecture firms, and Next.js corporate sites that want a clean 'Swiss Style' aesthetic. Use this full-page template for a sophisticated experience with precise grids, bold Sans-Serif typography, and red accent highlights.
Best Practices
Maintain consistent spacing within your design system by respecting the strict 12-column grid. Follow React best practices by pairing it with bold Helvetica-style typography. Optimize for performance by using efficient CSS grid transforms.
Why This Component Matters
Swiss design (International Typographic Style) communicates structural clarity and professional integrity. This production-ready UI template helpsคุณ build an interface that feels authoritative and timeless, focusing the user's focus on your core message.
FAQ
QWhat is the primary font?
The Swiss aesthetic works best with heavy Sans-Serif fonts; the template is designed to scale with weight-balanced typography (`fontWeight`).
QCan I change the grid columns?
Yes, the `gridColumns` prop (default 12) allows you to adjust the underlying layout system for more or less complex content structures.
QHow 'Swiss' is the design?
The design removes all non-essential decorative elements, relying on precise grids and high-contrast typography to create a premium, editorial atmosphere.
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.