Design System Preview
connpass.com

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

イベントを探す DESIGN.md を読む
01 / Colors

カラーパレット

Brand
connpass Orange
#f18d05
ブランド・CTA
Orange Dark
#d97e04
ホバー・プレス
connpass Red
#e8283f
強調・エラー
Red Dark
#c41e32
ホバー・プレス
Text
Text Heading
#333
見出しテキスト
Text Primary
#444
本文テキスト
Text Secondary
#888
補足・メタ情報
Text Disabled
#aaa
無効テキスト
Link
#0066cc
リンクテキスト
Link Hover
#003366
リンクホバー
Semantic
Success
#5cb85c
成功・参加済み
Danger
#e8283f
エラー・削除
Warning
#f18d05
警告・注意
Surface & Border
Background
#ffffff
ページ背景
Background Secondary
#f5f5f5
セクション背景
Border Default
#ddd
標準ボーダー
Border Light
#eee
薄いボーダー
02 / Typography -- 実測値

タイポグラフィ階層

エンジニアをつなぐ IT勉強会支援プラットフォーム
36px / 400 / line-height: 36px (x1.0) / letter-spacing: normal / palt: なしトップページ h2
おすすめグループ
24px / 400 / line-height: 24px (x1.0) / letter-spacing: normal / palt: なしセクション見出し h2
イベント詳細 -- Heading 3
18px / 400 / line-height: 24px (x1.33) / letter-spacing: normal小見出し
React.js ハンズオン勉強会 #42 -- 初心者歓迎、もくもく会形式で進めます
14px / 400 / line-height: 20px (x1.43) / letter-spacing: normalイベントタイトル（一覧）
本文テキスト -- connpass の基本テキストサイズ。font-size: 12px / line-height: 18px (x1.5) の組み合わせ。Lucida Grande を先頭に置くフォントスタックが特徴的で、欧文のグリフ品質を優先する古典的な日本語Webサービスの構成。
12px / 400 / line-height: 18px (x1.5) / letter-spacing: normal / palt: なし本文
2026/04/15 (水) 19:00 - 21:00 JST -- オンライン開催 -- 参加者 42/50人
11px / 400 / line-height: 16px (x1.45) / color: Text Secondaryメタ情報
最小テキスト -- Small (10px)
10px / 400 / line-height: 14px (x1.4)
03 / Events -- イベント一覧

イベント一覧サンプル

APR
15
水

React.js ハンズオン勉強会 #42 -- 初心者歓迎残り8枠

React の基礎から Hooks まで。もくもく会形式で進めます。メンターが常駐しているので初心者も安心。

主催: Frontend Tokyo / 参加者 42/50人

APR
18
土

Kubernetes 入門ワークショップ -- ハンズオン形式

Kubernetes クラスタの構築からデプロイまでを半日で学ぶワークショップ。Docker の基礎知識があれば参加可能。

主催: Cloud Native JP / 参加者 28/30人

APR
22
水

Python データ分析もくもく会 vol.15

pandas, matplotlib を使ったデータ分析をもくもくと進める会。成果発表タイムあり。初心者歓迎。

主催: PyData Tokyo / 参加者 15/20人

04 / Buttons

ボタンバリエーション

イベント作成
Primary (Orange)
キャンセル
Danger (Red)
参加する
Success
詳細を見る
Outline
05 / Cards

カードコンポーネント

フロントエンド勉強会

React, Vue, Svelte など最新のフロントエンド技術について議論・ハンズオンを行うコミュニティです。毎月第2水曜日に開催。

ReactTypeScript初心者歓迎
グループを見る

インフラ勉強会

AWS, GCP, Azure などクラウドインフラの設計・運用について学ぶグループ。LT会とハンズオンを交互に実施。

AWSDockerKubernetes
グループを見る

機械学習もくもく会

機械学習・データサイエンスに興味がある方が集まるもくもく会。初心者からプロまで幅広く参加しています。

PythonMLデータ分析
グループを見る
06 / Forms

フォーム要素

デフォルト -- border: #ddd, radius: 4px
フォーカス -- border: #f18d05 (connpass Orange)
エラー -- border: #e8283f (connpass Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ（基本）
Elevation 1
カード・ホバー時
Elevation 2
ドロップダウン・ポップオーバー
Orange Border
アクティブ・選択中
08 / Spacing

スペーシングスケール

4px
8px
16px
24px
32px
48px
09 / Layout

コンテンツ幅

Main Container 980px
Event List 700px
Sidebar 260px