DIGROSS FOUNDATIONS
FOUNDATIONS
DIGROSSの土台となる、色・文字・余白のルール。
迷ったら常にこのページに立ち返る。
COLORS
カラーBase
Deep Black — #09090B
Muted
Gray — #A1A1AA
Accent
Neon Lime — #CCFF00
USAGE #09090B — ページ背景。迷ったらこれ。面はvoid→surfaceの4層で奥行きを作る
USAGE #A1A1AA — 補助テキスト。本文の脇役。効かせたい文字はfg(#F4F4F5)
USAGE #CCFF00 — CTA・アクティブ・熱量の表現。大きく使うのは1画面1〜2箇所まで。二色の緊張感がDIGROSSの顔
FULL PALETTE — 全トークン
void
abyss
surface
surface-2
line
line-strong
fg
muted
dim
cream
lime
lime-dark
TYPOGRAPHY
タイポグラフィH1: DEEP STREET
DEEP STREET
- FONT
- Anton
- WEIGHT
- 400(塊の極太)
- SIZE
- 60〜128px
- USAGE
- ヒーロー・英字見出し
H2: 漆黒の見出し
才能を、
ディグれ。
- FONT
- Noto Sans JP
- WEIGHT
- 900 (Black)
- SIZE
- 30〜48px
- USAGE
- 日本語見出し
P: LO-FI CHILL
深夜2時のビートに、
言葉を乗せる。
- FONT
- Noto Sans JP
- WEIGHT
- 300 (Light)
- SIZE
- 18〜20px
- USAGE
- 引用・キャッチコピー
P: BODY
DIGROSSは、トラックメイカー、ラッパー、MIXエンジニアが出会う場所。役割とジャンルで検索して、気になる才能をDigしよう。
- FONT
- Inter + Noto Sans JP
- WEIGHT
- 400 (Regular)
- SIZE
- 14〜16px
- USAGE
- 本文・説明文
LABEL: MONO
DIGROSS — TOKYO / 03:24 / 92 BPM
- FONT
- Geist Mono
- WEIGHT
- 400
- SIZE
- 11〜12px
- USAGE
- ラベル・数値・仕様
RULE — 「重厚」はAnton/Black(900)で塊を作り、「チル」はLight(300)+広い字間で余白を作る。中間ウェイトを多用せず、太いか細いかをはっきりさせるのがDIGROSSのメリハリ。
SPACING
余白FORMS
入力欄CARDS
発掘カード(discover画面の主役)AKARI
@akari_flows ・ 東京
フックに命かけてます。トラックメイカーとのコライト相手を探しています。
yotsuya beats
@yotsuya_lofi ・ 大阪
深夜のためのビートを作っています。声を乗せてくれるラッパー募集中。
D-MIX
@dmix_studio ・ 福岡
週末エンジニア。駆け出しの音源を丁寧に磨きます。まずは1曲から。
PLAYER
下部固定プレーヤー(将来の席)Midnight Crossing
MC NEON × yotsuya beats
RULE — 波形が主役(SoundCloudへのオマージュ)。再生済みはライム、未再生は罫線色。MVPでは非表示のまま席だけ確保する。
GRADIENTS
グラデーション(重厚とチルの同居)NEON HAZE
ヒーロー・強調エリア。漆黒に滲むライム
SMOKE
カード・パネルの基本。重厚な奥行き
DUSK
チルな差し色面。Lo-Fiの夜明け前