Design System Preview
TASAKI

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

COLLECTIONS DESIGN.md
01 / Colors

Color Palette

Brand / CTA
Charcoal
#323232
lorem ipsum dolor / CTA
Accent
Sage Green
#e3f0ea
lorem ipsum dolor(lorem ipsum dolor)
Text
Text Primary
#323232
lorem ipsum dolor
Text Secondary
#a5a5a5
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f5f5f5
lorem ipsum dolor
Border
#cccccc
lorem ipsum dolor
Dot Inactive
#a5a5a5
lorem ipsum dolor sit
02 / Typography

Typography Hierarchy

Heading 1 — Page Title
Inter (Tasaki Sans alt) / 40px / 300 / line-height: 1.1 / letter-spacing: normalH1
Section Heading
Inter / 26px / 300 / line-height: 1.1 / letter-spacing: normalH2
News Section Title
Inter / 24px / 300 / line-height: 1.1 / letter-spacing: 0.067emH2 alt
Sub Heading — H4
Inter / 14px / 400 / line-height: 1.3 / letter-spacing: normalH4
lorem ipsum dolor — TASAKI lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. font-weight: 300 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
Inter / 14px / 400 / line-height: 1.57 / letter-spacing: 0.01emBody
lorem ipsum dolor — lorem ipsum dolor sit amet TASAKI lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
Inter / 14px / 500 / line-height: 2.14 / letter-spacing: normalBody alt / News
RINGS   NECKLACES   EARRINGS   BRACELETS   BROOCHES
Inter / 14px / 400 / line-height: 1.43 / letter-spacing: normalNav
Header Link — lorem ipsum dolor
Inter / 12px / 400 / line-height: 1.83 / letter-spacing: 0.01emLink small
03 / Article

Article Sample

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor

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

lorem ipsum dolor

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

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

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

04 / Buttons

Button Variations

SIGN IN
Primary — radius: 0
REGISTER
Register — radius: 3px
VIEW DETAILS
Outline
VIEW MORE
Ghost
SEARCH
Small
Carousel Indicators — active: #323232, inactive: #a5a5a5

border-radius: 0px (default) / 3px (register only)

Ultra-minimal, monochrome button system

05 / Cards

Card Components

Product Image
RINGS

danger ballerina ring

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

¥396,000 (tax included)
Product Image
NECKLACES

balance era pearl necklace

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

¥242,000 (tax included)
Product Image
EARRINGS

abstract star earrings

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

¥528,000 (tax included)
06 / Forms

Form Elements

Default — border: #cccccc, radius: 0
Focus — border: #323232
Please enter a valid email address
Error — border: #c53030
07 / Elevation

Depth & Elevation

Level 0: Flat
No shadow, border only (default)
Elevation 1
Card hover, dropdown
Elevation 2
Modal, mega menu

Flat design throughout. Structure expressed through borders and whitespace, not shadows.

08 / Layout

Spacing & Layout

Spacing Scale
4px
8px
16px
24px
48px
80px
Content Widths
Max Container 1200px
Content Area 960px
Article / Text 640px
Accent Color

Sage Green

TASAKI lorem ipsum dolor sit amet consectetur #e3f0ea. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed.