CLASKA Design System Preview

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum #ffffff lorem ipsum dolor(lorem ipsum dolor ProN, preview lorem Noto Sans JP lorem)lorem ipsum dolor sit amet consectetur, 10-12px lorem ipsum dolor sit amet line-height 2.0 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum, lorem, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

01 / Colors

Color Palette

Core

Black

#000000

Text Primary / Border / Nav

White

#ffffff

Page Background

Supporting

Gray

#666666

Date / Muted Text

Badge Gray

#eeeeee

Category Badge Background

02 / Typography

Typography Hierarchy

CLASKA / Logo Area

28px / Noto Sans JP / weight 600 / line-height: 1.5 / letter-spacing: normalh1 logo

GALLERY SHOP FURNITURE FASHION NEWS

10px / Noto Sans JP / weight 500 / uppercase / letter-spacing: normal / padding: 30px 10pxnav links

CLASKA Gallery & Shop "DO" / lorem ipsum dolor sit

12px / Noto Sans JP / weight 700 / line-height: 2.0 / letter-spacing: normalarticle title

lorem ipsum dolor. CLASKA lorem / lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum, lorem, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. lorem 12px, line-height 2.0 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

12px / Noto Sans JP / weight 400 / line-height: 2.0 / palt: nonebody p

2026.05.08 / Thu

10px / Noto Serif JP (Mincho) / weight 400 / line-height: 1.8 / color: #666666date stamp

Footer / Copyright text

10px / Noto Sans JP / weight 400 / line-height: 1.8footer

GALLERY SHOP FURNITURE

7px / bg: #eeeeee / padding: 3px 7px / border-radius: 0category badge

03 / Article

Editorial Sample

2026.05.08 / Thu

GALLERYEXHIBITION

lorem ipsum dolor sit -- CLASKA Gallery & Shop "DO" lorem ipsum dolor sit amet

CLASKA lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. Gallery & Shop "DO" lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem 12px / line-height 2.0 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit sed do.

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

UI Components

Text Links

Category Badges

GALLERY SHOP FURNITURE FASHION NEWS EXHIBITION

7px / bg: #eeeeee / padding: 3px 7px / radius: 0 / no border

Divider

1px solid #000000 -- section divider

05 / Cards

Editorial Cards

480 x 360

2026.05.01 / Wed

GALLERY

lorem ipsum dolor“lorem ipsum”- lorem ipsum dolor sit

480 x 360

2026.04.22 / Tue

SHOP

lorem ipsum dolor - lorem ipsum dolor sit amet consectetur

480 x 360

2026.04.15 / Mon

FURNITURE

CLASKA lorem ipsum dolor - lorem ipsum dolor sit amet consectetur

06 / Forms

Form Elements

Default -- border: 1px solid #000, radius: 0

Focus -- border: 1px solid #666666

Name

This field is required

Error -- border: 1px solid #cc0000

07 / Elevation

Depth & Elevation

CLASKA uses a completely flat editorial design. No box-shadow, no border-radius, no depth. Hierarchy is communicated through typography weight, thin borders, and whitespace alone.

Flat Surface

border: 1px solid #000 / shadow: none / radius: 0

Light Border

border: 1px solid #e5e5e5 / shadow: none / radius: 0

Badge Surface

bg: #eeeeee / border: none / shadow: none / radius: 0

08 / Layout

Grid System

3-Column Photo Grid

1 / 3

2 / 3

3 / 3

4 / 3

5 / 3

6 / 3

grid-template-columns: repeat(3, 1fr) / gap: 24px

Content + Sidebar

Main Content Area

Sidebar

grid-template-columns: 2fr 1fr / gap: 24px