---
version: alpha
name: "Swiss"
description: "黒、白、そして 1 色のシグナルレッド。厳格なグリッドの上で。 Swiss は国際タイポグラフィ様式に沿っています。大きなグロテスク書体、厳格なグリッド、直角の角、たっぷりの白。色は赤だけで、ごく限られた場所に現れます。"
colors:
  primary: "#D70015"
  on-primary: "#FFFFFF"
  secondary: "#0A0A0A"
  tertiary: "#7A7A7A"
  neutral: "#595959"
  surface: "#FFFFFF"
  on-surface: "#0A0A0A"
typography:
  display-lg:
    fontFamily: "Archivo"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: "Archivo"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: "Archivo"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: "Archivo"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.25
  body-md:
    fontFamily: "Archivo"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: "Archivo"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.01em
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 4px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Swiss は国際タイポグラフィ様式に沿っています。大きなグロテスク書体、厳格なグリッド、直角の角、たっぷりの白。色は赤だけで、ごく限られた場所に現れます。

## Colors

- **primary (#D70015):** シグナルレッド。主なアクションと重要なハイライトだけに使います。
- **on-primary (#FFFFFF)**
- **secondary (#0A0A0A):** 黒。コントラストをつけたいセクションのベタ塗りのブロックに使います。
- **tertiary (#7A7A7A):** ミッドグレー。補助的なデータ用。
- **neutral (#595959):** ニュートラルグレー。キャプションとラベル用。
- **surface (#FFFFFF):** 純白。ダークモードは純黒。
- **on-surface (#0A0A0A)**

## Typography

全体を Archivo で統一。見出しは非常に大きなサイズの太字で字間を詰め、本文は 16px のレギュラー。小さなラベルは大文字にして字間を広げてもかまいません。

## Layout

最大 1440px の厳格な 12 カラムグリッド、ガターは 16px、余白の単位は 8px。すべてをグリッドに揃え、意図的に空のカラムを残します。

## Shapes

どこも直角（角の半径 0px）。ヘアラインの 1px の枠線で、影は使いません。

## Components

ボタンは赤か黒のベタ塗りの長方形。ナビゲーションはただのテキスト。表とリストは水平の罫線だけを使います。

## Do's and Don'ts

- 見出しをページでいちばん大きな要素にする。
- グリッドに空のカラムを残す。
- 角を丸めたり、影を加えたりしない。
- 装飾のために赤を使わない。