厳選・オープン・無料

Akaru

カスタムグロテスクフォントと広大なホワイトスペースを用いた、大胆でミニマリストなデザインエージェンシーポートフォリオ。

agencywebgl
Akaru のスクリーンショット
↓ デザインシステムをダウンロード (32 MB)OpenDesign で開く

オリジナル: https://akaru.fr

📦 パックの中身を見る →

01

デザイン DNA

太字幾何学的エディトリアル精緻

ハイエンド建築事務所のモノグラフ。

02

カラー

#E49366Accent
#0E0E0EInk
#F1EFEBBG
#BFCCD8BG quiet
#B692A1Muted
rgba(14, 14, 14, 1)Line

控えめな建築トーンの背景に、高コントラストのタイポグラフィを配置。

03

タイポグラフィ

geometric-sans · humanist-sans

必要に応じて、ステッカー的なアクセントに「Alliance Platt」（セリフ体）を使用可能。ただし、基本はサンセリフ体を使用。 · 本文および较小なUIテキストには「Alliance Neue」（ヒューマニストサンセリフ）を使用。 · 大きな表示テキストには、 tightening のletter-spacingを維持。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px
130px

広めのホワイトスペースを用いた非対称リズム。

05

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

sm · 4px
md · 8px
lg · 30px
pill · 999px

1px solid #0E0E0E

inset 0 0 0 1px #0E0E0E · inset 0 0 0 1px rgba(255, 255, 255, 0.2)

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

左揃えの大きなタイポグラフィを用いた非対称スクリーン分割レイアウト。

07

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

300msmicro
400mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing

hover時の滑らかな色と不透明度の遷移。 · 自然な印象のためのcubic-bezierイージング。

0.3秒の滑らかな色の遷移。 · 繊細な不透明度または色の変化。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

ミニマリストで大胆な美学が特徴のハイエンドデザインエージェンシーのウェブサイト。レイアウトは非対称で、ヒーローには巨大なカスタム幾何学的表示フォント（「Alliance Platt」）、本文には「Alliance Neue」を使用。カラーパレットは温かみのあるオフホワイト背景（#F1EFEB）とディープチャコールのインク（#0E0E0E）を基調とし、ダスティローズ（#B692A1）、ペールブルー（#BFCCD8）、テラコッタ（#E49366）の控えめな建築トーンでアクセントを加える。重要な禁止事項：細いタイポグラフィは決して使用しない；常に広めのホワイトスペースを維持する；標準的なUIボタン形状は決して使用せず、代わりにピル形状を使用する。デザインはプレミアム、エディトリアル、建築的。

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

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

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

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