teppelin-labs-website/references/modern-one-step-solutions/DESIGN.md

name, colors, typography, spacing

name	colors	typography	spacing
International Precision	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #f9f9f9 #dadada #f9f9f9 #ffffff #f4f3f3 #eeeeee #e8e8e8 #e2e2e2 #1a1c1c #5a413a #2f3131 #f1f1f1 #8e7068 #e3bfb5 #b22d00 #ad2b00 #ffffff #d24115 #fffbff #ffb5a1 #5f5e5e #ffffff #e2dfde #636262 #5c5c5c #ffffff #757474 #fefcfb #ba1a1a #ffffff #ffdad6 #93000a #ffdbd1 #ffb5a1 #3b0900 #882000 #e5e2e1 #c8c6c5 #1c1b1b #474746 #e4e2e2 #c8c6c6 #1b1c1c #474747 #f9f9f9 #1a1c1c #e2e2e2	display headline-lg headline-lg-mobile headline-md body-lg body-md label-caps fontFamily fontSize fontWeight lineHeight letterSpacing Inter 120px 800 110px -0.04em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 64px 700 72px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 40px 700 44px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter 32px 600 40px -0.01em fontFamily fontSize fontWeight lineHeight Inter 20px 400 30px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 700 16px 0.1em	grid-unit gutter margin-desktop margin-mobile stack-sm stack-md stack-lg 8px 24px 64px 20px 16px 32px 80px

Brand & Style

This design system is built on the core tenets of Swiss Design (International Typographic Style). It conveys a brand personality that is objective, authoritative, and ruthlessly efficient. The target audience is professionals seeking "one-step solutions" who value clarity and industrial-grade reliability.

The visual style is characterized by:

• Mathematical Order: A rigid adherence to a modular grid system that dictates the placement of every element.
• Asymmetric Balance: Dynamism is achieved through the tension between large-scale typography and functional whitespace.
• Objectivity: Removing unnecessary decoration to let the content and typography communicate the message directly.
• Structural Integrity: Bold blocks of color and sharp, geometric containers that emphasize the "one-step" structural nature of the business.

Colors

The palette is rooted in a high-contrast, modernist tradition.

• Primary Orange (#F2572B): Used as a functional signal for actions and as a massive background fill for hero moments to command immediate attention.
• Dark Gray (#171717): The anchor color for primary typography and deep structural containers.
• Medium Gray (#4D4D4D): Used for secondary information and supporting grid lines.
• Light Gray (#DEDEDE): Provides a subtle, architectural alternative to pure white for backgrounds and surface divisions.

The color application should be "all-or-nothing"—use large flood fills of color rather than small accents to maintain the bold, modern aesthetic.

Typography

The typography system utilizes Inter to achieve a neutral, neo-grotesque look that prioritizes legibility and structural alignment.

Key principles:

• Extreme Scale: High contrast between massive display type (120px+) and functional body text.
• Tight Leading: Headlines utilize tight line-heights to create "blocks" of text that feel like solid geometric shapes.
• Alignment: Every text block must align strictly to the vertical and horizontal grid lines. Left-alignment is the default; center-alignment should be avoided.
• Caps for Labels: Small, all-caps labels are used for metadata and categorization to provide a technical, architectural feel.

Layout & Spacing

This design system employs a 12-column fixed grid on desktop and a 4-column fluid grid on mobile.

• The Grid as Design: In specific marketing layouts, the grid lines (1px width in #DEDEDE) may be visible to emphasize the Swiss Design aesthetic.
• Whitespace as Content: Large "voids" in the grid are intentional. Content should not be spread thin to fill space; rather, it should be grouped tightly to leave expansive areas of negative space.
• Reflow: On mobile, large headline blocks reflow to headline-lg-mobile and stack vertically, but they must maintain their sharp alignment to the left margin.

Elevation & Depth

To maintain the flat, modernist aesthetic of Swiss Design, this system rejects shadows and physical depth.

• Flat Layering: Hierarchy is created through color blocking and scale, not Z-axis elevation.
• Tonal Tiers: Dark Gray (#171717) is the base for depth. Light Gray (#DEDEDE) acts as a secondary surface.
• Sharp Borders: Use 1px or 2px solid borders in high-contrast colors (e.g., Orange on Black) to define sections without using shadows.
• Zero Blur: There are no blurs or gradients in this system. All transitions between colors and surfaces are "hard" and immediate.

Shapes

The shape language is strictly Geometric and Sharp.

• 0px Radii: All buttons, cards, input fields, and containers must have 0px corner radii. This reinforces the industrial, precise nature of the brand.
• The Circle Exception: Only the orange "Signal Circle" (as seen in the reference images) is permitted as a rounded element, used sparingly as a background graphic or an abstract focal point.
• Vector Icons: Icons should be stroke-based, using 2px weights and 0px joins/caps where possible to match the sharp UI.

Components

Logo & Identity

• Wordmark: The script wordmark is used for high-level brand presence (header, footer). It must always be high-contrast (White on Orange or Orange on Black).
• Logomark: The flower logomark is treated as a "seal of quality." Use it as a small anchor in the corner of cards or as a massive, low-opacity watermark in the background of sections.

Buttons

• Primary: Sharp-edged blocks filled with Primary Orange. Text is White or Black, Inter Bold, All-Caps.
• Secondary: Transparent background with a 2px Dark Gray border.
• Hover States: Instead of shadows, use a "Color Inversion" effect. A primary orange button becomes dark gray on hover.

Cards

• Cards do not have shadows. They are defined by 1px borders or solid background fills of Light Gray or Dark Gray.
• Padding inside cards should be generous (min. 32px) to allow the typography to breathe.

Input Fields

• Underline-only or full-border sharp rectangles.
• Error states are indicated by the Primary Orange color replacing the border/underline color.

Visual Blocks

• Use "The Power of the Grid" to create blocks where images and text are locked into specific column spans (e.g., Image spans 8 columns, text spans 4 columns). No centered text within blocks.