01
设计气质 DNA
专业权威以科技为中心生态系统关联性
数字领域的专业行业协会或商会
02
色彩
#0066FFAccent#000000Ink#FFFFFFBG#F5F5F5BG soft#888888Mutedrgba(0,0,0,0.1)Line高对比度单色基底，搭配单一电光蓝行动色
03
字体
- display
56px · 500
在大尺寸展示时使用紧凑字距 · 保持高对比度以确保可读性
04
间距
4px8px16px24px32px48px64px96px基于4px的基础网格，确保空间和谐统一
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 999px
0 1px 3px rgba(0,0,0,0.08)
06
布局
1440container
12columns
24pxgutter
768 / 1024breakpoints
非对称分割的主视觉，左侧为纯黑面板，右侧为内容密集面板
07
动效与交互
200msmicro
350mssmall
700msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
内容过渡使用细微的淡入淡出 · 数据滚动使用平滑滚动
细微的颜色变化或透明度调整 · 通过状态变化提供即时视觉反馈
08
组件
- button 纯色填充，小圆角，粗体大写或大字重文字
- card 最小化边框，清晰的排版驱动型布局
- chip 描边样式，小圆角
- input 极简的底边框或描边样式
- hero 非对称分割布局，黑白背景上使用超大字号排版
09
文案语气与禁用清单
- 语气 专业、权威，同时富有亲和力
- 标题风格 直接、有冲击力、大字号
- 按钮文案 清晰、行动导向，常为蓝色或高对比度黑白
- 不要为首要按钮使用圆角——截图显示为锐利、最小半径
- 不要在背景中引入渐变——截图显示为纯色平涂
- 不要将所有文字居中对齐——截图采用强左对齐以提升可读性
- 不要使用装饰性衬线字体——截图使用简洁、功能性的无衬线字体
- 不要为UI元素添加厚重的投影——截图保持界面平整
- 不要使用多色配色——截图严格采用单色加单一蓝色强调
- 避免: 过于随意的语言
- 避免: 装饰性字体排版
- 避免: 杂乱的布局
11
System Prompt
Tech Barcelona 是一个面向数字生态系统的专业编辑式平台。设计DNA定义于严谨的高对比度单色配色（黑 #000000 与白 #FFFFFF），并以单一鲜明的蓝色（#0066FF）作为主要行动色。字体排版依赖简洁、功能性的无衬线字体类别，以传达权威与清晰度。布局结构化且非对称，尤其在主视觉部分，优先建立强烈的视觉层次。关键设计约束：避免装饰性元素，不使用多色渐变，并在所有组件上保持锐利、最小化的边框圆角。整体基调是精致、专业的，专注于清晰传达行业数据与资讯。