ソーシャル・コミュニティのデザインシステム
SNS、コミュニティプラットフォーム、個人のWebサイトから抽出したデザインシステムです。フィード、プロフィール、アバター、投稿操作が特徴で、遊び心のある1色のブランドカラーと、角丸で親しみやすいコンポーネントがよく使われます。
このカテゴリーには2件のDESIGN.mdサンプルがあります（抽出元：DribbbleとSnapchat）。各サイトの公開ページから抽出したもので、公式のブランドガイドラインではありません。初めての方はDESIGN.mdとは何かをご覧ください。
Dribbble
Dribbbleのデザインシステムは、深く沈んだ黒に近いネイビー（#0d0c22）と、clean な白のサーフェスを基調としています。シグネチャーカラーのホットピンク（#ea4c89）は、編集的な強調やインタラクティブな要素のハイライトに控えめに用いられています。タイポグラフィはすべてのウェイトでMona Sansのみを使用し、階層はウェイトとサイズだけで表現されています。形状言語は、ピル型のボタン（border-radius: 1e+07px）と角丸のカード（12pxの半径）によって定義されています。レイアウトは8pxのベースグリッドに沿って余白を広くとり、エレベーションは重なりを強くするのではなく、控えめなドロップシャドウで示されています。
Snapchat
Snapchatのウェブサイトは、象徴的なブランドカラーの#FFFC00を軸にしたハイコントラストのライトテーマを採用しています。主要な面には#121314のほぼ黒に近い色を使い、ページの背景は clean な白で構成されています。タイポグラフィは、メインのAvenir NextとセカンダリーのGraphikを組み合わせ、親しみやすさと整理された階層を両立させています。ボタン、ピル型要素、タグには100pxの完全な角丸を用い、入力欄には5pxの控えめな角丸を適用しています。ナビゲーションは柔らかなドロップシャドウを持つフローティングのピル型です。コンテンツは白い文字を重ねた大きなメディアカードで表示され、アプリのプレビューを前面に出した没入感のあるレイアウトになっています。全体の情報密度は適度で、余白を十分に取り、マーケティングとプロダクトUIの両方の慣習をつなぐ明確な視覚的階層を備えています。
お探しのサイトが見つかりませんか？
URLを貼り付けるだけで、あらゆるWebサイトからDESIGN.mdを取得できます。カラー、タイポグラフィ、スペーシング、トークンを、AIワークフローですぐに使える形で。