DESIGN SYSTEM PREVIEW

Topics lorem ipsum dolor

Casa BRUTUS(casabrutus.com)lorem ipsum dolor sit amet consectetur adipiscing. Helvetica Neue + lorem ipsum dolor ProN lorem ipsum dolor sit, lorem × lorem ipsum dolor sit amet, border-radius 0px lorem square CTA. computed style lorem ipsum dolor.

Read More lorem ipsum
01 / COLORS

Color Palette

brand
Casa Black
#000000
lorem / CTA lorem / PR lorem
Casa White
#ffffff
lorem / CTA lorem
surface
Soft Cream
#f9e0cc
lorem ipsum dolor sit amet
Soft Sky
#e7f4f9
lorem / lorem ipsum dolor sit
Modal Veil
rgba(0,0,0,0.5)
lorem ipsum dolor
accent / promo
Promo Pink
#dc3b89
lorem ipsum dolor
Promo Red
#ff3434
lorem ipsum
Social Blue
#1877f2
SNS lorem
02 / TYPOGRAPHY — lorem

Typography

Topics lorem ipsum dolor
Helvetica Neue + Hiragino Kaku Gothic ProN / 48px / 700 / line-height: 1.5 (72px)Hero h2
lorem ipsum dolor sit! lorem ipsum dolor / lorem ipsum dolor sit
Helvetica Neue + ProN / 24px / 700 / line-height: 1.5 (36px)h2
lorem / lorem ipsum dolor sit〈SHOKKI〉lorem ipsum dolor.
Helvetica Neue + ProN / 20px / 700 / line-height: 1.5 (30px)h3 Card
DESIGN — ARCHITECTURE — FASHION — FOOD
Helvetica Neue + ProN / 24px / 400 / line-height: 1.5 (36px)Category Tag
lorem / lorem ipsum / lorem ipsum dolor Casa BRUTUS lorem, lorem ipsum dolor / lorem / lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor, lorem ipsum, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor——lorem ipsum dolor sit amet consectetur adipiscing.
Helvetica Neue + ProN / 16px / 400 / line-height: 1.5 (24px)Body
〈FUJIFILM〉lorem 2024 lorem ipsum dolor〈+precious〉lorem, 〈lorem ipsum dolor〉lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit.
Helvetica Neue + ProN / 14px / 400 / line-height: 1.5 (21px)Body Small
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.
Helvetica Neue + ProN / 12px / 300 / line-height: 1.5 (18px)Note
PR
PR Badge / 12px / 700 / letter-spacing: 0.3px / lorem ipsumPR Badge
“LISTENING ROOM lorem ipsum dolor. ”
lorem / lorem ipsum / lorem ipsum dolor Casa BRUTUS lorem ipsum
03 / ARTICLES — feature cards

Articles

DESIGN ARCHITECTURE FASHION FOOD ART
DESIGN
DESIGN

lorem / lorem ipsum dolor sit〈SHOKKI〉lorem ipsum dolor

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

lorem ipsum dolor sit amet consectetur〈ENTER NEW SPACES〉

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

lorem ipsum dolor. 〈lorem ipsum〉lorem ipsum dolor《lorem ipsum》lorem

lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.
04 / BUTTONS

Buttons & Tags

Read More
Outline Square (radius 0)
lorem ipsum dolor
Outline Square (jp)
lorem ipsum
Disabled (opacity 0.2)

PR Badge

PR
12px / 700 / letter-spacing 0.3px

Category Tags

DESIGN ARCHITECTURE FASHION FOOD
05 / FORMS

Forms

lorem ipsum — lorem + lorem 1px lorem / radius 0px
lorem ipsum — border 2px solid #000000
06 / LAYOUT

Spacing & Width

Spacing Scale

8px
16px
24px
32px
64px
120px

Content Widths

Full Bleed Hero 100vw
Article Section 1100px
Body Text 720px
CTA Min Width 256px