每日设计灵感 · 2026-10-15

Web

Stripe

渐变字 Hero · Logo 跑马灯 · indigo 胶囊 CTA

Global GDP running on Stripe: 1.73%

Financial infrastructure
to grow your revenue.

Accept payments, handle business banking, and implement custom revenue models.

浅色金融基建首页：眉题 GDP 数字、标题里「your revenue」用紫粉黄渐变字，下方灰阶 Logo 跑马灯。点 CTA 会轻微下压；重播可看渐变字淡入和跑马灯复位。气质接近喜欢的 Dub：留白、克制色、轻动效。

SaaSFintech微动效

关键参数

品牌紫 --hds-color-core-brand-600:#533afd（stripe.com CSS）
渐变字 background:linear-gradient(270deg,#ffd601,#ee30fb,#635bff) + background-clip:text（源码）
缓动 cubic-bezier(.22,1,.36,1)（stripe CSS 常见）
Logo 跑马灯 40s linear infinite + 双边 fade mask（demo 增强，结构来自 .logo-carousel__marquee）
Logo 用灰字占位，非原站文件

关键代码

/* stripe.com CSS（摘录） */
--hds-color-core-brand-600: #533afd;
background-image: linear-gradient(270deg, #ffd601, #ee30fb, #635bff);
-webkit-background-clip: text; background-clip: text; color: transparent;
/* Logo 跑马灯结构来自 .logo-carousel__marquee；时长 40s 为 demo 增强 */
@keyframes st-scroll { to { transform: translate(-50%); } }

stripe.com ↗

Web

Supabase

绿标题 · 绿胶囊 CTA · Auth 叠层 chip

Build in a weekendScale to millions

Postgres database, Authentication, Edge Functions, Realtime, Storage.

AuthenticationReady

alex@studio.dev
sam@north.io
lee@craft.app
joy@pixel.co

白底极简：一句「Build in a weekend / Scale to millions」（第二行品牌绿），绿胶囊主 CTA + 白边次 CTA。下方 Auth 卡用叠层邮箱 chip 依次淡入，像真实用户列表在呼吸。风格贴合 Ollama/Clerk：浅色、圆角、一点绿色点缀。

SaaSBackend微动效

关键参数

品牌绿 #3ECF8E（supabase.com CSS 出现）
--brand-default:153.1deg 60.2% 52.7% ≈ #3ECF8E
缓动 cubic-bezier(.22,1,.36,1) / .16,1,.3,1（supabase CSS）
Auth chip 依次进场 delay 为 demo 增强
邮箱用占位，非真实用户

关键代码

/* supabase.com */
color: #3ECF8E; /* --brand / #3ECF8E */
.cta { background:#3ECF8E; border-radius:999px; }
/* demo 增强：chip 依次 blur/上浮进场 */
@keyframes sb-chip { from { opacity:0; transform:translateY(10px) scale(.96); } }

supabase.com ↗

App

ElevenReader · Libraries 空状态

插画空状态 · 黑胶囊 CTA · 灰阶极简

Your Libraries are empty

Start listening to fill this space with your favorite titles.

空状态把画面压到最少：上方浅灰插画（书架+耳机）、一句主标题、一行说明、底部黑色胶囊「Start listening」。大留白本身就是设计，点 CTA 会短暂变成「Listening…」再弹回。气质贴近 Cash App / Ollama。

iOSEmpty stateAudio

关键参数

结构照 Mobbin：插画、标题、副文、黑 pill CTA
CTA 黑底白字，全宽圆角胶囊，min-height 48px（按截图估计）
背景浅灰 ≈ #F4F4F5，插画区略深灰
文案来自截图：Your Libraries are empty / Start listening
按钮反馈 scale .97 + 文案切换为 demo 增强

关键代码

/* ElevenReader 空状态（按 Mobbin 截图估计） */
.cta { background:#111; color:#fff; border-radius:999px; min-height:48px; width:100%; }
/* 中间故意留白：插画 + 文案居中，CTA 贴底 */

Mobbin 截图 ↗

App

Agoda · Notification Center

白卡通知 · 红未读点 · 蓝描边胶囊

Notification Center

7h

Your booking at European Hostel is confirmed.

You can view this booking details on My Bookings under Upcoming tab

12h

Your booking at City Stay Hotel is confirmed.

You can view this booking details on My Bookings under Upcoming tab

通知中心用浅灰蓝底 + 白圆角卡：绿确认图标、红未读点、右下蓝描边胶囊「View booking details」。点胶囊会把未读点收掉并淡化卡片，像「已读」微交互。干净、浅色、克制。

iOSNotificationsTravel

关键参数

结构照 Mobbin：返回、标题、白卡、绿图标、红点、蓝边胶囊
背景 ≈ #EEF1F6，卡片白，圆角 ≈16px（按截图估计）
胶囊边框蓝 ≈ #2B6DE5，文字同色
未读红点 ≈ #E11D2E
点胶囊清除未读为 demo 增强

关键代码

/* Agoda Notification（按 Mobbin 截图估计） */
.card { background:#fff; border:1px solid #dce6f5; border-radius:16px; }
.pill { border:1.5px solid #2B6DE5; border-radius:999px; color:#2B6DE5; }
.unread-dot { width:8px; height:8px; background:#E11D2E; border-radius:50%; }

Mobbin 截图 ↗

App

N26 · Uploading

细环进度 · 大留白 · 底部提示条

Upload documents

上传页把一切压成中心一件事：粗细适中的圆环进度 +「Uploading...」+ 一行说明，底部浅灰提示条。点「模拟上传」看进度环走动，点 × 可取消。极简到接近 Ollama 单屏。

iOSUploadFintech

关键参数

结构照 Mobbin：X、标题、圆环、说明、底栏提示
进度环 teal ≈ #0D7377（按截图估计）
stroke 约 4px，轨道浅灰
底栏浅灰圆角条
进度动画为 demo 增强（SVG stroke-dashoffset）

关键代码

/* N26 Uploading（按 Mobbin 截图估计） */
.ring { stroke:#0D7377; stroke-width:4; stroke-linecap:round; }
/* demo 增强：stroke-dashoffset 驱动进度 */
.note { background:#f2f2f2; border-radius:12px; }

Mobbin 截图 ↗

App

Mercury · Balance 看板

大额数字 · 面积图 · 绿红流向

Mercury balance

$1,992^.04

↗ $10.60↘ -$20.56

November 2025 ›

Money in↗ $0.00

Money spent↘ -$6.41

银行首页看板：大号余额（分位上标）、30D 绿入/红出、淡紫面积图、下方月份进出账。点「刷新」会让数字短暂滚动、面积图从左擦入。浅色、留白、数字证明——贴合 Ollama / Cash App 喜好。

iOSDashboardFintech

关键参数

结构照 Mobbin：余额、30D 流向、面积图、月汇总、底 Tab
余额字号大、分位上标（按截图估计）
面积图线色 ≈ #8B9CFF，填充淡紫渐变
绿 ≈ #12A150，红 ≈ #D1435B
数字滚动与图表擦入为 demo 增强

关键代码

/* Mercury Balance（按 Mobbin 截图估计） */
.balance { font-size:40px; font-weight:700; }
.balance sup { font-size:20px; }
.chart-line { stroke:#8B9CFF; stroke-width:2.5; }
/* demo 增强：stroke-dashoffset 擦入 + 数字 blur 上浮 */

Mobbin 截图 ↗

把好设计拆开来玩

Financial infrastructureto grow your revenue.

Build in a weekendScale to millions

Your Libraries are empty

$1,992.04

把好设计
拆开来玩

Financial infrastructure
to grow your revenue.

$1,992^.04