Swiss Design (International Typographic Style)

Swiss Design (International Typographic Style) is a sub-style reference within the design-it skill family, built around three core principles: mathematical grids (everything aligns to a strict underlying grid, with asymmetry preferred over centering), sans-serif typography (Helvetica as the canonical choice, set flush-left with ragged-right alignment), and objective, documentary-style photography rather than stylized illustration. It is explicitly a child reference of design-it and is not meant to be triggered directly - it applies when a parent design-it request matches this aesthetic.

Use this sub-style when a UI needs the disciplined, grid-driven look of mid-century Swiss typographic design: huge contrast between massive headers (e.g. 6rem/60px) and small body text, a near-monochrome palette, and deliberate negative space as a structural element. The style's own rules are explicit about what to avoid: never center-align text, never use serif fonts, and never use drop shadows - all of which would break the flat, grid-disciplined look this style is built around.

The web implementation uses CSS Grid with a 12-column grid-template-columns, where a header spans most columns while deliberately leaving space empty (grid-column: 1 / 11) and body content is indented into a narrower asymmetrical column (grid-column: 4 / 9), styled in Helvetica Neue/Inter/Roboto with a single accent color, #E2001A ("Classic Swiss Red"). The four app implementations reproduce the same asymmetry with platform-native layout primitives: SwiftUI uses alignment: .leading everywhere with a Spacer().frame(width:) to push content off the left margin (never .center); Flutter mandates CrossAxisAlignment.start and pairs a fixed-width SizedBox with an Expanded widget in a Row; React Native contrasts HelveticaNeue-CondensedBlack headers against HelveticaNeue-Regular body text inside a flexDirection: 'row' layout; Jetpack Compose combines a Row, a fixed Spacer, and a Column with Modifier.weight(1f), using plain black Dividers as harsh horizontal structural rules.

.swiss-header {
  grid-column: 1 / 11;
  font-size: 6vw;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.swiss-accent { color: #E2001A; }

As a design-it sub-style, it's invoked through the parent skill's style-matching rather than called on its own, and is meant to be applied consistently across web CSS and the four listed app frameworks (SwiftUI, Flutter, React Native, Jetpack Compose) for a single project.

Designers and developers building an interface that wants the disciplined, high-contrast look of Swiss/International Typographic Style - strict grids, Helvetica, one saturated accent color, and asymmetrical negative space - across web and native mobile platforms with matching implementation patterns for each.