CompReel Gallery
compreel 画廊朴素快速的策展网格，暖白底，只有一个电光蓝。
A plain, fast curation grid on warm off-white with a single electric-blue accent.
CompReel Gallery
Opus 5.5 code films
好的界面不抢内容。43 picks, embedded not stored，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
CompReel Gallery
Opus 5.5 code films
好的界面不抢内容。43 picks, embedded not stored，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif |
|---|---|
| Body | ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif |
| h1 | clamp(28px, 5vw, 44px) / 1.1, -0.02em, max 18ch |
| h2 | 18px |
| body | 16px / 1.55 |
| chip | 13px |
Shape & surface
| radius · card | 14px |
|---|---|
| radius · cta | 10px |
| radius · chip | 999px |
| shadow | none |
| glass | none |
Motion
- Essentially none. CTA hover = brightness(1.08).
- Grid minmax(340px, 1fr), 20px gap, max width 1120px.
Do / Don't
Do
- One accent for CTA, the cta-line and links.
- Muted pill chips.
- 1px line borders on cards.
Don't
- Don't add shadows or blur.
- Don't add custom fonts or animation.
- Don't use more than one accent.
Used in
Sources
compreel: src/style.css
Updated 2026-10-13
Export
/* CompReel Gallery / compreel 画廊 — A plain, fast curation grid on warm off-white with a single electric-blue accent. */
:root {
--compreel-gallery-bg: #f6f5f2;
--compreel-gallery-surface: #ffffff;
--compreel-gallery-ink: #15151a;
--compreel-gallery-muted: #64646e;
--compreel-gallery-accent: #2b46ff;
--compreel-gallery-accent-ink: #ffffff;
--compreel-gallery-line: #dedcd6;
--compreel-gallery-highlight-wash: #ecebe6;
--compreel-gallery-pal-bg: #f6f5f2;
--compreel-gallery-pal-card: #ffffff;
--compreel-gallery-pal-fg: #15151a;
--compreel-gallery-pal-mute: #64646e;
--compreel-gallery-pal-line: #dedcd6;
--compreel-gallery-pal-chip: #ecebe6;
--compreel-gallery-pal-accent: #2b46ff;
--compreel-gallery-pal-dark-bg: #0f1014;
--compreel-gallery-pal-dark-accent: #7b8cff;
--compreel-gallery-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--compreel-gallery-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--compreel-gallery-text-h1: clamp(28px, 5vw, 44px) / 1.1, -0.02em, max 18ch;
--compreel-gallery-text-h2: 18px;
--compreel-gallery-text-body: 16px / 1.55;
--compreel-gallery-text-chip: 13px;
--compreel-gallery-radius-card: 14px;
--compreel-gallery-radius-cta: 10px;
--compreel-gallery-radius-chip: 999px;
--compreel-gallery-shadow: none;
}
/* Dark */
@media (prefers-color-scheme: dark) {
:root {
--compreel-gallery-bg: #0f1014;
--compreel-gallery-surface: #16171d;
--compreel-gallery-ink: #ececf1;
--compreel-gallery-muted: #9a9aa6;
--compreel-gallery-accent: #7b8cff;
--compreel-gallery-accent-ink: #0f1014;
--compreel-gallery-line: #25262d;
--compreel-gallery-highlight-wash: #1f2027;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #f6f5f2;
--color-surface: #ffffff;
--color-ink: #15151a;
--color-muted: #64646e;
--color-accent: #2b46ff;
--color-accent-ink: #ffffff;
--color-line: #dedcd6;
--font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--radius-card: 14px;
--radius-cta: 10px;
--radius-chip: 999px;
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#f6f5f2",
"surface": "#ffffff",
"ink": "#15151a",
"muted": "#64646e",
"accent": "#2b46ff",
"accent-ink": "#ffffff",
"line": "#dedcd6",
},
fontFamily: {
display: ["ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"],
sans: ["ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"],
},
borderRadius: {
"card": "14px",
"cta": "10px",
"chip": "999px",
},
},
},
};