厳選・オープン・無料

Cinderbloc

強い幾何学的基盤を持つ、モノクロームでタイポグラフィ主導のアイデンティティ。

01

デザイン DNA

デジタルデザインのための、大胆で建築的な基盤。

02

カラー

厳格な黒、白、グレーパレットを使用した極度のコントラスト。

03

タイポグラフィ

geometric-sans

• display62px · 300
• body15px · 400

ディスプレイテキストはすべて大文字にします。 · 大きなディスプレイサイズにはライトウェイト（300）を使用します。

04

余白

豊かな余白、呼吸スペースのための大きなpadding値。

05

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

幾何学形状に使用される、細く正確な線（3px）。

06

レイアウト

幾何学的に正確に配置された、大きくクリーンなスペースブロック。

07

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

カスタムcubic-bezierイージングを使用した、滑らかで洗練されたトランジション。 · 要素は軽微な変形を伴ってフェードインします。

不透明度や軽微な変形を伴う、微細な状態変化。 · トランジションによる即座の視覚的フィードバック。

08

コンポーネント

• button 幾何学的、高コントラスト、大文字テキスト。
• card 細いアウトラインと豊かなpaddingで定義。
• chip 高コントラストのシンプルで幾何学的な形状。
• input クリーンでミニマル、正確なborderを持つ。
• hero 支配的なタイポグラフィと、大きな幾何学的な背景形状。

09

文体と禁止事項

• トーン 権威があり、構造的で、自信に満ちている。
• 見出し 太く、大文字で、しばしば幾何学的に配置される。
• CTA 明確で、大文字、かつ直接的。

• 複数のフォントファミリーを使わない — スクリーンショットは単一の幾何学サンセリフを示している。
• 明るく飽和した色を使わない — スクリーンショットは厳格なモノクロームパレットを示している。
• 丸みを帯びた、遊び心のある形状を使わない — スクリーンショットは鋭い幾何学的フォームを示している。
• ディスプレイテキストに太いフォントウェイトを使わない — スクリーンショットはライトウェイト（300）を示している。
• 見出しに小文字を使わない — スクリーンショットは大文字テキストを示している。
• 複雑なシャドウやグラデーションを追加しない — スクリーンショットはフラットでクリーンなサーフェスを示している。
• 避ける: 遊び心のある、またはカジュアルな言葉。
• 避ける: 装飾的または華やかな要素。
• 避ける: 複雑なカラーパレット。

10

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

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

11

System Prompt

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