---
version: alpha
name: "Paper"
description: "落ち着いて、控えめで、読みやすい。丁寧に組まれた本のページのように。 Paper は、丁寧に組まれた本のページのように読めます。紙のような白、ほぼ黒のインク、しっかりしたセリフ体の見出し、そして深いインクブルーのアクセント 1 色。影やグラデーション、装飾ではなく、文字、罫線、余白で見せます。"
colors:
  primary: "#23408E"
  on-primary: "#FFFFFF"
  secondary: "#2F6B57"
  tertiary: "#A9741C"
  neutral: "#5C5F66"
  surface: "#F6F6F3"
  on-surface: "#1A1C20"
typography:
  display-lg:
    fontFamily: "Source Serif 4"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: "Source Serif 4"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: "Source Serif 4"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Source Serif 4"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Public Sans"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "Public Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 0px
  md: 2px
  lg: 4px
  xl: 8px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: "{spacing.md}"
---

## Overview

Paper は、丁寧に組まれた本のページのように読めます。紙のような白、ほぼ黒のインク、しっかりしたセリフ体の見出し、そして深いインクブルーのアクセント 1 色。影やグラデーション、装飾ではなく、文字、罫線、余白で見せます。

## Colors

- **primary (#23408E):** 深いインクブルー。主なアクションとリンク用。使うのは控えめに、1 画面に 1 回ほどが目安です。
- **on-primary (#FFFFFF)**
- **secondary (#2F6B57):** ボトルグリーン。2 番目のチャートとタグ用。
- **tertiary (#A9741C):** オーカー。ハイライトと 3 番目のデータ系列用。
- **neutral (#5C5F66):** クールグレー。キャプション、メタデータ、補足テキスト用。
- **surface (#F6F6F3):** わずかにグレーがかった紙のような白。カードは純白。
- **on-surface (#1A1C20)**

## Typography

見出しは Source Serif 4、ウェイト 600、字間をわずかに詰めます。本文と UI は Public Sans、17px、行の高さ 1.6。本文の 1 行は 68 文字前後に収めます。

## Layout

最大 1200px の 12 カラムグリッド、ガターは 24px。縦のリズムはゆったりとって、セクションの区切りには背景のブロックではなく、余白と細い罫線を使います。

## Shapes

4px の小さな角丸。枠線は暖かみのあるグレーの 1px。影は使いません。

## Components

ボタンは塗りつぶしのインクブルーか、インク色の枠線。カードは平らで、ヘアラインの枠線のみ。プルクォートは大きなサイズのセリフ体で組みます。

## Do's and Don'ts

- 各セクションは、セリフ体の見出し 1 つで支える。
- 細い罫線でコンテンツを区切る。
- グラデーション、グラスモーフィズム、ドロップシャドウは加えない。
- 1 画面でアクセントカラーを 2 色以上使わない。