Design System Preview
connpass.com

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
connpass Orange
#f18d05
lorem ipsum / CTA
Orange Dark
#d97e04
lorem / lorem
connpass Red
#e8283f
lorem / lorem
Red Dark
#c41e32
lorem / lorem
Text
Text Heading
#333
lorem ipsum dolor
Text Primary
#444
lorem ipsum dolor
Text Secondary
#888
lorem / lorem ipsum
Text Disabled
#aaa
lorem ipsum dolor
Link
#0066cc
lorem ipsum dolor
Link Hover
#003366
lorem ipsum dolor
Semantic
Success
#5cb85c
lorem / lorem ipsum
Danger
#e8283f
lorem / lorem
Warning
#f18d05
lorem / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Background Secondary
#f5f5f5
lorem ipsum dolor
Border Default
#ddd
lorem ipsum dolor
Border Light
#eee
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor sit IT lorem ipsum dolor sit amet consectetur
36px / 400 / line-height: 36px (x1.0) / letter-spacing: normal / palt: loremlorem ipsum dolor h2
lorem ipsum dolor
24px / 400 / line-height: 24px (x1.0) / letter-spacing: normal / palt: loremlorem ipsum dolor h2
lorem ipsum dolor -- Heading 3
18px / 400 / line-height: 24px (x1.33) / letter-spacing: normallorem ipsum
React.js lorem ipsum dolor #42 -- lorem ipsum, lorem ipsum dolor sit amet
14px / 400 / line-height: 20px (x1.43) / letter-spacing: normallorem ipsum dolor(lorem)
lorem ipsum dolor -- connpass lorem ipsum dolor sit. font-size: 12px / line-height: 18px (x1.5) lorem ipsum dolor. Lucida Grande lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing Web lorem ipsum dolor.
12px / 400 / line-height: 18px (x1.5) / letter-spacing: normal / palt: loremlorem
2026/04/15 (lorem) 19:00 - 21:00 JST -- lorem ipsum dolor -- lorem 42/50 lorem
11px / 400 / line-height: 16px (x1.45) / color: Text Secondarylorem ipsum
lorem ipsum dolor -- Small (10px)
10px / 400 / line-height: 14px (x1.4)
03 / Events -- lorem ipsum dolor

lorem ipsum dolor sit

APR
15
lorem

React.js lorem ipsum dolor #42 -- lorem ipsumlorem 8 lorem

React lorem ipsum Hooks lorem. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

lorem: Frontend Tokyo / lorem 42/50 lorem

APR
18
lorem

Kubernetes lorem ipsum dolor sit -- lorem ipsum dolor

Kubernetes lorem ipsum dolor sit amet consectetur adipiscing elit sed. Docker lorem ipsum dolor sit amet consectetur.

lorem: Cloud Native JP / lorem 28/30 lorem

APR
22
lorem

Python lorem ipsum dolor sit vol.15

pandas, matplotlib lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit. lorem ipsum.

lorem: PyData Tokyo / lorem 15/20 lorem

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary (Orange)
lorem ipsum
Danger (Red)
lorem ipsum
Success
lorem ipsum
Outline
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit

React, Vue, Svelte lorem ipsum dolor sit amet consectetur adipiscing / lorem ipsum dolor sit amet consectetur. lorem 2 lorem ipsum dolor.

ReactTypeScriptlorem ipsum
lorem ipsum dolor

lorem ipsum dolor

AWS, GCP, Azure lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit amet. LT lorem ipsum dolor sit amet consectetur.

AWSDockerKubernetes
lorem ipsum dolor

lorem ipsum dolor sit

lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing.

PythonMLlorem ipsum
lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #ddd, radius: 4px
lorem ipsum -- border: #f18d05 (connpass Orange)
lorem -- border: #e8283f (connpass Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Elevation 1
lorem / lorem ipsum
Elevation 2
lorem ipsum dolor / lorem ipsum dolor
Orange Border
lorem ipsum / lorem
08 / Spacing

lorem ipsum dolor sit

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

lorem ipsum dolor

Main Container 980px
Event List 700px
Sidebar 260px