厳選・オープン・無料
Nan
探索的でサービス志向のタイポグラフィデザイン・プラクティス。
TypographyDesign ToolsStudioExpressiveBold Typography
01
デザイン DNA
探索的サービス志向タイポグラフィデザインユニーク知的魅力的
大胆で、型にはまらないタイプファウンドリのウェブサイト。
02
カラー
#262626Ink
#B7FFB4BG
#9D968EMuted
rgba(38, 38, 38, 0.2)Line
実験的で生々しい美感を生むため、暗い炭色のテキストを背景にハイコントラストのネオングリーンを採用。
03
タイポグラフィ
transitional-serif · geometric-sans · mono-linear
- display
162px · 500 - body
16px · 400 - mono
13px · 400
ドラマチックなタイポグラフィ階層を構築するため、ハイコントラストのサイズを使用。 · モノフォントはUIとメタデータにのみ使用。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
8pxの垂直リズム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 8px
lg · 18px
pill · 999px
1px solid #262626
0px -1px 10px 0px rgba(172, 171, 171, 0.3)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
大きなタイポブロックと鮮やかなカラーフィールドを含む、非対称で大胆なグリッド。
07
モーションとインタラクション
100msmicro
200mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
hover状態のための、滑らかなopacityフェード。 · インタラクティブ要素のための、微細なtransform。
opacityが下がるか、色が変化。 · 即座の視覚的フィードバック。
08
コンポーネント
- button 最小限のボーダーまたは塗りつぶしで、小さく機能的なデザイン。
- card 太字のタイポグラフィオーバーレイを持つ、大きく色彩豊かなブロック。
- chip 小さなボーダー付きタグまたはラベル。
- input 鋭いボーダーと特定のモノフォントでスタイリング。
- hero ビューポートを支配する、マキシマリストで过大なタイポグラフィ。
09
文体と禁止事項
- トーン 遊び心があり、実験的で、自信に満ちている。
- 見出し 極めて大きく、トラッキングがタイトで、太字。
- CTA 率直で、しばしば下線付きまたはボーダー付き。
- 柔らかく丸い角を使用しない — スクリーンショットは鋭い2pxのボーダーを示しています。
- 微細なパステル調の背景を使用しない — スクリーンショットは鮮やかな#B7FFB4グリーンを示しています。
- すべてに標準的なサンセリフを使用しない — スクリーンショットはヘッドラインに独自のトランジショナルセリフを示しています。
- タイポグラフィを隠さない — スクリーンショットはタイポグラフィを主要な視覚要素として示しています。
- 複雑なドロップシャドウを使用しない — スクリーンショットはフラットでハイコントラストなサーフェスを示しています。
- 強調のために小さなフォントサイズを使用しない — スクリーンショットは過大なディスプレイテキストを示しています。
- 避ける: あまりにも企業的な言葉遣い
- 避ける: 複雑なグラデーション
- 避ける: 標準的な企業向けレイアウト
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
NaNは、生々しく実験的な美感を持つ、大胆で文字を重視したデザイン・プラクティスです。コアパレットは、鮮やかなネオングリーン(#B7FFB4)の背景と暗い炭色(#262626)のテキストの対比を特徴としています。タイポグラフィがヒーローであり、巨大なディスプレイヘッドラインにはトランジショナルセリフ、UIにはジオメトリックなサンセリフ/モノフォントを使用します。重要な禁止事項:柔らかいまたは企業的なビジュアルは使用せず、強調のために小さな文字サイズは避け、決して標準的なテンプレートの背後にタイポグラフィの個性を隠さないこと。このシステムは、タイポグラフィを主要な視覚ツールとする表現力豊かで型にはまらないレイアウトをサポートします。
en · zh-CN · zh-TW · ja · ko