Xiaojin Pixel Yard
小靳 像素小院16 位农场小镇的立体模型，粗描边像素 UI，白天暖、夜里静。
A cosy 16-bit farm-town diorama with chunky outlined UI, warm by day and calm by night.
Xiaojin Pixel Yard
小靳 Pro
好的界面不抢内容。今天想聊点什么？，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Xiaojin Pixel Yard
小靳 Pro
好的界面不抢内容。今天想聊点什么？，其余交给留白。
开始使用了解更多
本月进度62%12:04 · 1,280 字
Palette
Type
标题 Display 永正文 Body — 好的界面不抢内容 1234567890Previews use your installed fonts; webfonts are not bundled.
| Display | -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif |
|---|---|
| Body | -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif |
| chat | 16px / 1.6 |
| link | 14px |
| caption | 13px |
| stamp | 12px |
The pixel feel comes from canvas art (image-rendering: pixelated), not a pixel font.
Shape & surface
| radius · everything | 0px |
|---|---|
| shadow | 0 -2px 0 #2a2130, 0 2px 0 #2a2130, -2px 0 0 #2a2130, 2px 0 0 #2a2130, 0 6px 0 rgba(42,33,48,.22) |
| glass | none |
Motion
- Button press: translateY(2px), no easing.
- Scene change: 4-step 2×2 dither wipe.
- Characters are canvas-driven; data-still and reduced motion freeze them.
Do / Don't
Do
- Keep every edge hard: 2px steps and zero radius.
- Build frames with stacked box-shadows.
- Touch targets at least 48px; recolour the frame for night (#11152a).
Don't
- Don't use blur, soft shadows or gradients.
- Don't use border-radius anywhere.
- Don't use a pixel webfont for body text; keep CJK readable.
Used in
Sources
lingbrook-guild worktree lingbrook-xiaojin-move: src/yard/yard.css, src/yard/pixel/palette.ts
Updated 2026-10-13
Export
/* Xiaojin Pixel Yard / 小靳 像素小院 — A cosy 16-bit farm-town diorama with chunky outlined UI, warm by day and calm by night. */
:root {
--xiaojin-pixel-yard-bg: #1d1822;
--xiaojin-pixel-yard-surface: #f7eedb;
--xiaojin-pixel-yard-ink: #2a2130;
--xiaojin-pixel-yard-muted: #6f6470;
--xiaojin-pixel-yard-accent: #d3a46a;
--xiaojin-pixel-yard-accent-ink: #2a2130;
--xiaojin-pixel-yard-line: #2a2130;
--xiaojin-pixel-yard-highlight: #c2563f;
--xiaojin-pixel-yard-highlight-wash: #dfeab8;
--xiaojin-pixel-yard-pal-ink: #2a2130;
--xiaojin-pixel-yard-pal-plum: #4b3b55;
--xiaojin-pixel-yard-pal-bark: #6e4a36;
--xiaojin-pixel-yard-pal-wood: #a06b45;
--xiaojin-pixel-yard-pal-wheat: #d3a46a;
--xiaojin-pixel-yard-pal-sand: #ead2a0;
--xiaojin-pixel-yard-pal-paper: #f7eedb;
--xiaojin-pixel-yard-pal-stone: #b9b2a6;
--xiaojin-pixel-yard-pal-grass: #8fbf5c;
--xiaojin-pixel-yard-pal-leaf: #5d9150;
--xiaojin-pixel-yard-pal-indigo: #55679e;
--xiaojin-pixel-yard-pal-roof: #c2563f;
--xiaojin-pixel-yard-pal-sky: #a9dbeb;
--xiaojin-pixel-yard-pal-frame: #1d1822;
--xiaojin-pixel-yard-pal-night-panel: #262b45;
--xiaojin-pixel-yard-font-display: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
--xiaojin-pixel-yard-font-body: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
--xiaojin-pixel-yard-text-chat: 16px / 1.6;
--xiaojin-pixel-yard-text-link: 14px;
--xiaojin-pixel-yard-text-caption: 13px;
--xiaojin-pixel-yard-text-stamp: 12px;
--xiaojin-pixel-yard-radius-everything: 0px;
--xiaojin-pixel-yard-shadow: 0 -2px 0 #2a2130, 0 2px 0 #2a2130, -2px 0 0 #2a2130, 2px 0 0 #2a2130, 0 6px 0 rgba(42,33,48,.22);
}
/* Night sky */
@media (prefers-color-scheme: light) {
:root {
--xiaojin-pixel-yard-bg: #1d1822;
--xiaojin-pixel-yard-surface: #262b45;
--xiaojin-pixel-yard-ink: #efe6c8;
--xiaojin-pixel-yard-muted: #a9a8c0;
--xiaojin-pixel-yard-accent: #d3a46a;
--xiaojin-pixel-yard-accent-ink: #2a2130;
--xiaojin-pixel-yard-line: #11152a;
}
}/* Tailwind v4 — paste into your main CSS after @import "tailwindcss"; */
@theme {
--color-bg: #1d1822;
--color-surface: #f7eedb;
--color-ink: #2a2130;
--color-muted: #6f6470;
--color-accent: #d3a46a;
--color-accent-ink: #2a2130;
--color-line: #2a2130;
--color-highlight: #c2563f;
--font-display: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
--font-sans: -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif;
--radius-everything: 0px;
--shadow-look: 0 -2px 0 #2a2130, 0 2px 0 #2a2130, -2px 0 0 #2a2130, 2px 0 0 #2a2130, 0 6px 0 rgba(42,33,48,.22);
}
// Tailwind v3 — tailwind.config.js
export default {
theme: {
extend: {
colors: {
"bg": "#1d1822",
"surface": "#f7eedb",
"ink": "#2a2130",
"muted": "#6f6470",
"accent": "#d3a46a",
"accent-ink": "#2a2130",
"line": "#2a2130",
"highlight": "#c2563f",
},
fontFamily: {
display: ["-apple-system, \"PingFang SC\", \"Hiragino Sans GB\", \"Noto Sans CJK SC\", sans-serif"],
sans: ["-apple-system, \"PingFang SC\", \"Hiragino Sans GB\", \"Noto Sans CJK SC\", sans-serif"],
},
borderRadius: {
"everything": "0px",
},
},
},
};