---
version: alpha
name: "Pop"
description: "太い黒の輪郭線、ハードシャドウ、レモンイエロー。あえてうるさく。 Pop は、お行儀のいいネオブルータリズムです。クリーム色のページ、幅広の Unbounded の見出し、あらゆるものに黒の輪郭線、そしてカードをステッカーのように見せる、ずらしたベタ塗りの影。主張するのはレモンイエローとコーラルで、グリッドと余白は規律を保ちます。"
colors:
  primary: "#141414"
  on-primary: "#FFE45C"
  secondary: "#FF6B4A"
  tertiary: "#3D7EFF"
  neutral: "#5C5A52"
  surface: "#FFFDF5"
  on-surface: "#141414"
typography:
  display-lg:
    fontFamily: "Unbounded"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: "Unbounded"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.02em
  headline-md:
    fontFamily: "Unbounded"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.01em
  headline-sm:
    fontFamily: "Unbounded"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
  body-md:
    fontFamily: "Manrope"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.55
  body-sm:
    fontFamily: "Manrope"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
rounded:
  sm: 10px
  md: 12px
  lg: 14px
  xl: 18px
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

Pop は、お行儀のいいネオブルータリズムです。クリーム色のページ、幅広の Unbounded の見出し、あらゆるものに黒の輪郭線、そしてカードをステッカーのように見せる、ずらしたベタ塗りの影。主張するのはレモンイエローとコーラルで、グリッドと余白は規律を保ちます。

## Colors

- **primary (#141414):** ライトモードでは黄色い文字の黒、ダークモードではレモンイエロー。メインの行動喚起用。
- **on-primary (#FFE45C)**
- **secondary (#FF6B4A):** コーラル。ステッカー、ハイライトのブロック、2 番目のチャート系列用。
- **tertiary (#3D7EFF):** 明るいブルー。カード内のリンク、タグ、3 番目の系列用。
- **neutral (#5C5A52):** 温かみのあるグレー。補助的なコピーとキャプション用。
- **surface (#FFFDF5):** 温かみのあるオフホワイトに白いカード。セクション全体をレモンイエローに切り替えることもできます。
- **on-surface (#141414)**

## Typography

見出しは Unbounded のウェイト 600。幅広で幾何学的で、最大 72px、字間 -0.03em。本文は Manrope のウェイト 500、17px。価格タグとコードは JetBrains Mono。

## Layout

最大 1200px の 12 カラムグリッド、ガター 24px、余白の単位 4px。セクションはクリーム色とベタ塗りの色ブロックを交互に並べ、機能カードはずっしりした 2〜3 列のグリッドに置きます。

## Shapes

すべてのカード、ボタン、入力欄に 14px の角丸と黒い枠線（ダークモードではクリーム色の枠線）。影はハード：ぼかしのない、右下にずらしたベタ塗りのブロックです。

## Components

ボタンはハードシャドウ付きの枠付きブロックで、押すと影が平らに沈みます。カードには色付きのヘッダーの帯が付きます。バッジはステッカーのように見え、料金表はプランの間に太い罫線を引きます。

## Do's and Don'ts

- すべてのカード、ボタン、入力欄に、同じ黒の輪郭線を付ける。
- セクションごとに、目立つ色を 1 色選ぶ。
- 影をぼかさない。ベタ塗りで、ずらして置く。
- パステルのグラデーションやグラスモーフィズムを混ぜない。