Design System Preview
RMK — Warm Sophistication

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet. computed style lorem ipsum dolor. Neue Helvetica World lorem ipsum dolor Inter lorem.

lorem ipsum dolor sit amet DESIGN.md lorem
01 / Colors

Color Palette

lorem ipsum dolor
Brand — Warm Gray Family
Warm Brown Gray
#776F6B
lorem ipsum / lorem ipsum / CTA
Warm Dark Gray
#4F4F4F
TOP lorem / lorem ipsum
Dark Section
#434343
lorem ipsum / lorem ipsum dolor
Button Gray
#6F6F6F
lorem ipsum dolor
Warm Beige
#CBC4BC
lorem ipsum lorem ipsum
Theme: TOP (Dark)
--main-bg
#4F4F4F
lorem ipsum
--header-bg
#776F6B
lorem ipsum dolor
--main-text
#ffffff
lorem ipsum
Theme: Products (Light)
--main-bg
#F4F4F4
lorem ipsum
--header-bg
#CBC4BC
lorem ipsum dolor
--main-text
#4F4F4F
lorem ipsum
Functional
Alert Orange
#F84300
lorem ipsum dolor sit amet
New Badge
#000000
lorem ipsum dolor
Border
#E2E2E2
lorem / lorem ipsum
Input Border
#D1D1D1
lorem ipsum
02 / Typography

Typography

lorem ipsum dolor sit
RMK Luminous Pen Brush Concealer
36px / 500 / line-height: 1.1 / letter-spacing: normalH1 lorem ipsum
NEW ARRIVALS
30px / 500 / line-height: 1.6 / letter-spacing: 0.067em (2px)H2 lorem ipsum
lorem ipsum dolor
20px / 400 / line-height: 1.0 / letter-spacing: normalH2 lorem ipsum dolor
RMK lorem ipsum dolor sit amet #103
14px / 700 / line-height: 1.71 / font: lorem ipsum dolor(Helvetica lorem)H3 lorem
lorem ipsum dolor sit amet
14px / 700 / line-height: 1.2 / letter-spacing: 0.143em (2px)ja-title lorem ipsum dolor
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor.
14px / 400 / line-height: 1.43Body lorem ipsum
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. SPF27 / PA++lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.71Body Description lorem ipsum
4,950 (lorem) / SPF27 PA++ / lorem 10 lorem
12px / 400 / line-height: 1.5Small / Price
SKINCARE
12px / 400 / line-height: 1.0Nav Link
03 / Product Showcase

Product

lorem ipsum dolor sit amet

THE FOUNDATION

lorem ipsum dolor

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

RMK lorem ipsum dolor sit amet
4,950 (lorem) / lorem 10 lorem

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

03.5 / Theme Comparison

Dual Theme

lorem ipsum dolor sit
RMK

TOP Page (Dark)

bg: #4F4F4F
header: #776F6B
text: #ffffff
megamenu: rgba(119,111,108,0.95)

RMK

Products (Light)

bg: #F4F4F4
header: #CBC4BC
text: #4F4F4F
megamenu: rgba(255,255,255,0.95)

04 / Buttons

Buttons

lorem ipsum dolor sit
lorem ipsum dolor sit amet
Primary CTA
#776F6B / radius 5px
lorem ipsum dolor sit
Secondary CTA
#6F6F6F / radius 5px
lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum lorem / lorem ipsum dolor
Tags — bg #ffffff / text #4F4F4F / border #E2E2E2 / radius 5px
05 / Cards

Cards

lorem ipsum dolor sit
Product Cards
RMK
NEW

RMK lorem ipsum dolor sit amet

4,950 (lorem)
RMK

RMK lorem ipsum dolor sit

3,850 (lorem)
RMK

RMK lorem ipsum dolor sit amet

3,520 (lorem)
Service Cards (bg #434343)

lorem ipsum dolor

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

lorem ipsum

5,500 lorem ipsum dolor sit amet. lorem ipsum dolor, lorem ipsum dolor sit amet.

06 / Forms

Forms

lorem ipsum dolor
border: #D1D1D1, radius: 50px
lorem ipsum — border: #D1D1D1, radius: 5px
lorem ipsum — border: #776F6B (Warm Brown Gray)
lorem — border: #F84300 (Alert Orange)
07 / Elevation

Depth & Elevation

lorem ipsum dolor sit(lorem ipsum dolor)
Main BG
#4F4F4F
Dark Section
#434343
Header / Footer
#776F6B
Beige Header
#CBC4BC
Mega Menu (TOP)
rgba(119,111,108,0.95)
New Badge
#000000
08 / Layout

Layout

lorem ipsum dolor
Full Width Hero 100%
Content Max Width 960px
Article / Product 620px
Product Grid (4-col) 4 x 25%