厳選・オープン・無料

Bear

洗練されたテキスト優先のインターフェースを持つ、集中力の高いマークダウンノートアプリ。

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

オリジナル: https://bear.app

📦 パックの中身を見る →

01

デザイン DNA

ミニマルマークダウン集中Appleネイティブ

Appleエコシステム向けにデザインされた、クリーンでモダンなノート

02

カラー

#DD4C4FAccent
#444444Ink
#FFFFFFBG
#888888Muted
rgba(68,68,68,1)Line

ハイコントラストなテキストと単一のウォームレッドアクセントを配した、クリーンな白のキャンバス。

03

タイポグラフィ

humanist-sans · monospace

見出しには、適度なトラッキングを持ったクリーンなヒューマン・サンセリフを使用 · 本文テキストには同じフォントファミリーを使用し、読みやすさのために広めの行間を設定 · 等幅フォントはコードスニペットや技術リファレンス専用とする

04

余白

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

主要セクション間に広めの64pxの垂直リズム

05

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

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

1px solid #444444

0px 13px 34px 0px rgba(0, 0, 0, 0.12) · 0px -5px 15px 1px rgba(0, 0, 0, 0.2)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツセクションとアプリスクリーンショットセクションを交互に配置した、中央揃えの単一カラムレイアウト

07

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

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

コンテンツセクションの滑らかなフェードイン · アプリスクリーンショットの繊細な浮遊効果

ナビゲーションやボタンに対する繊細な透明度または色の変化 · 最小限の視覚状態変化による即時フィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Bearは、Appleエコシステム向けにデザインされた集中力の高いマークダウンノートアプリです。デザインDNAは、極度の抑制、クリーンな白のキャンバス、単一のウォームレッドアクセント (#DD4C4F) で特徴づけられます。タイポグラフィは、表示用と本文用の両方に洗練されたヒューマン・サンセリフ (bearsans/bearsansheadline) を使用し、boldで適度なトラッキングのヒーローヘッドラインを採用しています。レイアウトは厳密に単一カラムで中央揃え、広めの垂直リズム (64px) とワイドマージンを確保しています。重要な禁止事項: ダークモードをプライマリサーフェスとして使用しない、重いドロップシャドウを避ける、攻撃的なグラデーションを使用しない、密な複数カラムレイアウトでインターフェースを雑踏させない、すべてのボーダーを薄く繊細に保つ。インタラクションモデルはミニマルで、複雑なモーションではなくhover状態と繊細なトランジションに依存します。声のトーンはフレンドリーで控えめ、クリーンでマークダウンベースの執筆というアプリの中核的ベネフィットに焦点を当てています。

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

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

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

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