Oracle

難易度:
業界スタイル
Oracle プレビュー

プレビュー

デザイントークン

公式ブランド資料とこのスタイルのプロンプトから導出した主要トークン。コピーするか、下の DESIGN.md と合わせて利用できます。

カラー

  • primaryブランドカラー

    主要アクションとハイライト

  • on-primary推定

    プライマリ上のテキスト

  • secondary推定

    タグ、バッジ、副次的な強調

  • on-secondary推定

    セカンダリ上のテキスト

  • neutralプロンプト

    ページ背景

  • on-neutral推定

    背景上のテキスト

  • surface推定

    カード、パネル、オーバーレイ

  • on-surface推定

    サーフェス上のテキスト

  • border推定

    ボーダーと区切り線

角丸と形状

プロンプト
sm · 2px
md · 4px
lg · 6px
full

スペーシング

推定
  • sm8px
  • md12px
  • lg24px

シャドウとエレベーション

プロンプト

階層は柔らかく低コントラストのシャドウで表現します。

タイポグラフィ

推定
  • Ag

    見出し 32px · ボールド

    Inter

  • Ag

    本文 16px · レギュラー

    Inter

  • Ag

    ラベル 13px · ミディアム

    Inter

Oracle の UI は、彩度ではなく暖色のニュートラル階調で企業らしさをつくります。白 #ffffff から #211e1c までの六段階が全幅・角丸なしのバンドを染め分け、影を一切使いません。企業サイトの一覧ページでは Oracle Sans のウェイト 300 が見出しを担い、製品ページでは Georgia のセリフに切り替わり、本文 350 と見出し 800 の差が階層を支えます。赤 #c74634 はワードマークだけに残し、操作は暖かいチャコール #312d2a の 4px 角ボタン、ヒーロー下の 40×4px の金線だけが装飾です。

Oracleプロフェッショナルとエンタープライズ

プロンプトテンプレート

基本テンプレート
Design an Oracle-inspired interface. - A six-rung warm neutral ladder (#ffffff, #fbf9f8, #f5f4f2, #f1efed, #e4e1dd, #211e1c) carrying every full-bleed band, square-cornered and free of shadows; - Two display registers: Oracle Sans at weight 300 for corporate index headlines, Georgia serif at 36-56px across product pages; - An extreme weight jump from 350/400 body copy to 800 section headings, with letter-spacing held at zero; - Actions in warm charcoal #312d2a at a 4px radius with 10px 16px padding, never a coloured CTA; - Oracle red #c74634 reserved for the wordmark, and one 40x4px gold #f0cc71 rule under the hero headline; - Chromatic colour only at full-band scale, as teal #d6e5e5 strips and forest #33553c bands. Colors: #ffffff, #f1efed, #312d2a, #c74634 with #c74634 accent. Typography: Oracle Sans and Georgia serif.

バリエーションプロンプト

📱 モバイル
Design a mobile app with Oracle aesthetics. Layer warm neutral surfaces, set headings in Georgia and keep actions in charcoal; the red wordmark supplies the only colour. Calm, touch-friendly, native feel.
💻 Web
Design a web application with Oracle style. Stack full-bleed neutral bands, use Georgia for product headlines and 800-weight Oracle Sans for sections. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Oracle design language. Separate panels with hairlines and tonal steps instead of shadows, and reserve charcoal for the active state. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Oracle visual identity. Open on a warm canvas with a Georgia headline, a 40x4px gold rule and a quiet charcoal CTA. Compelling, conversion-focused.

使用例

Oracle クラウドカタログ

Web
Build a web catalogue with Oracle design language: warm neutral bands, Georgia headlines, charcoal buttons and a single red wordmark.

Oracle データコンソール

ダッシュボード
Create a dashboard using Oracle style with hairline-divided tables, 800-weight headings and no shadows.

✅ 適した用途

  • 大規模なエンタープライズソフトウェアとデータベースのサイト
  • CIO 向けのソリューションカタログ
  • 抑制の効いた品格が求められる製品ドキュメント

❌ 適さない用途

  • ネオンとモーションを強調するクリエイティブポートフォリオ
  • 子ども向けのポップな教育アプリ

DESIGN.md ファイル

design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。

ダウンロード