Data Dense
数据密集
stylekitMITSaaS / B2B · saasProfessional · professionalLight and dark · bothHigh (data-dense) · highNeutral · neutralMuted · mutedSerif · serifLanding · landing
高密度后台管理面板风格，紧凑间距与小尺寸组件，优先展示数据表格与操作效率。
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Data Dense" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86.
https://github.com/AnxForever/stylekit · api/styles/data-dense · bfa7da909e86 · © AnxForever
Do
- 使用白色 bg-white 搭配极浅蓝灰 bg-[#f8fafc] 交替行色
- 表格行高紧凑 py-2 text-sm 或 text-xs
- 状态标签使用颜色编码 bg-blue-50 text-blue-700 rounded px-1.5 py-0.5 text-xs
- 按钮使用小尺寸 px-2.5 py-1 text-xs rounded
- 间距统一使用 4px 递增：gap-1 gap-2 gap-3
- 表头使用 text-xs uppercase tracking-wide text-[#64748b] font-medium
- 使用 monospace 显示数字、ID、代码类数据
- 分隔线使用 border-[#e2e8f0] 细线
Don't
- 禁止使用大间距 p-6 以上（浪费数据展示空间）
- 禁止使用大圆角 rounded-xl 以上（占用像素）
- 禁止使用大字号 text-lg 以上作为表格数据
- 禁止使用装饰性渐变或阴影（增加视觉噪音）
- 禁止隐藏重要操作在下拉菜单中（常用操作必须直接可见）
- 禁止使用大面积空白（数据优先）
Prompt
Build a data-dense admin dashboard with 4 compact KPI cards at top, filter toolbar with search and dropdowns, dense data table with inline status badges and action buttons, and pagination footer. --- "Data Dense" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86. powered by Styledex — https://styledex.dev
Tokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Data Dense. \"Data Dense\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86.",
"$extensions": {
"dev.styledex": {
"id": "stylekit-data-dense",
"license": "MIT",
"attribution": "\"Data Dense\" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "#ffffff"
},
"foreground": {
"$type": "color",
"$value": "#1e293b"
},
"card": {
"$type": "color",
"$value": "#ffffff"
},
"card-foreground": {
"$type": "color",
"$value": "#1e293b"
},
"primary": {
"$type": "color",
"$value": "#ffffff"
},
"primary-foreground": {
"$type": "color",
"$value": "#1c1917"
},
"secondary": {
"$type": "color",
"$value": "#f8fafc"
},
"secondary-foreground": {
"$type": "color",
"$value": "#1e293b"
},
"accent": {
"$type": "color",
"$value": "#3b82f6"
},
"accent-foreground": {
"$type": "color",
"$value": "#fafaf9"
},
"muted": {
"$type": "color",
"$value": "#f0f0f0"
},
"muted-foreground": {
"$type": "color",
"$value": "#6d7480"
},
"border": {
"$type": "color",
"$value": "#dbdbdb"
},
"destructive": {
"$type": "color",
"$value": "#dc2626"
},
"ring": {
"$type": "color",
"$value": "#ffffff"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"ui-sans-serif",
"system-ui",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"ui-serif",
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "1rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Data Dense" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86. */
:root {
--background: #ffffff;
--foreground: #1e293b;
--card: #ffffff;
--card-foreground: #1e293b;
--primary: #ffffff;
--primary-foreground: #1c1917;
--secondary: #f8fafc;
--secondary-foreground: #1e293b;
--accent: #3b82f6;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #6d7480;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #ffffff;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Data Dense" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86. */
/** Tailwind theme extend for Data Dense (stylekit-data-dense) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "#ffffff",
"foreground": "#1e293b",
"card": "#ffffff",
"primary": "#ffffff",
"primary-foreground": "#1c1917",
"secondary": "#f8fafc",
"accent": "#3b82f6",
"muted": "#f0f0f0",
"border": "#dbdbdb",
"destructive": "#dc2626",
"ring": "#ffffff"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"ui-sans-serif",
"system-ui",
"sans-serif"
],
"serif": [
"ui-serif",
"Georgia",
"serif"
],
"mono": [
"ui-monospace",
"SFMono-Regular",
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Data Dense" from https://github.com/AnxForever/stylekit (MIT). © AnxForever. api/styles/data-dense @ bfa7da909e86. */
@layer base {
:root {
--background: #ffffff;
--foreground: #1e293b;
--card: #ffffff;
--card-foreground: #1e293b;
--primary: #ffffff;
--primary-foreground: #1c1917;
--secondary: #f8fafc;
--secondary-foreground: #1e293b;
--accent: #3b82f6;
--accent-foreground: #fafaf9;
--muted: #f0f0f0;
--muted-foreground: #6d7480;
--border: #dbdbdb;
--destructive: #dc2626;
--ring: #ffffff;
--radius: 0.5rem;
--font-sans: ui-sans-serif, system-ui, sans-serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--spacing: 1rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}