厳選・オープン・無料

Ujjo

大胆なネオングリーンとダークグレーの分割背景と、鋭いタイポグラフィアクセントを活用したハイコントラストの編集インターフェース。

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

オリジナル: https://ujjo.com

📦 パックの中身を見る →

01

デザイン DNA

BoldEditorialMinimalHigh-Contrast

印象的な分割トーンレイアウトを持つ、洗練されたデジタルマガジンまたは編集プラットフォーム。

02

カラー

#3FD300Accent
#000000Ink
#212121BG
#303030BG soft
#1A1A1AMuted
rgba(0,0,0,1.0)Line

鮮やかなネオングリーンと深いダークグレーの極端なコントラスト。プライマリテキストには黒を使用。

03

タイポグラフィ

transitional-serif · monospace

見出しと本文の両方で、セリフ体が主流。 · 強調や見出しに、ヘビーなウェイト（700-900）を頻繁に使用。

04

余白

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

4pxのベースグリッド。見出し要素の周りには寛大なpaddingを設定。

05

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

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

ボーダーラジウスはなし。全サーフェス要素は鋭い長方形のエッジ。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

分割背景レイアウト（左：ネオングリーン、右：ダークグレー）に、オーバーレイのコンテンツブロックを配置。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

インタラクティブ要素に適用される標準CSS transition。

CSS transitionによる標準的なテキストリンクのホバーエフェクト。 · インタラクティブ要素にはデフォルトのポインタカーソル。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このサイトは、ネオングリーン（#3FD300）とダークグレー（#212121）の印象的な分割背景が特徴の、大胆でハイコントラストの編集レイアウトを特徴としています。タイポグラフィは厳密にセリフ体ベース（Times New Roman）で、強調にはヘビーなウェイト（700-900）が使用されます。デザインは完全にフラットで、ボーダーラジウス、ドロップシャドウ、ソフトグラデーションはありません。主要なHEXカラーは #3FD300、#000000、#212121 です。重要な禁止事項：角丸を一切使わないこと、サンセリフ体フォントを使わないこと、ドロップシャドウやソフトパステルカラーパレットを適用しないこと。レイアウトは鋭い幾何学的ブロックと左揃えのテキストに依存しています。

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

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

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

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