lorem ipsum

lorem ipsum dolor, lorem ipsum

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

01 / Colors

lorem ipsum dolor

Brand / Accent
EC Green
#0eb03a
EC lorem ipsum(Amazon/lorem/Yahoo)
Gold Badge
#fbe8b4
“lorem ipsum”lorem
Orange Accent
#ff8800
lorem ipsum dolor
Ranking
Rank Gold
#f2b50d
1 lorem ipsum
Rank Silver
#738c8c
2 lorem ipsum
Rank Bronze
#b36b4d
3 lorem ipsum
Text
Text Primary
#313131
lorem / lorem
Text Secondary
#999999
lorem ipsum / lorem
Text Muted
#666666
lorem / lorem ipsum dolor
Surface & Border
White
#ffffff
lorem ipsum
Surface
#f7f7f7
lorem ipsum / lorem
Surface Alt
#fafafa
lorem ipsum dolor
Table Header
#f4fcfe
lorem ipsum dolor
Table Header Alt
#e8f9fd
“lorem ipsum”lorem ipsum
Border Light
#efefef
lorem ipsum dolor
Border Card
#e7e7e7
lorem ipsum dolor
Badge Surfaces
Popular
#fff9f3
“lorem”lorem
New
#f5f9fd
“lorem”lorem
Footer
Footer Dark
#313131
lorem ipsum dolor
Footer Mid
#2c2c2c
lorem ipsum dolor
Footer Bottom
#111111
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Article Title (h1)
30px / 700 / line-height: 1.25 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum dolor -- Heading 2
24px / 700 / line-height: 1.25 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum -- Heading 3
20px / 700 / line-height: 1.25 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum -- Heading 4
18px / 700 / line-height: 1.25 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum -- Heading 5
16px / 700 / line-height: 1.25 / letter-spacing: 0.04em / palt: loremlorem ipsum
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur / lorem. lorem ipsum dolor sit amet consectetur adipiscing. mybest lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 400 / line-height: 1.62 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor -- line-height 1.5 lorem ipsum (14px)
14px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor -- Caption Bold (12px)
12px / 700 / line-height: 1.5 / “lorem”lorem ipsum dolor sit
lorem ipsum dolor -- Caption (12px)
12px / 400 / line-height: 1.5 / color: Text Secondary
lorem ipsum dolor sit amet consectetur adipiscing / lorem -- Small Palt (10px)
10px / 400 / line-height: 1.5 / letter-spacing: 0.096em / palt: lorem
03 / Article -- lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem

lorem ipsum dolor sit amet consectetur adipiscing

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

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing, lorem / lorem / lorem ipsum dolor sit 3 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 consectetur adipiscing, lorem ipsum dolor sit amet consectetur(ANC)lorem ipsum dolor sit. lorem ANC lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

1
120 x 120

lorem ipsum A lorem ipsum dolor sit Pro

lorem ipsum lorem
4.52 / 5.00
2
120 x 120

lorem ipsum B lorem ipsum dolor sit SE

lorem ipsum lorem
4.38 / 5.00

lorem ipsum dolor sit

lorem lorem ipsum lorem ipsum lorem lorem ipsum
1 lorem ipsum A Pro 12,800 lorem ANC lorem lorem ipsum 8 lorem
2 lorem ipsum B SE 8,900 lorem lorem ipsum dolor lorem ipsum 6 lorem
3 lorem ipsum C Lite 4,980 lorem IPX4 lorem lorem ipsum dolor 5 lorem
4 lorem ipsum D Air 6,500 lorem lorem ipsum dolor lorem ipsum 7 lorem
04 / Buttons

lorem ipsum dolor sit

EC Purchase CTA
EC CTA (Amazon)
EC CTA (lorem)
EC CTA (lorem)
Standard / Outline
Standard
Standard
Outline
Outline
Badges
lorem ipsum
Gold Badge
1
Rank 1
2
Rank 2
3
Rank 3
4
Rank 4+
lorem
Popular
lorem
New
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

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

lorem ipsum

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #efefef, radius: 4px
lorem ipsum -- border: #0eb03a (EC Green)
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #dc2626
07 / Elevation -- lorem

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
EC CTA Shadow
inset 0 -4px 0 rgba(0,0,0,0.1)
Hover (lorem)
0 2px 8px rgba(0,0,0,0.08)
Dropdown (lorem)
0 8px 24px rgba(0,0,0,0.10)
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
8px
12px
16px
24px
48px
Content Widths
Full Container 1200px
Article Main Column 740px
Sidebar 300px
Border Radius
4px (Standard)
0px (Card/Table)