厳選・オープン・無料

Hocradio Eu

高密度の情報表示と連続的なオーディオ再生のために設計された、ミニマルなダークモードラジオアーカイブ。

01

デザイン DNA

硬派な機能主義的ブロードキャストコンソール、あるいはブルータリストなプレイリストアーカイブ。

02

カラー

絶対的なモノクローム。コンテンツがすべてであるため、視覚的ノイズは、黒背景に白文字、控えめなグレーのアクセントという厳格な構成にまで縮減されます。

03

タイポグラフィ

geometric-sans

• display24px · 500
• body20px · 500
• caption16px · 500

タイポグラフィは、厳密にウェイト500と400で設定します。 · 見出しやタイトルには太字ウェイトを使用せず、均一なテクスチャを維持します。

04

余白

1.5から2.0の行間比率が、密なテキスト環境に十分な呼吸空間を提供します。

05

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

1pxのsolid white線が、プライマリグリッドとインタラクティブなボーダーを定義します。

none

06

レイアウト

ラジオアーカイブ用の、等幅セルからなる厳格な4x2（または4xN）グリッド。デスクトップでは、右側に情報のための固定カラムを設けます。

07

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

UI状態変化のためのスムーズなopacity transition。 · インタラクティブ要素のための繊細なcolor shift。 · プレーヤーバー内の流れるようなオーディオ波形ビジュアライゼーション。

インタラクティビティを示すために、テキストとボーダーに対する繊細なopacity Reductionまたはcolor shift。 · smooth transitionで支援される、即時状態変化またはナビゲーション。

08

コンポーネント

• button 1px solid whiteのボーダー、大文字変換、背景塗りつぶしなしのテキストベースボタン。
• card 1px whiteボーダーの交差点のみで定義されるグリッドセル。ヘッダーを上揃え、メタデータを下揃えに配置します。
• chip カンマで区切られたインラインテキストタグ。境界ボックスのない標準本文フォントを使用します。
• input ボーダーのないミニマルなフィールド、または検索とナビゲーションのためのシンプルなテキストリンク。
• hero 最新のオーディオアーカイブを即座に表示する、情報優先の密なグリッド。

09

文体と禁止事項

• トーン 率直で、情報に富み、ややアヴァンギャルド。
• 見出し セクションラベルはすべて大文字（例：'INFO', 'CONTACT'）、コンテンツタイトルはミックスケース。
• CTA 控えめな、テキスト主体のリンク（例：'Soundcloud ->'）。目立つボタンの形状は使用しません。

• カラーアクセントは使用しない — スクリーンショットは厳格なモノクローム（黒、白、グレー）を示しています。
• 角丸は使用しない — スクリーンショットは0pxのborder-radiusを持つ厳格なグリッドを示しています。
• ドロップシャドウは使用しない — スクリーンショットはフラットな1px whiteボーダーのみを深度の手がかりとして示しています。
• 太字ウェイトは使用しない — スクリーンショットはすべてのテキストにmediumとregularウェイトを示しています。
• 複雑な背景は使用しない — スクリーンショットは純黒の背景を示しています。
• 装飾的なアイコンは使用しない — スクリーンショットは'+'や矢印など、必須の機能シンボルのみを示しています。
• 避ける: 装飾的なフリューや不必要なイラストは避ける。
• 避ける: 太字ウェイトやドラマチックなサイズのコントラストは避ける。
• 避ける: 複雑なカラーグラデーションやマルチヒューパレットは避ける。
• 避ける: 角丸や柔らかい形状は避ける。
• 避ける: 深い影のある雑然としたレイアウトは避ける。
• 避ける: カジュアルまたは過度に熱狂的な言葉遣いは避ける。

10

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

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

11

System Prompt

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