厳選・オープン・無料

Sierra

温かみのあるエディトリアル写真を用い、複雑技術を人間らしく信頼できるものに変える、洗練されたAIエージェント・プラットフォーム。

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

オリジナル: https://sierra.ai

📦 パックの中身を見る →

01

デザイン DNA

AIカスタマーエクスペリエンスエンタープライズエージェントプラットフォーム

AIエージェントのためのプレミアムコンサルタント。技術的な深さと、親しみやすく人間中心的なストーリーテリングのバランスを取ります。

02

カラー

#302E2DInk
#716F6CInk soft
#FFFFFFBG
#F6F5F3BG soft
#E4E0DCMuted
rgba(228, 224, 220, 1)Line

ウォームニュートラル:ウォームグレーと大地色を基盤としたパレット。視覚的な興味は合成アクセントではなく、高品質な写真に依存します。

03

タイポグラフィ

grotesque-sans · monospace

大きなディスプレイテキストには tighten tracking(-1.3px〜-0.38px)を適用し、洗練されたエディトリアル感を生み出します。 · ほぼすべてのテキストで厳格にウエイト400を維持。強調のためのウエイト500は非常に限定的にのみ使用します。 · 本文テキストには十分な行の高さ(1.4-1.5)を確保し、可読性を維持します。

04

余白

4px
8px
12px
16px
24px
32px
48px
64px
80px

余裕のある構造化。主要セクションには大きなパディング(80px)を、内部間隔には一貫した8/16/24pxの刻みを使用し、クリーンで息がのまるレイアウトを実現します。

05

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

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

1px solid rgb(228, 224, 220)

0px 28px 34px 0px rgba(15, 79, 138, 0.15) · 0px 75px 63px 0px rgba(15, 79, 138, 0.15)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

最大幅コンテナを備えたセンタリングされたレスポンシブレイアウト。フルブリードのエディトリアル・ヒーローから、ダッシュボード向けの構造化されたマルチカラムUIへと移行します。

07

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

220msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

color、background-color、opacity の標準的なトランジション(0.25秒) · filter などの複雑なプロパティにはやや長いトランジション(0.5秒) · インタラクティブ要素に対する繊細な transform

ボタンやナビゲーションリンクなどのインタラクティブ要素上で、滑らかな color および background のトランジション。 · プライマリCTAに対する繊細な transform(scale/translate)や opacity の変化。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Sierraは、人間中心的、エディトリアルな視点を通じて自らを位置づけるプレミアムAIエージェント・プラットフォームです。そのビジュアルDNAは、温かみのあるニュートラルなカラーパレット(インク #302E2D、ソフト背景 #F6F5F3)で定義され、高品質な写真に感情的な主役を任せます。タイポグラフィは、大きなディスプレイでタイトなトラッキングを施した洗練されたグロテスク・サンセリフで、クリーンで洗練された印象を生み出します。UIコンポーネントはシンプルで、ピル-shapedボタンと繊細なボーダーを使用します。重要な禁止事項:合成アクセントカラーの使用を避け、ヘッドラインのトラッキングはタイトに保ち、本文テキストには軽いフォントウエイトを使用し、余裕のある息のまる間隔を維持すること。全体的な印象は、信頼でき専門的でありながら、親しみやすいものです。

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

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

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

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