厳選・オープン・無料

Highsnobiety

ストリートウェア文化とファッションニュースのためのプレミアムエディトリアルプラットフォーム。

editorialstreetwear
Highsnobiety のスクリーンショット
↓ デザインシステムをダウンロード (31 MB)OpenDesign で開く

オリジナル: https://www.highsnobiety.com

📦 パックの中身を見る →

01

デザイン DNA

editorialstreetwearpremiumcultural

ファッション、文化、商業を融合させたプレミアムストリートウェア雑誌。

02

カラー

#263D43Accent
#000000Ink
#020202Ink soft
#FFFFFFBG
#F0F0F0BG soft
#E0E0E0BG quiet
#737373Muted
rgba(0,0,0,0.1)Line

ハイコントラストなモノクロームに、エディトリアルなハイライトとして落ち着いたオリーブ/カーキのアクセントを加えた配色です。

03

タイポグラフィ

grotesque-sans

見出しとナビゲーションは、 tightened tracking の全角（大文字）を使用します。 · 本文は快適な行間で読みやすく構成します。 · プライマリフォントはカスタムのグロテスクサンセリフ（HS Sans）です。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一貫した垂直リズムとpaddingのために、4pxの倍数で構成します。

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 12px
pill · 999px

#000000または#737373を使用した、薄い1pxの（下方向に重みのある）borderです。

0px 1px 0px 0px rgba(0,0,0,1) · 0px 0px 0px 0px rgba(0,0,0,0.12) · 0px 0px 0px 0px rgba(0,0,0,0.08)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

目立つヒーローセクションに続き、コンテンツブロックを配置するクラシックなエディトリアルグリッドです。

07

モーションとインタラクション

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

オーバーレイ用の滑らかなopacity遷移（2秒）。 · 要素のための控えめなtransformアニメーション（1秒）。 · UIインタラクションのための短い遷移（0.2秒のborder/opacity）。

テキストリンクに下線が現れ、インタラクティブな要素に微妙な色の変化が生じます。 · 状態変化やわずかなスケーリングによる、即座の視覚的フィードバックを提供します。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Highsnobiety — 桌面首屏（hero）
桌面首屏（hero）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Highsnobiety — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

Highsnobietyは、プレミアムなストリートウェアとカルチャーのエディトリアルプラットフォームです。そのデザインDNAはハイコントラストなモノクロームパレットに基づいており、#000000と#FFFFFFを主軸とし、#263D43や#737373のような落ち着いたアクセントを時折使用します。タイポグラフィは、見出しとナビゲーションに大胆な全角（大文字）スタイルで使用するカスタムのグロテスクサンセリフ（HS Sans）で、本文は快適な1.6の行間です。重要なデザインルール：遊び心のある要素や角丸の要素は避け、明るい色やネオンカラーは決して使用せず、厳格でクリーンなエディトリアルグリッドを維持すること。装飾的な飾りよりも、常に大きくインパクトのあるイメージと明確なタイポグラフィ階層を優先すること。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

en · zh-CN · zh-TW · ja · ko