Biotop
menu
Tokyo
Osaka
Fukuoka
Kobe
Sapporo
-News
Pick Up
Biotop
#biotop #exclusive #2026 collection
01 / Colors

Color Palette

lorem ipsum dolor sit amet #354443 lorem ipsum. lorem ipsum dolor / lorem / lorem ipsum dolor, lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur 15% lorem ipsum dolor sit amet consectetur.

Brand
Biotop Green
#354443
lorem ipsum dolor sit. lorem ipsum dolor sit
Green Tint 15%
rgba(53,68,67,.15)
lorem ipsum ≒ #e1e3e3
Neutral
White
#ffffff
lorem ipsum / lorem ipsum dolor
Panel Grey
#eaeaea
lorem ipsum dolor. lorem ipsum dolor
Black
#000000
lorem / lorem ipsum dolor sit amet
02 / Typography — lorem

Typography

loremdin-2014, lorem ipsum, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif. din-2014 lorem Adobe Fonts lorem, lorem ipsum dolor DIN lorem ipsum dolorBarlow(Google Fonts)lorem ipsum dolor.font-feature-settings: "palt" loremletter-spacing: 0.05em lorem ipsum dolor. lorem ipsum 300 / 400 lorem ipsum, Bold lorem ipsum.

Biotop People
Display / Feature Title — 72px（≒5vw）/ 400 / lh 1.0 / ls 0.045emlorem ipsum dolor
Biotop
Display Light — 60px / 300 / lh 1.0 / ls 0.045em
Pick Up — lorem ipsum dolor sit
Heading 1 — 29px / 300 / lh 1.2 / ls 0.045em
News — lorem ipsum dolor
Heading 2 — 21px / 300 / lh 1.2 / ls 0.045em
All Topics　Tokyo
Heading 3 / Nav — 19.9px / 400 / lh 1.0 / ls 0.033emlorem ipsum
(LATEST POST: 14.07.2026) — lorem / lorem ipsum dolor
Lead / Caption — 18px / 300 / lh 1.6 / ls 0.04em / lorem #354443
BIOTOP lorem ipsum, lorem ipsum dolor, lorem, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABCabc 0123
Body / Base — 13px / 400 / lh 1.8 / ls 0.05em / paltlorem
Event
Tag / Pill — 13px / 400 / lh 1.0 / ls 0.05em / radius 1.5em
Latest Post: 20.05.2026　No.51 Mari Okamoto
Small / Meta — 9.1px / 400 / lh 1.0–1.2 / ls 0.071em
03 / Article — lorem ipsum dolor / lorem

Feature Panels

lorem / lorem ipsum / lorem ipsum dolor gutter 0 lorem ipsum dolor sit. max-width lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur＋lorem ipsum dolor sit.

Biotop
People
20.05.2026
No.51
Mari Okamoto
Flower
12.07.2026
No.08
Zero Two Three
Biotop
Side-B
28.10.2024
No.2
Hisashi Ohta
Biotop
Online
14.07.2026
Shop All
Store
03b / Product

Web Store

lorem ipsum dolor. radius 0 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit(9.1px lorem), lorem(15px / Light), lorem(13px)lorem ipsum.

Image
Birkenstock for Biotop
Kyoto Suede Sandal
¥27,500
Image
Biotop Exclusive
Linen Wide Shirt
¥34,100
Image
Keep Green Biotop
Recycled Wool Knit
¥29,700
Image
Bw Biotop
Garment Dyed Trousers
¥38,500
04 / Buttons

Buttons

lorem ipsum dolor sit amet consectetur. CTA lorem“lorem＋1px lorem / radius 1.5em lorem ipsum dolor”lorem, lorem ipsum dolor sit amet consectetur.

Event
Pill Tag — lorem ＋ 1px solid #ffffff / radius 1.5em / 13px
#BIRKENSTOCK for BIOTOP
Pill Tag (L) — 19.6px / radius 27.5px
Online Store
Panel Link — #354443 lorem / lorem / radius 0 / padding 30px
Shop All
Panel Link (grey) — #eaeaea lorem / lorem
05 / Cards

Cards

lorem ipsum dolor sit amet. lorem(lorem ipsum / lorem / lorem)lorem ipsum dolor, padding 20px 30px 30px lorem ipsum dolor sit.

Green
#354443 lorem / lorem
radius 0 / shadow none
Grey
#eaeaea lorem / lorem
radius 0 / shadow none
Photo
lorem ipsum / lorem ipsum
View
06 / Forms

Forms

lorem ipsum dolor sit amet consectetur adipiscing elit(font-family: Arial). lorem BIOTOP lorem ipsum dolor sit amet — lorem ipsum, lorem ipsum dolor 1 lorem, lorem ipsum dolor sit amet consectetur.

lorem ipsum — border-bottom: 1px solid #354443 / radius 0
lorem ipsum — border-bottom: 2px solid #354443(lorem ipsum dolor)
lorem — border-bottom: 2px solid #b23b32(lorem ipsum dolor sit. lorem ipsum dolor)
07 / Elevation

Depth & Elevation

lorem ipsum dolor box-shadow: none. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur adipiscing elit.

Level 0 — Flat
box-shadow: none(lorem ipsum dolor sit amet)
Level 1 — Tone
#eaeaea lorem ipsum dolor sit(lorem ipsum dolor)
Level 2 — Brand
#354443 lorem ipsum. lorem ipsum dolor sit
Overlay
rgba(0,0,0,0.4–0.85) lorem ipsum(lorem ipsum)
08 / Layout

Layout & Spacing

lorem ipsum dolor sit 13px lorem ipsum. lorem ipsum dolor 30px, lorem ipsum dolor 35px. lorem ipsum max-width lorem ipsum, gutter 0 lorem ipsum dolor sit amet consectetur adipiscing.

6.5
13
20
26
30
35
Grid — lorem ipsum / gutter 0 / full bleed
2fr
1fr
1fr