厳選・オープン・無料

Hourly App

巨大で詰め込まれたタイポグラフィと、斬新な黒-赤-クリームのパレットで定義される、生産性アプリのランディングページ。

Bold TypographyApp UIMinimalMobile UITooling
Hourly App のスクリーンショット
↓ デザインシステムをダウンロード (5 MB)OpenDesign で開く

オリジナル: http://hourly-app.com

📦 パックの中身を見る →

01

デザイン DNA

ミニマル大胆遊び心機能的

ユーティリティアプリのための、ハイコンストラクトなタイポグラフィポスター

02

カラー

#D0021BAccent
#EEE1C1Ink
#0A0A0ABG
rgba(238, 225, 193, 1)Line

黒、クリーム、赤の厳密な3色パレットによる、極端なコントラスト。

03

タイポグラフィ

grotesque-sans

すべてのプライマリテキストは、ボールドのグロテスクサンセリフで設定。 · 全体を通して、タイトなトレッキングとラインハイトが使用される。 · テキストがプライマリなビジュアル要素として機能することが多い。

04

余白

4px
8px
16px
20px
24px
32px

一貫したグリッドではなく、大規模なタイポグラフィブロックに-drivenな、不規則なリズム。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

セクションを分割する1px solid #EEE1C1の水平ルール

06

レイアウト

1280container
1columns
768breakpoints

大規模なタイポグラフィヒーローセクションとスマートフォンモックアップを持つ、全幅の垂直スタック。

07

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

200msmicro
250mssmall
0msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

hoverとインタラクション時のシンプルなトランジション。

インタラクティブ要素上でカーソルがポインタに変わる。 · 標準のポインターインタラクション。

08

コンポーネント

09

文体と禁止事項

10

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

Hourly App — 桌面首屏（hero）
桌面首屏（hero）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Hourly App — 移动首屏
移动首屏

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

11

System Prompt

このデザインは、メッセージを伝えるために、ほぼすべての大規模で密に詰め込まれたボールドタイポグラフィに依存する、ミニマルでインパクトの強いモバイルアプリのランディングページです。コアパレットは3色に制限されています：近黒の背景（#0A0A0A）、プライマリテキストとボーダー用の暖かいクリーム色（#EEE1C1）、アクセントと強調用の鮮やかな赤（#D0021B）。タイポグラフィはボールドのグロテスクサンセリフで、 часто 大きなサイズにスケールされ、非常にタイトなリーディングとトレッキングで設定されます。主要なデザイン制約には、ライトウェイトのフォントを避けること、幅広な文字間隔を避けること、ドロップシャドウや複雑な背景を避けること、斬新でハイコントラクトの美学を維持することが含まれます。レイアウトは、テキストブロックを分割するスマートフォンモックアップを持つ、シングルカラムの垂直スタックです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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