HELVETIKA

SPECIMEN 001 — DESIGN SYSTEM
Swiss International Typographic Style applied to B2B SaaS landing page components. Maximum information, minimum decoration.
Philosophy
Objective communication through systematic design.

The Swiss International Typographic Style demands that design serve clarity above all. Every element is placed on the grid, every decision justified by function. Ornament is noise; structure is signal. This system applies those principles to enterprise SaaS interfaces — maximum information density, minimum visual interference.

Grid as Foundation
Typography as Primary Tool
Objective Over Subjective
Reduction to Essentials
Color Palette, Patterns & Textures
White#FFFFFF
Black#000000
Signal Red#E30613
Medium Gray#6E6E6E
Light Gray#F2F2F2
PATTERN — 12-COLUMN GRID WITH REGISTRATION MARKS
◆ COL 1◆ COL 2◆ COL 3◆ COL 4 ◆ COL 5◆ COL 6◆ COL 7◆ COL 8 ◆ COL 9◆ COL 10◆ COL 11◆ COL 12
BASELINE GRID — 24PX INTERVALS

This paragraph sits on a 24px baseline grid. In the Swiss tradition, the baseline grid unifies all vertical rhythm across the page, creating harmony between text, images, and white space.

SWISS CROSS REGISTRATION MARKS — ALIGNMENT REFERENCE
Typography
H1 — 72/76General Sans 700
Precision
H2 — 48/53General Sans 700
Grid Systems
H3 — 36/41General Sans 600
Objective Design
H4 — 24/30General Sans 600
Information Architecture
H5 — 18/24General Sans 600
Typographic Hierarchy for Clarity
H6 — 14/20General Sans 700
Label / Overline Treatment
Body — 16/26Satoshi 400
Typography is the primary design tool in the Swiss tradition. The grid provides structure; type provides meaning. No ornament is necessary when the hierarchy communicates clearly.
Caption — 12/18Satoshi 400
Fig. 01 — Müller-Brockmann, Grid Systems in Graphic Design, 1981
Label — 11/14General Sans 600
System Component Identifier
Layout & Spacing
4px — xs
8px — sm
16px — md
24px — lg
32px — xl
48px — 2xl
64px — 3xl
96px — 4xl
Iconography
FUNCTIONAL ICONS — GEOMETRIC PRIMITIVES DERIVED FROM THE GRID
Dashboard
Menu
Search
↗
Export
Expand
Notification
Imagery & Media
16 : 9 — HERO IMAGE
1 : 1 — AVATAR
4 : 3 — CARD
ALL IMAGERY MUST ADHERE TO GRID PROPORTIONS — NO DECORATIVE PHOTOGRAPHY
Navigation
Inputs
Actions
HOVER STATES: Primary→Red / Secondary→Red border / Ghost→Red
Feedback
Error
Validation failed. Please check required fields and resubmit.
Success
Configuration saved. Changes applied to all connected systems.
Info
Scheduled maintenance window: Sunday 02:00–04:00 UTC.
LOADING STATE
Processing — 65% complete
Content Blocks
GRID RATIO — 1:1.414 (√2)
The precision of this system eliminated every design inconsistency in our product. It is the grid itself that does the work.
ANNA KELLER
VP of Design, Systema AG
Callout
Systematic design reduces decision fatigue by 40% and increases team velocity across every product surface.
Pro Tip

Align all components to the 8px grid. Use 24px as the base module for section spacing. The grid is not a constraint — it is the framework for consistency.

87%
Faster Onboarding
3.2x
Design Velocity
100%
Grid Compliance
Data Display
DATA TABLE — STRUCTURED INFORMATION GRID
Module Status Requests Latency
Grid Engine Active 2.4M 12ms
Type System Active 1.8M 8ms
Color Logic Maintenance — —
Context Components
Build with
mathematical
precision.

The grid is not a limitation. It is a framework for freedom. Structure your SaaS operations with the rigor of Swiss design principles.

Context Components — Feature Blocks
01
Grid Engine
Mathematical layout algorithms that enforce consistency across every surface of your application. No deviation.
02
Type System
Hierarchical scale based on rational intervals. Every size, weight, and spacing value derived from a unified ratio.
03
Color Logic
Minimal palette enforced by system rules. One accent. Black and white. Gray for secondary. Absolute discipline.
Context Components — Metrics
99.9%
Uptime Guarantee
2.4M
Active Users
48ms
Avg Response
340+
Enterprise Clients
Context Components — Logo Bar
Systema
Gridwerk
Rationaal
Struktur
Präzision
Context Components — Pricing
Starter
$29 /mo
For small teams beginning to implement systematic design.
  • 5 team members
  • Core grid engine
  • Basic type system
  • Email support
Professional
$79 /mo
Full system access for growing design organizations.
  • 25 team members
  • Advanced grid engine
  • Complete type system
  • Color logic module
  • Priority support
Enterprise
Custom
Bespoke implementation for organizations requiring absolute control.
  • Unlimited members
  • Custom grid rules
  • White-label system
  • Dedicated engineer
  • SLA guarantee
Context Components — Trust Badges
SOC2
Certified
GDPR
Compliant
99.9%
Uptime SLA
ISO
27001

Start building with
systematic precision.

HELVETIKA

Systematic design for systematic companies. Built on the principles of the Swiss International Typographic Style.

Product

Company

Legal

© 2026 Helvetika Systems AG. All rights reserved. SPECIMEN 001 — SWISS B2B DESIGN SYSTEM