TESTPIA DESIGN SYSTEM

Token first. Component first.

Testpia の React Native UI で使うトークン、ボタン分類、共有コンポーネント、画面実装ルールをまとめた運用ページです。実装済みのコンポーネントを基準にしており、アプリ画面を増やす時はここから参照します。

Core Tokens

新規 UI は useTheme() の colors と typography、Layout を先に使います。

Color

primary

#397FFF / main CTA

gray1

base lines, subtle surfaces

gray3

secondary icons / quiet labels

Spacing

Layout.spacing の 2 / 4 / 6 / 8 / 12 / 16 / 20 / 24 / 32 を基本スケールにします。

screenSpacing 16 sectionSpacing 25 itemSpacingY 12 buttonSpacingX 16

Typography

直書き fontSize は避け、typography.titleLarge, labelMedium, bodySmall などを使います。

headline title label body caption

Buttons

押下アニメーションと側面レイヤーは Pressable3DSurface に集約済みです。画面では意味に合う上位コンポーネントを選びます。

Variants

Icon + Option

CourseOptionButton

選択肢カード。選択時は primary の枠線と側面。

StudySettingOption

ボトムシートの横長選択肢。

Component Inventory

新規画面はまずこの一覧から使える部品を探します。

Button

src/components/ui/Button.tsx

primary / secondary / tertiary のテキスト CTA。サイズは xsmall / small / medium / large。

Pressable3DSurface

src/components/ui/Pressable3DSurface.tsx

3D押下・側面レイヤーの低レベル共通プリミティブ。通常は上位コンポーネント経由で使う。

IconActionButton

src/components/ui/IconActionButton.tsx

戻る、閉じる、追加、ヘッダー内アイコンなど、アイコンだけの操作ボタン。

Small / Transparent Secondary

src/components/ui/*Secondary3DButton.tsx

密な行・共有ボタン・色付き面の詳細ボタンに使う小さなセカンダリ3Dボタン。

ScreenHeader / ScreenBackButton

src/components/ui / navigation

標準ヘッダーと戻るボタン。個別画面で同じ戻るボタンを作らない。

BottomSheet

src/components/ui/BottomSheet.tsx

シート表示とバディ正面化を含む共通ボトムシート。

StudyModeCard / StudySettingOption

src/components/ui / study

学習開始・模擬テスト・追加メニューで使う選択肢カード。

EmptyState / Shimmer

src/components/ui

空状態、読み込み、考え中の視覚表現。

Implementation Rules

リリース前に守るチェックポイントです。

No Local Press Logic

3Dやscaleの押下処理は既存コンポーネントを使い、各画面で Animated を再定義しない。

No Hardcoded Tokens

色、余白、radius、fontSize は既存 token を優先。必要な時だけ設計メモに追記する。

Mobile Verified

UI変更後は CLI と Maestro / シミュレータで、押下、シート、キーボード、スクロールを確認する。