厳選・オープン・無料

Dokument Studio

休止中のデザインスタジオのための、ミニマルで落ち着いたポートフォリオサイト。

01

デザイン DNA

デザインスタジオの過去の作品を記録した、落ち着いたアーカイブ。

02

カラー

極度の抑制。ほぼモノクロのパレットと、リンク用の1色の機能的なブルーアクセント。

03

タイポグラフィ

condensed-grotesque · humanist-sans · monospace

• display56px · 700
• body16px · 400
• caption12px · 400

巨大なディスプレイテキストにはコンデンス・グロテスクを使用。 · 読みやすい本文にはヒューマニスト・サンズを使用。 · 小文字で大文字のユーティリティテキストには、ワイドトラッキングのモノスペースフォントを使用。

04

余白

標準の4pxを基準とし、落ち着きのある息の通ったレイアウトを支えるための大きな余白。

05

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

目に見える区切りはなし。分離はレイアウトと余白のみで実現。

06

レイアウト

単一カラムのプライマリコンテンツエリア。ナビゲーションとフッター要素は、上下の極端な位置に配置。

07

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

スクリーンショット上に、目に見えるアニメーションやトランジションのない静止レイアウト。

インタラクティブ要素に対する、控えめな透明度の変化。 · 標準のリンクナビゲーション。

08

コンポーネント

• button 細いボーダーと大きな内部パディングを持つ、ミニマルなピル型ボタン。
• card 目に見えるものなし。
• chip チームメンバー用の小さな、ピル型のアバターチップ。
• input 目に見えるものなし。
• hero 下部に視覚的なアンカーとして配置される、巨大な垂直積み重ねのコンデンスタイポグラフィロゴ。

09

文体と禁止事項

• トーン 落ち着いた、プロフェッショナルで、少しノスタルジックな。
• 見出し 大きく、インパクトのあるコンデンスタイポグラフィ。
• CTA 抑制的。テキストリンク、あるいは最小限のボーダー付きピル型ボタンの場合が多い。

• 明るくカオスな色を使わない — スクリーンショットは機能的なブルーを1色持つ抑制されたモノクロパレットを示している。
• 遊び心のある丸みのあるディスプレイフォントを使わない — スクリーンショットはディスプレイ用の非常にコンデンスされた、剛性のあるグロテスクを示している。
• 複数のカラムやグリッドでレイアウトを散らかさない — スクリーンショットは非常にオープンな、単一カラム主導のレイアウトを示している。
• 濃いドロップシャドウや3D効果を使わない — スクリーンショットは完全にフラットでボーダレスな美学を示している。
• 本文に太体を使わない — スクリーンショットはすべての標準テキストに400のレギュラーウェイトを示している。
• アイコンやイラストのような装飾要素を使わない — スクリーンショットはタイポグラフィと最小限のアバターのみに依存している。
• 避ける: 過度に興奮した言葉
• 避ける: 目立つCTAボタン
• 避ける: 複雑なUIコンポーネント

10

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

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

11

System Prompt

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