DESIGN SYSTEM PREVIEW

niko and... のデザイントークンカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

DESIGN.md ONLINE SHOP
01 / Colors

COLOR PALETTE

Brand / Seasonal
Hilight 1
#5ec6c5
ティールアクセント
Hilight 2
#dc5c5b
コーラル / ヒーロー背景
Niko Blog
#4b77d0
ブログセクション
Marumaru
#ffa0c8
ピンクアクセント
Music 1
#183870
ダークネイビー
Music 2
#d65731
オレンジレッド
Section Backgrounds
Warm Beige
#eee9e2
セクション背景
Soft Pink
#e9ccd8
セクション背景
Warm Yellow
#ffd570
セクション背景
Neutral
Black
#000000
テキスト・ボーダー
Near White
#fefefe
カード面
White
#ffffff
ページ背景
Semantic (recommended)
Danger
#dc2626
エラー・削除
Success
#16a34a
成功・完了
Warning
#d97706
警告・注意
02 / Typography

TYPOGRAPHIC HIERARCHY

INFORMATION
Helvetica Neue / 24px / 400 / line-height: 1.15 / palt: offEN section title
ニコアンドの新しいライフスタイル提案
ryo-gothic-plusn / 16px / 700 / line-height: 1.5 / palt: onJP bold headline
FEATURE TITLE
Helvetica Neue Bold / 14px / 700 / line-height: 1.15 / palt: offEN feature title
衣食住遊をテーマにしたライフスタイルの提案。日々の暮らしを彩る、ニコアンドならではの視点で。
ryo-gothic-plusn / 14px / 400 / line-height: 1.71 / palt: onJP article title
Section Label Text
default / 14px / 400 / line-height: 1.15head
記事本文のテキストサンプル。niko and... では 12px という小さなサイズを記事内の見出しに使用しています。line-height 1.75 で日本語テキストの可読性を確保。
ryo-gothic-plusn / 12px / 400 / line-height: 1.75 / palt: onJP article h2
Navigation Item
default / 12px / 500 / line-height: 1.15nav link
Base body text / default size — 10px
default / 10px / 400 / line-height: 1.15body default
03 / Article

EDITORIAL SAMPLE

LIFESTYLE
2026.05.29
暮らしを彩るニコアンドの衣食住遊

日本語の組版は、欧文とは根本的に異なるルールを持っています。文字の大きさ、行間、字間のバランスが、読みやすさに直結します。niko and... では ryo-gothic-plusn を和文書体に採用し、palt による字詰めで美しい日本語組版を実現しています。

font-family のフォールバックチェーンでは Helvetica Neue を先頭に置き、欧文の統一感を保ちつつ、.jp クラスでは和文フォントを優先する設計です。ABCabc 123

READ MORE
04 / Buttons

BUTTON VARIATIONS

ONLINE SHOP
Navigation Pill
clothes
Emoji Pill
FEATURE
Pill (hover state)
READ MORE
Text Link
SHOP NOW
Pill on Coral
DISCOVER
Pill on Teal
LISTEN
Pill on Navy
05 / Cards

CARD COMPONENTS

春の新作コレクション到着

今季のテーマは「日常の冒険」。毎日を少しだけ特別にするアイテムが揃いました。

2026.05.29

niko and... COFFEE 新メニュー

季節のフルーツを使ったスペシャルドリンクが期間限定で登場。

2026.05.25

スタッフの愛用品紹介

各店舗のスタッフがリアルに使っている、おすすめのアイテムを公開。

2026.05.20
06 / Forms

FORM ELEMENTS

default -- border: 1px solid #000, radius: 0
focus -- border: 2px solid #000
正しいメールアドレスを入力してください
error -- border: 1px solid #dc2626
07 / Elevation

DEPTH & ELEVATION

Level 0: Flat
shadow: none, border: 1px solid #000
Level 1: Hover
0 2px 8px rgba(0,0,0,0.06)
Level 2: Modal
0 8px 24px rgba(0,0,0,0.10)
Surface: Beige
#eee9e2 -- section bg
08 / Layout

SPACING & WIDTHS

Spacing Scale (8px grid)
4px
8px
16px
24px
48px
80px
Content Widths
Max Container 1200px
Content Area 940px
Article 560px
Border Radius Scale
0px (card)
12.5px (sm pill)
15px (pill)