Creative Engineer Portfolio

Design System

このサイトで使用しているデザイントークン・タイポグラフィ・ コンポーネントの一覧です。
実装時の参照、UI統一の基準として使用します。

01 — Color Tokens
--bg#fdfdfdBackground
--text#1a1a1aText
--text-muted#757575Text Muted
--accent#2e2e2eAccent
--border#dcdcdcBorder
header / hero bg#edededSurface
02 — Typography

Font Families

--font-body-jaa-otf-ud-shingo-pr6n — 本文・UIテキスト（日本語）

あいうえお ABCDabcd 1234

--font-heading-jadnp-shuei-gothic-gin-std — 見出し（日本語）

しひろ屋 Web Design

--font-hero-entermina — ヒーロー大見出し（英語）

Beyond Boundaries.

--font-display-enroc-grotesk — ディスプレイ・セクションタイトル（英語）

Design & Engineering

--font-accent-enfutura-pt — ラベル・ナビ・バッジ（英語）

SERVICES — TOOLS — CONTACT

Type Scale

Hero h1

Aa

clamp(3rem, 10vw, 11rem) / font-hero-en / weight 700 / ls -0.01em / ml -0.05em
.section-title / .page-intro h1

Section Title

clamp(2rem, 5vw, 4rem) / font-display-en / weight 700
.text-lg

大きめ本文テキスト — Lead copy text

clamp(1.2rem, 2.5vw, 2rem) / weight 400
.text-md

標準的な本文テキスト — Body text

1.1rem / line-height 1.8
base body

ベースフォントサイズ — Base body text 基本テキスト

16px / line-height 1.7 / font-body-ja
.site-nav a / .button-link

SERVICES · TOOLS · CONTACT

0.9rem / font-accent-en / uppercase / ls 0.12em
03 — Spacing

Spacing Utilities

.mt-mdmargin-top: 4vhセクション内のサブ要素間
.mt-lgmargin-top: 8vhセクション内の大きな区切り
.sectionpadding: 12vh 4vwページセクションの縦余白
.site-contentpadding: 20vh 4vw 8vhサブページ全体の余白
--nav-height100pxナビゲーションの高さ

Visual Scale

.mt-md — 4vh
.mt-lg — 8vh
.section padding-y — 12vh
04 — Buttons

.button-link — ページリンク用ボタン

DefaultPrimary
Fontvar(--font-accent-en) / uppercase / ls 0.1em
Padding1rem 2rem
Border1px solid var(--text) / radius 9999px
Hover (default)background: var(--text); color: var(--bg)

.tool-button — ツール操作用ボタン

Fontvar(--font-accent-en) / uppercase / ls 0.08em / 0.8rem
Padding0.6rem 1.2rem
Border1px solid var(--text) / no radius (square)
Disabledopacity: 0.4 / cursor: not-allowed
05 — Layout

.grid-2 — 2カラムグリッド

Col 1
Col 2
grid-template-columns: 1fr 1fr; gap: 6vw;

.split-layout — コンテンツ + サイドバー

Main content (2fr)
Side (1fr)
grid-template-columns: 2fr 1fr (≥768px); gap: 6vw;

.designer-list — 番号付きリスト

  • 01. タイトル

    説明テキストが入ります。左カラムに見出し、右カラムに本文が入るグリッドレイアウトです。

  • 02. タイトル

    説明テキストが入ります。ボーダーで区切られた繰り返し構造になっています。

.text-rail — サイドノート

06 — Cards

.tool-card — ツールカード

Utility

Free

ツール名

ツールの概要説明が入ります。機能や用途を簡潔に説明します。

Generator

Tool

別のツール

hover時にtranslateY(-4px)とbox-shadowが付きます。

.tool-panel — ツールパネル

背景が #fafafa、ボーダー付きのパネルコンテナです。ツールページの主要コンテンツエリアに使用します。

07 — Form Elements

.tool-control — フォームコントロール

.tool-textarea — テキストエリア

.accordion — アコーディオン

アコーディオン 1

開いた際に表示されるコンテンツです。details / summary 要素を使用しています。

アコーディオン 2

複数のアコーディオンを name 属性で同一グループにまとめると排他制御されます。

08 — Text Utilities
.text-lg

大きめのリードコピーテキスト

clamp(1.2rem, 2.5vw, 2rem) / lh 1.4
.text-md

標準的な本文テキスト — Body copy

1.1rem / lh 1.8
.text-muted

控えめな補足テキスト — Muted text

color: var(--text-muted) = #757575
.section-title

Section Title

clamp(2rem, 5vw, 4rem) / font-display-en
09 — Blog Typography

.blog-content — ブログ記事本文

見出し h2 — Section heading

見出し h3 — Subsection heading

見出し h4

本文テキストです。inline code はこのように表示されます。リンクテキストもこのスタイルが適用されます。

  • リストアイテム A — 背景が #f9f9f9 のブロック表示
  • リストアイテム B
引用ブロック — border-left + italic + muted color で表示されます。
// pre + code block
const greeting = "Hello, World!";
base1.15rem / lh 2.2 / ls 0.03em / color #333
h21.7rem / font-display-en / border-bottom 2px / mt 7vh
h31.4rem / border-left 4px solid var(--text) / pl 1rem
prebg: var(--text) / color: var(--bg) / monospace / radius 8px
blockquoteborder-left 4px text-muted / bg rgba(0,0,0,0.02) / italic
acolor #0056b3 / underline offset 4px
10 — Contact Form

.contact-form — お問い合わせフォーム

input / textareaborder: none / border-bottom only / background: transparent
.form-label-enfont-accent-en / uppercase / ls 0.1em / 1.1rem
.form-label-jafont-body-ja / 0.8rem / text-muted / weight 400
.required-markcolor #d94545 / bold
.form-status.successcolor #1d6b3f
.form-status.errorcolor #8f2424
buttonbg: var(--text) / radius 9999px / font-accent-en / uppercase
11 — Badges & Chips

3種類の小ラベル

.tool-card-badgeFreeTool
.og-preview-chip / .qr-chip1200×630PNGQR Code
.tool-card-badgeborder 1px / pt 0.25rem 0.6rem / 0.7rem / uppercase
.og-preview-chip / .qr-chipborder 1px / pt 0.35rem 0.8rem / font-accent-en / bg #fff
12 — Toggle & Range

.qr-toggle — トグルスイッチ

track ONbackground: #111 / w 36px h 20px / radius 999px
track OFFbackground: #e6e6e6
thumbw/h 16px / bg #fff / box-shadow / translateX(16px) when checked

Range Input — スライダー

値: 40 / 100
trackh 6px / radius 999px / linear-gradient fill with --range-fill
thumb18px / bg #111 / border 2px #fff / box-shadow
13 — Misc Components

.rail-label — セクションラベル

Approach

.rail-labelfont-accent-en / uppercase / ls 0.15em / weight 600 / 0.9rem

.editorial-note — 注記ブロック

Note

ボーダー付きのエディトリアル注記ブロックです。bg: var(--bg) / border: 1px solid var(--border) / padding: 4vw

.tool-metric / .unix-value — 数値表示

.tool-metric

1,234 items

.unix-value

1710000000

.tool-metricfont-display-en / 1.6rem / weight 700 / inline
.tool-label0.85rem / text-muted
.unix-valuefont-display-en / 1.6rem / weight 700

.text-link — インラインテキストリンク

文章の途中に テキストリンク が入る場合はこのクラスを使用します。

.text-linktext-decoration: underline / offset 3px / weight 500 / opacity hover 0.7

.site-footer — フッター

© 2024 しひろ屋 — Shihiro Takeda
.site-footerfont-accent-en / 0.85rem / ls 0.1em / text-muted / text-align right
borderborder-top: 1px solid var(--border)