Design System Preview
JR lorem — lorem ipsum

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

“lorem ipsum”lorem lorem / lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand Green
JR East Green
#008803
lorem ipsum dolor / CTA lorem
Green Text
#007903
lorem ipsum dolor
Green Palette
Green Dark#1b301b
Green Brand#008803
Green Muted#93a594
Green Surface Mid#bfd8bd
Green Surface Light#dde7c7
Green Surface Accent#e9f1e8
Green Tint#e4fbea
Green Tint Light#eefdf1
Green Surface Pale#f9fbf9
Text
Text Primary
#202020
lorem ipsum dolor
Text Secondary
#333333
lorem ipsum dolor
Text Green
#007903
lorem / lorem
Text White
#ffffff
lorem ipsum / CTA lorem
Surface & Border
Background
#fafafa
lorem ipsum
Background Station
#f8f8f8
lorem ipsum dolor
Surface Gray
#f7f7f7
lorem ipsum dolor
Surface White
#ffffff
lorem ipsum
Border Default
#dddddd
lorem ipsum dolor
Border Light
#eeeeee
lorem ipsum dolor
Footer BG
#1b301b
lorem ipsum dolor
Footer Surface
#202020
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Display (h2)
42px / 600 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 2
22px / 600 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor sit — Heading 2 (sub)
18px / 700 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum — Heading 3
20px / 600 / line-height: 1.6 / color: #007903 (green)lorem ipsum dolor
lorem ipsum dolor — JR lorem ipsum, lorem / lorem / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.
16px / 400 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem / lorem — Nav Main
16px / 600 / line-height: 1.2lorem ipsum dolor
lorem ipsum dolor — Nav Sub
14px / 500 / line-height: 1.0lorem ipsum
lorem — Label
14px / 600 / line-height: 1.6lorem ipsum
lorem ipsum — H1 (Station)
41px / 700 / line-height: 1.5lorem ipsum dolor
03 / Transit Info

lorem ipsum dolor sit amet consectetur

lorem ipsum, lorem ipsum dolor

JR lorem ipsum dolor / lorem / lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor

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

lorem ipsum / lorem

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

04 / Buttons

lorem ipsum dolor sit

“lorem ipsum”lorem
Primary CTA (pill)
lorem / lorem ipsum dolor
Outline (pill)
lorem ipsum dolor
Header Link (pill)
lorem ipsum
Area Tab (active)
lorem ipsum
Area Tab
lorem ipsum
Area Tab
lorem
Area Tab
Update (small)
05 / Cards

lorem ipsum dolor sit

Image Link Cards
🚉

lorem ipsum

🚃

lorem ipsum dolor

🗺

lorem

🎫

lorem ipsum dolor

💴

lorem ipsum dolor

🕒

lorem

🚂

lorem ipsum

📅

lorem

Logo Link Cards (large)

JR lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

JR lorem ipsum dolor

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit amet.

JRE MALL lorem ipsum

JR lorem ipsum dolor sit, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #f9fbf9, border: #ddd, radius: 3px
lorem ipsum — bg: #fff, border: #ddd, radius: 3px
lorem ipsum — border: #008803
lorem ipsum dolor sit amet
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum dolor sit. JR lorem ipsum dolor sit
Border 2px
lorem ipsum dolor — border: 2px solid #ddd, radius: 10px
Border 1px
lorem ipsum / lorem — border: 1px solid #ddd
Hover / Focus
lorem ipsum — border-color: #008803 lorem

JR lorem ipsum box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet(1px / 2px solid)lorem ipsum, lorem ipsum dolor sit amet.

08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale (lorem ipsum)
8px
16px
24px
32px
44px
72px
Border Radius
3px
Select
6px
Tab
10px
Card
12px
Button (small)
100px
CTA (pill)