基于Notion设计系统的金融仪表盘:侧边栏、指标卡、面积图与交易表格

By admin, 23 May, 2026
角色
assistant
content

```json{"summary":"基于 Notion 设计系统的金融仪表盘,含侧边栏、指标卡、面积图与交易表格共5个区块","widget":{"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>FinLedger — Dashboard</title>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…\" rel=\"stylesheet\">\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script src=\"https://unpkg.com/lucide@latest\"></script>\n <style>\n :root {\n --color-primary: #5645d4;\n --color-primary-hover: #4534b3;\n --color-primary-active: #3a2a99;\n --color-secondary: #1a2a52;\n --color-accent: #2a9d99;\n --color-success: #1aae39;\n --color-warning: #dd5b00;\n --color-danger: #e03131;\n --color-info: #0075de;\n --color-background: #f6f5f4;\n --color-foreground: #1a1a1a;\n --color-card: #ffffff;\n --color-border: #e5e3df;\n --color-muted: #bbb8b1;\n --color-hairline-soft: #ede9e4;\n --color-hairline-strong: #c8c4be;\n --color-charcoal: #37352f;\n --color-slate: #5d5b54;\n --color-steel: #787671;\n --color-stone: #a4a097;\n --color-ink-deep: #000000;\n --color-on-dark: #ffffff;\n --color-on-dark-muted: #a4a097;\n --color-card-tint-lavender: #e6e0f5;\n --color-card-tint-rose: #fde0ec;\n --color-card-tint-mint: #d9f3e1;\n --color-card-tint-sky: #dcecfa;\n --color-card-tint-peach: #ffe8d4;\n --color-brand-orange-deep: #793400;\n --color-brand-green: #1aae39;\n --color-brand-purple-800: #391c57;\n --color-surface: #f6f5f4;\n --color-canvas: #ffffff;\n --color-brand-navy-mid: #1a2a52;\n --shadow-sm: rgba(15, 15, 15, 0.04) 0px 1px 2px 0px;\n --shadow-md: rgba(15, 15, 15, 0.08) 0px 4px 12px 0px;\n --shadow-lg: rgba(15, 15, 15, 0.12) 0px 12px 32px 0px;\n --shadow-xl: rgba(15, 15, 15, 0.20) 0px 24px 48px -8px;\n --radius-sm: 4px;\n --radius-md: 8px;\n --radius-lg: 12px;\n --radius-xl: 16px;\n --radius-full: 9999px;\n --dur-micro: 80ms;\n --dur-base: 160ms;\n --dur-expressive: 240ms;\n --dur-deliberate: 400ms;\n --dur-exit: 120ms;\n --ease-standard: cubic-bezier(0.2, 0, 0, 1);\n --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);\n --ease-entering: cubic-bezier(0, 0, 0, 1);\n --ease-exiting: cubic-bezier(0.4, 0, 1, 1);\n --sidebar-width: 240px;\n --sidebar-collapsed: 64px;\n --topbar-height: 56px;\n --font-heading: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;\n --font-body: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;\n color-scheme: light dark;\n }\n\n @media (prefers-color-scheme: dark) {\n :root {\n --color-primary: #7b6ff0;\n --color-secondary: #0f1a33;\n --color-accent: #3db8b3;\n --color-background: #0a0f1a;\n --color-foreground: #e8e6e3;\n --color-card: #141b2d;\n --color-border: #1e2a44;\n --color-muted: #5d5b54;\n --color-hairline-soft: #1e2a44;\n --color-hairline-strong: #2a3a5c;\n --color-charcoal: #d0cec9;\n --color-slate: #a4a097;\n --color-steel: #8a8680;\n --color-stone: #6b6762;\n --color-surface: #0f1525;\n --color-canvas: #141b2d;\n --color-card-tint-lavender: #1e1a30;\n --color-card-tint-rose: #2a1a24;\n --color-card-tint-mint: #152820;\n --color-card-tint-sky: #15202a;\n --color-card-tint-peach: #2a1e14;\n --shadow-sm: rgba(0, 0, 0, 0.20) 0px 1px 2px 0px;\n --shadow-md: rgba(0, 0, 0, 0.30) 0px 4px 12px 0px;\n --shadow-lg: rgba(0, 0, 0, 0.40) 0px 12px 32px 0px;\n }\n }\n\n *, *::before, *::after { box-sizing: border-box; }\n\n html { scroll-behavior: smooth; }\n\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 1ms !important;\n scroll-behavior: auto !important;\n }\n html { scroll-behavior: auto; }\n }\n\n body {\n margin: 0;\n font-family: var(--font-body);\n font-size: 0.9375rem;\n font-weight: 400;\n line-height: 1.55;\n color: var(--color-foreground);\n background: var(--color-background);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-variation-settings: 'wght' 400;\n }\n\n h1, h2, h3, h4 { font"},"plan":{"planId":"8b7f1e3a-5c2d-4f9a-a6d1-3e7b2c9a0f41","goal":"构建数据密集型金融仪表盘,30 秒内完成核心指标扫读与异常交易定位","audience":"金融科技产品运营、财务分析与风控团队,需要高密度数据概览与快速操作入口","tone":"editorial-functional","type":"fullHTML","designTokens":{"style":{"name":"editorial-fintech-dashboard","mood":"serious","keywords":["sober-geometry","data-dense","pastel-metrics","navy-structure","precise-typography"],"density":"compact","philosophy":"将 Notion 的克制编辑风几何注入金融数据表面,深色结构侧边栏锚定空间,淡彩指标卡提供呼吸窗口,表格回归极简线条让数字自己说话。"},"colors":{"primary":"#5645d4","secondary":"#1a2a52","accent":"#2a9d99","success":"#1aae39","warning":"#dd5b00","danger":"#e03131","info":"#0075de","background":"#f6f5f4","foreground":"#1a1a1a","card":"#ffffff","border":"#e5e3df","muted":"#bbb8b1"},"cssVarPrefix":"--color-","states":{"hover":"#4534b3","active":"#3a2a99","focus":"#5645d4","disabled":"#e5e3df"},"colorRoles":{"primary":{"name":"Notion Purple","role":"Primary CTA, sidebar active indicator, chart accent line"},"secondary":{"name":"Brand Navy Mid","role":"Sidebar background, dark structural surfaces"},"accent":{"name":"Brand Teal","role":"Sparklines, chart fill gradient, positive trend indicators"}},"gradients":[{"name":"chart-area-fill","stops":"linear-gradient(180deg, rgba(86,69,212,0.18) 0%, rgba(86,69,212,0.02) 100%)","role":"Revenue chart area fill"}],"fonts":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono","display":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif","body":"'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif","mono":"'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace"},"variableAxes":{"heading":{"wght":[400,700]},"body":{"wght":[400,700]}},"features":{"tabularNums":["price","metric","time","code"],"stylisticSet":{"heading":"ss01"},"ligatures":"common-only"},"loading":{"display":"swap","preload":["heading"],"selfHost":"recommended"},"scale":{"display":{"size":"clamp(2.5rem, 5vw, 3.5rem)","weight":600,"lineHeight":"1.05","letterSpacing":"-0.02em"},"h1":{"size":"clamp(1.75rem, 3vw, 2.5rem)","weight":600,"lineHeight":"1.15","letterSpacing":"-0.01em"},"h2":{"size":"clamp(1.375rem, 2.5vw, 2rem)","weight":600,"lineHeight":"1.25","letterSpacing":"-0.005em"},"h3":{"size":"1.25rem","weight":600,"lineHeight":"1.30"},"h4":{"size":"1.0625rem","weight":600,"lineHeight":"1.35"},"body":{"size":"0.9375rem","weight":400,"lineHeight":"1.55"},"small":{"size":"0.8125rem","weight":400,"lineHeight":"1.50"},"caption":{"size":"0.75rem","weight":400,"lineHeight":"1.45"},"button":{"size":"0.875rem","weight":500,"lineHeight":"1.30"},"overline":{"size":"0.6875rem","weight":600,"lineHeight":"1.40","letterSpacing":"0.06em"}},"lineHeight":{"tight":"1.10","base":"1.50","loose":"1.65"},"weight":{"regular":400,"medium":500,"semibold":600,"bold":700}},"components":{"button":{"default":"bg=primary fg=#ffffff padding=0.625rem 1.125rem radius=8px weight=500","hover":"bg=#4534b3 translateY=-1px shadow=md","active":"translateY=0 shadow=sm","disabled":"bg=#e5e3df fg=#bbb8b1 cursor=not-allowed","focus":"ring=2px solid #5645d4 offset=2px","variants":{"primary":{"default":"bg=#5645d4 fg=#ffffff padding=0.625rem 1.125rem radius=8px weight=500","hover":"bg=#4534b3 translateY=-1px shadow=md","focus":"ring=2px solid #5645d4 offset=2px"},"secondary":{"default":"bg=transparent fg=#1a1a1a border=1px solid #c8c4be padding=0.625rem 1.125rem radius=8px weight=500","hover":"bg=#f6f5f4 border=1px solid #a4a097","focus":"ring=2px solid #5645d4 offset=2px"},"ghost":{"default":"bg=transparent fg=#5d5b54 padding=0.5rem 0.75rem radius=6px weight=500","hover":"bg=#f6f5f4","focus":"ring=2px solid #5645d4 offset=2px"}}},"card":{"default":"bg=#ffffff shadow=sm radius=12px padding=1.5rem border=1px solid #e5e3df","hover":"shadow=md translateY=-1px"},"nav":{"default":"bg=#1a2a52 fg=#ffffff width=240px min-height=100vh","collapsed":"width=64px","mobile":"drawer-from-left width=85vw bg=#1a2a52"},"input":{"default":"bg=#ffffff fg=#1a1a1a border=1px solid #c8c4be radius=8px padding=0.625rem 0.875rem height=44px","focus":"border=2px solid #5645d4 ring=3px rgba(86,69,212,0.15)","error":"border=2px solid #e03131 ring=3px rgba(224,49,49,0.15)","disabled":"bg=#f6f5f4 fg=#bbb8b1 cursor=not-allowed"}},"layout":{"container":{"maxWidth":"1280px","paddingX":"2rem"},"grid":{"columns":12,"gap":"1.5rem"}},"spacing":{"gutter":"1.5rem","sectionY":"2rem","scale":["0","0.25rem","0.5rem","0.75rem","1rem","1.5rem","2rem","2.5rem","3rem","4rem"],"tokens":[0,4,8,12,16,20,24,32,40,48,64]},"shadow":{"sm":"rgba(15, 15, 15, 0.04) 0px 1px 2px 0px","md":"rgba(15, 15, 15, 0.08) 0px 4px 12px 0px","lg":"rgba(15, 15, 15, 0.12) 0px 12px 32px 0px","xl":"rgba(15, 15, 15, 0.20) 0px 24px 48px -8px"},"surfaces":{"base":"bg=#f6f5f4 shadow=none","raised":"bg=#ffffff shadow=sm radius=12px","overlay":"bg=#ffffff shadow=md radius=12px","modal":"bg=#ffffff shadow=lg radius=16px"},"elevation":{"base":"none","raised":"sm","overlay":"md","modal":"lg"},"breakpoints":{"sm":"480px","md":"768px","lg":"1024px","xl":"1280px","2xl":"1536px"},"touchTarget":{"min":"44px"},"responsive":{"collapseStrategy":"sidebar→drawer-toggle below 1024px; metric-cards→2-col tablet→1-col mobile; table→horizontal-scroll mobile","hidePriority":["sidebar-labels","sparkline-detail","table-column-date"]},"motion":{"duration":{"instant":"0ms","micro":"80ms","base":"160ms","expressive":"240ms","deliberate":"400ms","exit":"120ms"},"easing":{"standard":"cubic-bezier(0.2, 0, 0, 1)","emphasized":"cubic-bezier(0.3, 0, 0, 1)","entering":"cubic-bezier(0, 0, 0, 1)","exiting":"cubic-bezier(0.4, 0, 1, 1)","spring":"linear(0, 0.36 8%, 1 50%, 0.99 65%, 1)"},"stagger":{"list":"30ms","grid":"50ms"},"scale":{"press":0.97,"hover":1.01,"popIn":0.94},"scrollTimeline":{"enabled":false,"thresholdEntry":"20% 0%"},"reducedMotion":{"duration":"1ms","transform":"none","preserve":["opacity","color"]}},"theming":{"defaultMode":"light","modes":["light","dark"],"colorsByMode":{"dark":{"primary":"#7b6ff0","secondary":"#0f1a33","accent":"#3db8b3","background":"#0a0f1a","foreground":"#e8e6e3","card":"#141b2d","border":"#1e2a44","muted":"#5d5b54"}},"switchStrategy":"media-then-attribute"},"a11y":{"focusRing":{"width":"2px","style":"solid","color":"#5645d4","offset":"2px","radius":"inherit"},"minContrast":{"text":"4.5:1","uiComponent":"3:1","premium":"7:1"},"supportedTextScale":[1,1.25,1.5,2],"minTouchTarget":"44px","minTouchSpacing":"8px","skipLinkRequired":true,"headingHierarchy":"strict"},"iconography":{"set":"lucide","style":"outline","stroke":"1.5px","size":{"sm":"16px","md":"20px","lg":"24px"},"alignment":"baseline","expandHit":"44px","noEmoji":true},"radius":{"sm":"4px","md":"8px","lg":"12px","xl":"16px","xxl":"20px","xxxl":"24px","full":"9999px"},"transition":{"fast":"150ms ease-out","base":"200ms ease-out","slow":"350ms cubic-bezier(0.4,0,0.2,1)"}},"sections":[{"id":"nav-sidebar","type":"nav-sidebar-fixed","purpose":"左侧可折叠深色导航,提供模块间快速切换,折叠态仅保留图标","elements":{"logo":true,"nav_items":4,"collapse_toggle":true,"active_indicator":"left border 3px solid primary","user_avatar_bottom":true},"copy":{"brand":"FinLedger","nav_item_1_icon":"home","nav_item_1_label":"Home","nav_item_2_icon":"arrow-left-right","nav_item_2_label":"Transactions","nav_item_3_icon":"bar-chart-3","nav_item_3_label":"Reports","nav_item_4_icon":"settings","nav_item_4_label":"Settings","user_name":"Alex Chen","user_role":"Finance Admin"},"interactions":["sidebar-collapse-toggle","nav-item-active-switch","mobile-drawer-toggle"],"notes":"侧边栏使用 brand-navy-mid (#1a2a52) 背景,白色文字,激活项使用 primary 色左边框 + 微亮背景。折叠态宽度 64px 仅显示图标,展开态 240px。"},{"id":"top-bar","type":"top-bar-dashboard","purpose":"顶部搜索、通知与用户操作栏,固定于主内容区上方","elements":{"search_input":true,"notification_bell_with_badge":true,"user_dropdown":true,"breadcrumb_or_title":true},"copy":{"page_title":"Dashboard","search_placeholder":"Search transactions, reports...","notification_count":"3","user_dropdown_label":"Alex Chen","dropdown_item_1":"Profile","dropdown_item_2":"Billing","dropdown_item_3":"Sign out"},"interactions":["search-auto-complete","notification-dropdown-toggle","user-dropdown-toggle","modal-open:#notifications-panel"],"notes":"白色背景,底部 hairline 分割线。搜索框使用 search-pill 组件样式(surface 背景,44px 高,8px 圆角)。通知铃铛带 primary 色计数圆点。头像使用 36px 圆形占位。"},{"id":"metric-cards","type":"stats-row-cards","purpose":"四张淡彩指标卡展示核心财务总览,每卡含趋势 sparkline","elements":{"metric_cards":4,"sparkline_per_card":true,"trend_arrow_per_card":true,"pastel_tint_bg":true},"copy":{"card_1_title":"Total Balance","card_1_value":"$248,320.50","card_1_trend":"+12.5%","card_1_trend_direction":"up","card_1_tint":"lavender","card_2_title":"Total Expenses","card_2_value":"$38,450.20","card_2_trend":"+3.2%","card_2_trend_direction":"up","card_2_tint":"rose","card_3_title":"Total Income","card_3_value":"$62,800.00","card_3_trend":"+18.7%","card_3_trend_direction":"up","card_3_tint":"mint","card_4_title":"Total Savings","card_4_value":"$104,215.80","card_4_trend":"-2.1%","card_4_trend_direction":"down","card_4_tint":"sky"},"interactions":["counter-animate","scroll-reveal"],"notes":"每张卡使用对应 card-tint-* 背景(lavender/rose/mint/sky),12px 圆角,无边框。sparkline 使用 accent-teal 描边,下降趋势使用 danger-red。数值使用 tabular-nums 等宽数字。趋势箭头向上绿色向下红色。"},{"id":"revenue-chart","type":"chart-area-card","purpose":"大面积时序面积图展示月度收入趋势,为仪表盘核心可视化","elements":{"area_chart":true,"time_range_selector":true,"chart_legend":true,"tooltip_on_hover":true},"copy":{"chart_title":"Revenue Over Time","chart_subtitle":"Monthly recurring revenue · Last 12 months","range_option_1":"7D","range_option_2":"30D","range_option_3":"12M","range_active":"12M","legend_series_1":"MRR","legend_series_2":"ARR","y_axis_label":"USD","x_axis_label":"Month"},"interactions":["pill-tab-switch:time-range","chart-tooltip-hover","scroll-reveal"],"notes":"卡片使用白色背景 + 12px 圆角 + 1px hairline 边框 + subtle shadow。面积图填充使用 chart-area-fill 渐变(primary-purple 透明渐变)。描边使用 primary 色 2px。时间范围切换使用 pill-tab 组件样式(ink-deep 激活态,steel 未激活)。X 轴标签使用 caption 字号。"},{"id":"transactions-table","type":"data-table-card","purpose":"展示最近交易列表,包含状态徽标与快速筛选能力","elements":{"data_table":true,"status_badges":true,"table_header_sortable":true,"filter_pills":true,"pagination_or_show_all":true},"copy":{"table_title":"Recent Transactions","col_1":"Transaction","col_2":"Amount","col_3":"Date","col_4":"Category","col_5":"Status","filter_all":"All","filter_success":"Success","filter_pending":"Pending","filter_failed":"Failed","row_1_desc":"Spotify — Monthly Subscription","row_1_amount":"-$12.99","row_1_date":"Jan 18, 2026","row_1_category":"Subscription","row_1_status":"Success","row_2_desc":"Salary Deposit — Acme Corp","row_2_amount":"+$5,200.00","row_2_date":"Jan 15, 2026","row_2_category":"Income","row_2_status":"Success","row_3_desc":"AWS — Cloud Services","row_3_amount":"-$450.00","row_3_date":"Jan 14, 2026","row_3_category":"Service","row_3_status":"Success","row_4_desc":"Wire Transfer to IBAN DE89...","row_4_amount":"-$800.00","row_4_date":"Jan 13, 2026","row_4_category":"Transfer","row_4_status":"Pending","row_5_desc":"Stripe — Payment Processing","row_5_amount":"-$29.99","row_5_date":"Jan 12, 2026","row_5_category":"Service","row_5_status":"Failed","row_6_desc":"Apple — App Store Purchase","row_6_amount":"-$99.99","row_6_date":"Jan 10, 2026","row_6_category":"Shopping","row_6_status":"Success","show_all_label":"View all transactions →"},"interactions":["pill-tab-switch:status-filter","table-column-sort","row-hover-highlight","smooth-scroll-to-#transactions"],"notes":"表格使用 comparison-table 样式:白色背景、8px 圆角、1px hairline 边框、行底部分割线 hairline-soft。状态徽标:Success 用 badge-tag-green(mint 背景 + brand-green 文字)、Pending 用 badge-tag-orange(peach 背景 + brand-orange-deep 文字)、Failed 用 badge-purple 变体(lavender 背景 + danger-red 文字)。金额使用 JetBrains Mono 等宽 + tabular-nums,收入绿色支出默认色。筛选 pill 使用 pill-tab 组件。"}],"rules":{"dos":["侧边栏使用 brand-navy-mid 深色背景,与主内容区 surface 底色形成明确边界","指标卡使用 Notion 淡彩色系(lavender/rose/mint/sky)区分四个维度,每卡嵌入 sparkline","所有按钮与输入框统一使用 8px 圆角矩形,禁止 pill 形状","数据表格使用 hairline-soft 行分割线,保持极简线条感","金额与数字必须使用 tabular-nums(JetBrains Mono)+ 等宽对齐"],"donts":["不要将 primary-purple 大面积用作背景色或正文色——仅限 CTA、激活态、图表描边","不要使用 pill 形状按钮——Notion 的几何语言是 8px 圆角矩形","不要在指标卡上使用纯白背景——必须使用淡彩 tint 以延续 Notion 卡片语言","不要混用 link-blue 与 primary-purple——link-blue 仅用于表格内可点击文本链接","不要为卡片叠加厚重阴影——仪表盘卡片仅用 sm (4px blur) 级别"]},"promptGuide":{"quickRef":"navy sidebar + pastel metric cards(lavender/rose/mint/sky) + purple chart accent + 8px-rect buttons + JetBrains Mono tabular-nums","examples":["用 Notion 仪表盘风格做一张带 sparkline 的淡彩指标卡","以 Notion fintech dashboard 风格生成可排序交易表格","按 Notion editorial 风做一个带时间范围切换的面积图卡片"]},"states":{"loading":{"type":"skeleton","shimmer":true,"duration":"1200ms"},"empty":{"illustration":"monoline","title":"暂无交易记录","body":"您的账户尚未产生任何交易。开始一笔转账或等待首笔入账后,数据将在此显示。","action":{"label":"发起首笔转账","intent":"primary"}},"error":{"icon":"alert-triangle","title":"无法加载交易数据","body":"数据服务暂时不可用,请检查网络连接后重试。如问题持续,请联系技术支持。","retry":true}},"personality":{"voice":"精确克制","humorLevel":1,"formalityLevel":8,"exclamationAllowed":false,"brandVoiceKeywords":["precise","trustworthy","efficient","clear"]}},"planReviews":[{"round":1,"ok":false,"score":92,"rubric":{"atmosphere":6,"color":14,"typography":9,"components":10,"layout":8,"depth":5,"rules":4,"responsive":6,"sections":16,"motion":7,"a11yDeep":4,"states":3},"issues":["disabled 状态前景色(#bbb8b1)与表面背景对比度均低于 3:1,违反 states 可访问性要求,需提升至 #6c6c6c"],"revisedPlan":{"planId":"8b7f1e3a-5c2d-4f9a-a6d1-3e7b2c9a0f41","goal":"构建数据密集型金融仪表盘,30 秒内完成核心指标扫读与异常交易定位","audience":"金融科技产品运营、财务分析与风控团队,需要高密度数据概览与快速操作入口","tone":"editorial-functional","type":"fullHTML","designTokens":{"style":{"name":"editorial-fintech-dashboard","mood":"serious","keywords":["sober-geometry","data-dense","pastel-metrics","navy-structure","precise-typography"],"density":"compact","philosophy":"将 Notion 的克制编辑风几何注入金融数据表面,深色结构侧边栏锚定空间,淡彩指标卡提供呼吸窗口,表格回归极简线条让数字自己说话。"},"colors":{"primary":"#5645d4","secondary":"#1a2a52","accent":"#2a9d99","success":"#1aae39","warning":"#dd5b00","danger":"#e03131","info":"#0075de","background":"#f6f5f4","foreground":"#1a1a1a","card":"#ffffff","border":"#e5e3df","muted":"#bbb8b1"},"cssVarPrefix":"--color-","states":{"hover":"#4534b3","active":"#3a2a99","focus":"#5645d4","disabled":"#e5e3df"},"colorRoles":{"primary":{"name":"Notion Purple","role":"Primary CTA, sidebar active indicator, chart accent line"},"secondary":{"name":"Brand Navy Mid","role":"Sidebar background, dark structural surfaces"},"accent":{"name":"Brand Teal","role":"Sparklines, chart fill gradient, positive trend indicators"}},"gradients":[{"name":"chart-area-fill","stops":"linear-gradient(180deg, rgba(86,69,212,0.18) 0%, rgba(86,69,212,0.02) 100%)","role":"Revenue chart area fill"}],"fonts":{"heading":"Inter","body":"Inter","mono":"JetBrains Mono","display":"Inter","googleFontsUrl":"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&fam…;:{"heading":"'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif"}}}}}],"planId":"8b7f1e3a-5c2d-4f9a-a6d1-3e7b2c9a0f41"}```

total_tokens
35495
summary
基于 Notion 设计系统的金融仪表盘,含侧边栏、指标卡、面积图与交易表格共5个区块
uiParsing
关闭