High-Contrast Swiss Tech — Swiss-Inspired Grayscale Design System & Template

Overview

This design system is characterized by a functional, dense, and precise aesthetic. It leverages high-contrast typography against a neutral, grayscale palette to create a clear and systematic visual hierarchy. The mood is professional, technical, and Swiss-inspired, prioritizing clarity and information density over decorative elements. Layouts are built on a rigid grid, reinforced by fine borders and a limited set of sharp corner radii, giving the interface a structured and deliberate feel.

Colors

The color palette is fundamentally grayscale, creating a neutral backdrop for content. The system achieves depth through subtle variations in light and dark shades rather than color.

• primary: A deep, near-black used for high-priority actions, strong headings, and primary interactive elements. It provides strong contrast against light backgrounds.
• background: A light, neutral gray used for the main page background, providing a soft foundation for content.
• surface & surface-soft: White and off-white are used for cards, containers, and alternate section backgrounds. These lighter surfaces help to delineate content blocks.
• text & text-muted: Primary text is a dark charcoal, ensuring excellent readability. Muted text is a mid-gray, used for secondary information, captions, and labels to create a clear information hierarchy.
• border: A light gray is used consistently for all borders, from fine dividers to component outlines. This creates a sense of structure and organization.
• accent: A subtle, cool gray is used sparingly for informational accents, such as labels or key terms in a heading, without breaking the overall monochrome theme.
• band-dark: A dark gray is used for full-width sections, creating a "band" of contrast for features like a newsletter signup or pre-footer content.
• danger: A bright red is used exclusively for indicating a high-priority status, such as a notification badge.

Typography

Typography is a core component of this design system, with a strong emphasis on hierarchy and precision. It uses the Geist sans-serif font family for most text and Geist Mono for technical or uppercase labels, creating a systematic and modern feel.

• h1, h2, h3: Headings are large, bold, and use tight letter-spacing to create a strong, impactful presence. The hierarchy is clear, with H1 being the largest and most prominent. They are used to establish the primary structure of a page.
• body: The base body text is a standard 16px size with a comfortable line-height of 1.6, optimized for readability.
• small: A smaller text size is used for navigation, button labels, and secondary details. It often appears with a font-weight of 500 or 600.
• mono: The Geist Mono font is used for specific purposes like uppercase category labels, badges, and counters. It reinforces the system's technical and precise nature. Letter spacing is often applied to make these labels more distinct.

Layout

The layout is built on a strong, systematic grid that emphasizes alignment and consistency.

• Containers: A main container with a max-width of 1360px is used to constrain content on larger screens. Inner content often uses responsive padding defined by clamp(24px, 5vw, 64px).
• Grid: The system extensively uses CSS Grid for major page sections, employing multi-column layouts (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) to organize content into dense but legible blocks.
• Spacing: A defined set of spacing tokens (--space-9, --space-10, etc.) ensures consistent vertical rhythm between sections. The spacing is generous, preventing the dense interface from feeling cluttered.
• Density: The design is information-dense, using 1px borders and fine lines (gap: 1px; background-color: var(--color-border)) to create structured, table-like layouts for feature grids.

Elevation & Depth

The design system uses a flat aesthetic, with a strong reliance on fine borders rather than shadows to create depth and structure.

• Surfaces: Depth is primarily communicated through distinct background colors on different surfaces, such as the main background, surface-soft, and surface.
• Borders: 1px borders are the primary tool for defining components, sections, and grid cells. They create a clear, blueprint-like structure. The border color is consistently a light gray.
• Shadows: Shadows are used minimally and are very subtle. They appear primarily on interactive elements like hover states or floating panels to indicate elevation with a very faint box-shadow.

Shapes

The shape language is sharp, precise, and understated, reinforcing the systematic feel of the design.

• Corners: The corner radii are very small, typically ranging from 3px to 6px (--radius-sm, --radius-md). This results in sharp, rectangular shapes for cards, buttons, and inputs.
• Pills: full (9999px) rounding is used exclusively for status indicators, avatars, and notification dots.
• Borders: The consistent use of 1px borders gives all components a defined, "drawn" quality, contributing to the technical and grid-heavy aesthetic.

Components

Components are designed with a focus on function, consistency, and clarity, using the foundational system of tokens.

button

Buttons are rectangular with small corner radii. The primary button is a solid dark block with white text, while the secondary button is white with a dark border and text. They have concise, centered labels and often include icons. Padding is uniform, and they come in different sizes for various contexts (e.g., header vs. hero).

card

Cards are white or off-white blocks defined by a 1px border and a small corner radius. They serve as containers for content blocks, feature descriptions, or UI mockups, helping to organize information within the grid system. They often have internal padding.

input

Form inputs, like email fields, are rectangular with a 1px solid border and a small radius. They have a clean, minimal appearance, with placeholder text in a muted gray color. Focus states are indicated by a change in border color.

navigation

The header navigation consists of a logo, a list of links, and action buttons. Links have a consistent font size and color, with the active state indicated by a solid font weight and an underline. The navigation is clean, text-based, and horizontally aligned.

badge

Badges are used to indicate status, such as "New". They are small, pill-shaped or slightly rounded, and typically feature uppercase mono text with a border and a distinct text color (e.g., the success green). They are concise and visually distinct from the main text.

Do's and Don'ts

Do

• Use the predefined grayscale color palette for all UI elements to maintain a neutral and systematic look.
• Apply the Geist and Geist Mono font families for all text to ensure typographic consistency.
• Use 1px borders to structure layouts and define component boundaries instead of relying on shadows for depth.
• Adhere to the small corner radius (3px-6px) for all components like cards, buttons, and inputs to maintain a sharp, precise feel.
• Follow the established typographic scale for clear hierarchy, using tight letter-spacing for large headings.

Don't

• Do not introduce new colors outside of the defined grayscale and functional palette (like danger red).
• Avoid using large border radii or pill shapes for main UI components; reserve them for small status indicators.
• Do not use heavy drop shadows or beveling, as the design language is fundamentally flat and border-driven.
• Do not use line heights that are too loose for headings; the tight, compact line spacing is key to the visual style.
• Do not deviate from the established spacing scale, as consistent spacing is critical for the system's structured and organized appearance.