Design System Preview
Kyash — lorem ipsum dolor

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Kyash Blue lorem ipsum dolor, lorem ipsum dolor palt lorem, lorem UI lorem ipsum dolor sit amet. computed style lorem ipsum dolor.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Kyash Blue
--kyash-blue
#2ad1ff
lorem ipsum dolor / lorem ipsum dolor
UI Blue
--ui-blue
#0d97ff
lorem / lorem ipsum dolor
Deep Blue
--blue
#003ab8
lorem / lorem ipsum dolor
Text
Rich Black
--rich-black
#26262a
lorem ipsum dolor / lorem
Gray Secondary
--text-gray-secondary
#808084
lorem ipsum dolor / lorem ipsum dolor
Gray Tertiary
--text-gray-tertiary
#b8b8bc
lorem ipsum dolor / lorem ipsum
Surface & Background
Almost White
#fdfdfd
lorem ipsum(body)
White
--white
#ffffff
lorem / lorem ipsum
Bright BG
--fill--bright-bg
#f7f8f9
lorem ipsum dolor
Border
--fill--border-gray-tertiary
#eaeaef
lorem ipsum dolor / lorem
Blue 100 BG
--fill--blue100-bg
#dbf0ff
lorem ipsum dolor / lorem ipsum
Blue 25 BG
--fill--blue25-bg
#f3f9ff
lorem ipsum dolor / lorem
Accent
Warm Red
--warm-red
#ff6a56
lorem / lorem ipsum
Yellow
--yellow
#ffc700
lorem / lorem
Orange
--orange
#ff9a66
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor sit
lorem ipsum dolor, lorem ipsum dolor
36px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: loremHero H2
Visa lorem, lorem ipsum dolor sit.
32px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: loremConcept H2
lorem ipsum dolor sit amet consectetur
28px / W7 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: loremSection H2
3 lorem ipsum Kyash lorem ipsum
24px / W7 700 / line-height: 1.2 / letter-spacing: 0.5px / palt: loremSection H1
lorem ipsum, lorem ipsum dolor sit amet— W5 (500)
20px / W5 500 / line-height: 1.5 / letter-spacing: 0.5px / palt: loremSub H2 .font-secondary
lorem / lorem ipsum, lorem ipsum dolor— W7 (700)
20px / W3 700 / line-height: 1.5 / letter-spacing: 0.5px / palt: loremStep H3
Kyash lorem ipsum dolor Visa lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor.— W3 (300)
16px / W3 300 / line-height: 1.9 / letter-spacing: 0.5px / palt: loremH1 Description
lorem ipsum dolor — Kyash lorem, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. Visa lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. line-height: 1.9 lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
14px / W3 400 / line-height: 1.9 / letter-spacing: 0.5px / palt: loremBody
lorem ipsum dolor — lorem / lorem / lorem— W3 700
14px / W3 700 / line-height: 1.95 / letter-spacing: 0.5px / palt: loremH4 Card
lorem ipsum dolor — lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor
14px / W3 400 / line-height: 1.5 / color: --ui-blue #0d97ffNav Link
※ Kyash Card lorem Visa lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.
12px / W3 400 / line-height: 1.9 / color: --text-gray-secondaryCaption
lorem ipsum dolor — W7 (700)
12px / W7 700 / line-height: 1.0 / letter-spacing: 0.5pxFooter Index
03 / Article — lorem ipsum dolor sit amet

lorem ipsum dolor

Kyash Card lorem ipsum dolor sit amet consectetur

Kyash Card lorem, lorem ipsum dolor sit Visa lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum, lorem ipsum dolor sit amet, Visa lorem ipsum dolor sit amet consectetur.

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

lorem ipsum dolor sit

Kyash lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor(lorem-lorem ipsum / lorem ipsum / lorem ipsum dolor sit), lorem ipsum Kyash lorem ipsum dolor sit amet consectetur. lorem ipsum dolor 120,000 lorem.

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

Visa lorem ipsum dolor sit amet consectetur

Kyash Card lorem Visa lorem ipsum dolor(Visa Contactless)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet. lorem ipsum dolor Kyash Pay lorem ipsum dolor,lorem ipsum Suica lorem Apple Pay lorem ipsum dolor sit.

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

04 / Buttons

lorem / lorem ipsum

lorem ipsum dolor
Kyash Blue Pill
lorem ipsum dolor sit
Primary (Dark)
lorem ipsum
Outline
lorem ipsum dolor →
Text Link (UI Blue)
lorem ipsum dolor
Feature Pill
lorem ipsum dolor sit
Feature Pill
lorem ipsum dolor
Feature Pill
Visa lorem ipsum dolor
Feature Pill
lorem ipsum dolor
Feature Pill

Feature Pill: transparent / border: 1px solid #b8b8bc / radius: 100000px / padding: 10px 15px / size: 14px / weight: 400

05 / Cards

lorem ipsum dolor sit

lorem
¥ 24,580
Kyash Card Visa lorem ipsum
lorem-lorem ipsum lorem 2026-05-21 09:12
−¥ 748
Amazon.co.jp 2026-05-20 22:45
−¥ 3,200
lorem — lorem ipsum 2026-05-19 10:00
+¥ 20,000
lorem — 5 lorem
lorem¥ 6,280
lorem¥ 3,140
lorem¥ 2,200
lorem ipsum¥ 15,420 / ¥ 120,000
06 / Forms

lorem ipsum dolor — lorem ipsum

lorem ipsum — border: #b8b8bc, radius: 8px, padding: 12px 16px
16 lorem ipsum dolor sit amet consectetur
lorem ipsum — border: #0d97ff (--ui-blue) / box-shadow: rgba(13,151,255,0.15)
lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.
lorem — border: #ff6a56 (--warm-red) / box-shadow: rgba(255,106,86,0.15)
lorem ipsum dolor 3 lorem ipsum dolor sit amet
lorem ipsum
07 / Elevation — lorem ipsum dolor

Depth & Elevation

Level 0: Flat
lorem / lorem
lorem, lorem ipsum dolor
border: 1px solid #eaeaef
--elevation-1
0 2px 4px rgba(0,0,0,0.08)
lorem ipsum dolor
--elevation-2
0 4px 16px rgba(0,0,0,0.12)
lorem ipsum / lorem ipsum dolor
Focus Ring
border: --ui-blue #0d97ff
box-shadow: rgba(13,151,255,0.15)
Error Ring
border: --warm-red #ff6a56
box-shadow: rgba(255,106,86,0.15)
08 / Layout — lorem ipsum dolor & lorem ipsum dolor

lorem ipsum dolor sit

XS
4px
S
8px
M
16px
L
24px
XL
40px
XXL
80px

lorem ipsum dolor

Max Container 1200px
Main Content 960px
Article / Form 640px
Card Column 440px

Border Radius

Input
8px
Card
16px
lorem
Button / Pill
100000px