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

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