lorem ipsum dolorloremlorem
lorem ipsum dolor sit amet

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

lorem ipsum dolor sit lorem ipsum dolor sit amet
01 / Colors

lorem ipsum dolor

Brand
Timee Yellow
--yellow: #ffd700
lorem ipsum dolor / lorem ipsum dolor
Timee Creme
--creme: #fff4a3
lorem ipsum dolor
CTA / Interactive
Accent Blue
--blue: #007aff
Primary CTA / lorem
Blue Shadow
--blue-shadow: #005edb
lorem ipsum CTA lorem
Accent Red
--red: #ff3b30
lorem ipsum(lorem / lorem)
Neutral
Black
--black: #212121
lorem ipsum / lorem ipsum dolor
Secondary Gray
#666666
lorem ipsum dolor
Gray
--gray: #b7b8bc
lorem ipsum dolor sit amet consectetur
Light Gray
--lightGray: #eaeaea
lorem / pill inactive lorem
Divider
--divider: #dcdcdc
lorem ipsum
White
#ffffff
lorem ipsum / lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Hero H2
34px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor sit
lorem ipsum dolor — Section H2
32px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor18,000 lorem
32px / 700 / line-height: 1.5 / lorem ipsum dolor: #ff3b30lorem ipsum
lorem ipsum dolor sit
24px / 700 / line-height: 1.5 / letter-spacing: 0.05em / color: #ffffffPrimary CTA
lorem ipsum dolor sit amet
20px / 700 / line-height: 1.5 / letter-spacing: 1.6px (0.08em)Secondary CTA
20 lorem   30 lorem   40 lorem
20px / 700 / line-height: 1.5 / letter-spacing: 1pxlorem ipsum dolor
lorem ipsum / lorem ipsum / lorem
18px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor H3
40 lorem(lorem)lorem
“lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur”
lorem: 17px / 700 / 1.3    lorem: 15px / 400 / 1.33lorem ipsum dolor
lorem ipsum dolor — Job Title (H3)
16px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum dolor — Body. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum / lorem ipsum / lorem ipsum dolor sit.
16px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor sit
14px / 700 / line-height: 1.2lorem ipsum
lorem ipsum dolor / lorem ipsum dolor — Caption (14px)
14px / 400 / line-height: 1.5 / color: #666666lorem ipsum
lorem ipsum lorem lorem
13px / 400 / line-height: 1.0 / bg: #212121 / color: #ffffff / radius: 0pxlorem ipsum
※lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing.
12px / 400 / line-height: 1.4 / color: #666666lorem
03 / Article — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum lorem / lorem lorem ipsum

lorem ipsum dolor lorem ipsum dolor(lorem ipsum dolor)

lorem ipsum. lorem ipsum dolor sit amet consectetur. lorem ipsumlorem 2 lorem–, lorem ipsum dolor sit amet consectetur.

lorem ipsum

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

“lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing”
— 30 lorem / lorem(lorem)

lorem / lorem

lorem1,250 lorem– / lorem ipsum dolor / lorem ipsum
lorem ipsum, lorem ipsum dolor sit amet consectetur.

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

lorem ipsum dolorlorem / lorem ipsumlorem, lorem ipsum dolor sit. lorem ipsum dolor sit OK lorem.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Primary (Blue Pill)
bg:#007aff / shadow:0px 4px 0px #005edb
radius:9999px / 18px / 700 / ls:0.05em
hover: translateY(4px) + shadow lorem
lorem ipsum dolor sit amet
Secondary (Yellow Pill)
bg:#ffd700 / border:2px solid #212121
shadow:0px 8px 0px #212121 / 20px / ls:1.6px
hover: translateY(4px) + shadow lorem
lorem ipsum
Text Link
color:#007aff / 700 / border-bottom
Category Pills(lorem ipsum dolor)
20 lorem 30 lorem 40 lorem 50 lorem
Active: bg:#212121 / White text / border:1px solid #212121
Inactive: bg:#eaeaea / #212121 text / border:1px solid #212121 / radius:999px / 20px / 700 / ls:1px
05 / Cards

lorem ipsum dolor sit

Job Listing Cards(lorem ipsum)
lorem ipsum lorem
lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor lorem
lorem1,250 lorem–
📍 lorem   🕐 2–4 lorem   📅 lorem OK
lorem ipsum dolor sit
lorem lorem
EC lorem ipsum dolor / lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
lorem1,350 lorem–
📍 lorem   🕐 4–8 lorem   📅 lorem OK
lorem ipsum dolor sit
lorem lorem
lorem lorem ipsum dolor(lorem ipsum)
lorem ipsum dolor lorem ipsum lorem ipsum
lorem1,200 lorem–
📍 lorem   🕐 3–5 lorem   📅 lorem ipsum
lorem ipsum dolor sit
Testimonial Cards(lorem ipsum dolor)
40 lorem(lorem)lorem
“lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur. lorem3 loremlorem ipsum dolor sit amet consectetur. ”
⭐⭐⭐⭐⭐   2026 lorem 5 lorem
20 lorem(lorem)lorem
“lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit. ”
⭐⭐⭐⭐⭐   2026 lorem 4 lorem
30 lorem(lorem)lorem
“lorem ipsum dolor sit amet 2–3 lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing. ”
⭐⭐⭐⭐☆   2026 lorem 3 lorem
06 / Forms

lorem ipsum dolor

lorem ipsum dolor sit
lorem ipsum — border: 1px solid #b7b8bc / radius: 8px
lorem ipsum — border: #007aff / box-shadow: 0 0 0 3px rgba(0,122,255,0.2)
lorem ipsum dolor sit amet consectetur
lorem — border: #ff3b30 / box-shadow: 0 0 0 3px rgba(255,59,48,0.2)
07 / Elevation — lorem ipsum dolor(lorem ipsum dolor)

Depth & Elevation

lorem ipsum shadow lorem UI lorem ipsum dolor sit amet consectetur(lorem ipsum)lorem. hover lorem translateY lorem shadow lorem, lorem ipsum dolor sit amet.

lorem ipsum
Level 0: Flat
box-shadow: none
lorem ipsum dolor / lorem ipsum dolor
lorem ipsum
CTA Blue Shadow
box-shadow: 0px 4px 0px #005edb
Primary CTA(lorem ipsum)
lorem ipsum
CTA Blue — Hover
transform: translateY(4px)
box-shadow: none
lorem ipsum dolor sit amet
lorem ipsum
CTA Yellow Shadow
box-shadow: 0px 8px 0px #212121
Secondary CTA(lorem ipsum dolor)
lorem ipsum
CTA Yellow — Hover
transform: translateY(4px)
box-shadow: none
lorem ipsum dolor
lorem ipsum dolor
Focus Ring
border: #007aff
box-shadow: 0 0 0 3px rgba(0,122,255,0.2)
08 / Layout — CSS Custom Properties lorem

lorem ipsum dolor

lorem ipsum dolor
Max Width --max-width: 1020px
Article Column 640px (lorem)
Horizontal Padding --padding: 20px
lorem ipsum dolor sit
4px / XS
8px / S
16px / M
20px / L
40px / XL
80px / XXL
Transition

--transition: 0.3s   (lorem hover, lorem shadow lorem ipsum)