Songgrid · 宋律
Song-dynasty aesthetics × Swiss International Style — a theme for the DeepSeek Harness Web UI.
中文 ｜ English
The two variants, captured live (the sidebar is the Eight Standing Seats board). Card areas are redacted.
Why "Songgrid"
The warm white of rice paper, the celadon of Ru ware, the warning red of cinnabar — disciplined by Swiss International Style: a 4pt spacing scale, 2/4px radii, and type sizes locked to line heights.
This is not ancient styling pasted onto a UI. Every traditional colour is placed on the functional role it can actually hold.
Two accents, two jobs
The one decision in this theme that looks like a duplicate but must not be collapsed:
| Role | Colour | Contrast (on paper) | Where it lands |
|---|
| Functional · Ru celadon | #3A7284 | 4.91 : 1 ✓ AA | buttons · focus ring · selection · links |
| Editorial · kiln copper | #9A6B50 | 4.19 : 1 | blockquotes · markers |
Celadon passes WCAG AA, so it can carry "can I click this / is this selected". Kiln copper does not pass AA for body text, so it only carries "is this worth a second look".
Their hues sit 174° apart — they were never two candidates for one role.
Two variants
| Variant | id | Character |
|---|
| Xuanzhi (rice paper) | song-grid-xuanzhi | warm paper white × Ru celadon × cinnabar |
| Yemo (night ink) | song-grid-yemo | cool blue-black × brightened celadon |
| Follow system | system | switches with the host |
Palette
Xuanzhi · light
| Role | Value | |
|---|
| Paper | #F7F5EF | |
| Surface +1 | #FBFAF6 | |
| Surface +2 | #F0EDE4 | |
| Overlay | #E7E3D8 | |
| Hairline | #DDD8CB | |
| Ink (primary text) | #26221C | |
| Secondary text | #5C554A | |
| Tertiary text | #8B8478 | |
| Brand / functional | #3A7284 | |
| Editorial accent | #9A6B50 | |
| Success | #4E7A5A | |
| Warn | #B0823A | |
| Cinnabar (error) | #B5453C | |
Yemo · dark
| Role | Value | |
|---|
| Night ink | #10151A | |
| Surface +1 | #191F26 | |
| Surface +2 | #1D242B | |
| Primary text | #E8E3D6 | |
| Secondary text | #A8A193 | |
| Tertiary text | #7A7468 | |
| Brand / functional | #7FB4C4 | |
| Error | #D07A70 | |
The dark ground is a cool blue-black, tuned together with the celadon. Swapping it for a warm black means re-tuning the entire dark variant.
Typography
- Chinese runs on a Song serif (
Noto Serif SC); Latin stays sans-serif — each script gets its own face, never mixed
- Sizes are defined in pairs with their line heights (body / secondary / caption)
- Emphasis comes from colour roles (celadon vs. kiln copper), not from stacking bolds
Structure layers
Three layers; two of them are orthogonal to colour — future palette work never touches them:
| Layer | Contents | Colour |
|---|
STRUCTURE_CSS | spacing scale (4pt grid + semantic aliases) · 2/4px radii · 4 line-height steps · 5 motion durations + 3 curves · focus ring · icon sizes | no |
ICON_CSS | 46 Lucide mask icons, following currentColor | no |
SEMANTIC_CSS | accent role split (--sg-accent-functional / --sg-accent-editorial) | yes |
Install
dsh plugin --profile web add dsh-theme-songgrid
Then refresh the page and pick 「宋律 · 宣纸」/「宋律 · 夜墨」/ follow-system under Settings → General → Theme. The choice persists in the songgrid settings namespace.
Compatibility
- Verified on DSH 0.1.5-rc.2 (
@deepseek-ai/dsh)
- Implemented purely by overriding host design tokens — no host source is patched, no raw values
- Not affiliated with DeepSeek
Development
lib/index.js host half: registers the songgrid settings namespace
lib/client.js browser half: theme tokens + three CSS layers + theme picker
assets/ landscape backgrounds (ink / ink-night / celadon)
- Structure layer: tokens live in
:root; add a step there. New styles take var(--sg-gap-*) / var(--sg-radius-*) — never raw values
- Icons:
<span class="sg-icon sg-icon-check"></span>, 46 glyphs in ICON_CSS; sizes via .sm / .lg / .xl or --sg-icon-size
- More editorial emphasis:
--sg-accent-editorial already exists in SEMANTIC_CSS; add selectors — the only rule is never on an interactive control, that slot belongs to the functional accent
License
MIT
