菜单
Use when building, styling, or reviewing any Jyotish Helper UI — components, colors, fonts, the North Indian chart, the time slider, glass panels — to keep the look consistent with the approved "Saffron Gold" direction.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use after merging a branch to main or cutting a release, to bring README.md and docs/architecture.md in sync with what actually shipped.
Use when the user wants to deploy, ship, or push the Jyotish Helper app live to production (Vercel) — merges/pushes to main and runs the Vercel prod deploy.
Use when the user wants to run, start, preview, or view the Jyotish Helper app locally in a browser — starts the Vite dev server and opens it.
| name | jyotish-design-standards |
| description | Use when building, styling, or reviewing any Jyotish Helper UI — components, colors, fonts, the North Indian chart, the time slider, glass panels — to keep the look consistent with the approved "Saffron Gold" direction. |
The approved visual direction is "Saffron Gold" (design-04): glossy, Apple-sleek, minimal, premium — warm ivory frosted glass with gold-leaf hairlines, saffron accents, a refined serif for display type, and a subtle gold mandala motif. Calm, gilded, expensive. Never gaudy.
Canonical reference: ../../../designs/design-04/index.html Drop-in tokens: tokens.css
web/.When NOT to use: backend / generator code, data model decisions.
Use the CSS variables from tokens.css. Never hardcode hex values that duplicate a token — reference the variable.
| Token | Value | Use |
|---|---|---|
--bg1 / --bg2 | #fbf4e6 / #fffdf8 | page gradient ends |
--glass | rgba(255,251,242,.6) | frosted panel fill |
--glass-brd | rgba(212,175,110,.45) | panel border |
--ink | #3a2e1c | primary text |
--ink-soft | #8a7558 | secondary text/labels |
--faint | #bca889 | hints, sign numbers |
--gold | #b8902f | hairlines, glyphs, primary accent |
--gold-soft | #f0e2c0 | active chip / rail fill |
--saffron | #e08a2b | "Now" marker, Sun, hot accent |
--line | rgba(184,144,47,.28) | dividers, control borders |
--shadow | 0 16px 46px -16px rgba(150,110,40,.3) | panel elevation |
Per-graha colors — each graha has its own theme-coherent color (earthy palette
with a couple of jewel accents), used for both the chart glyph and its slider dots.
Source of truth: the --gr-* vars in tokens.css.
| Graha | Token | Color |
|---|---|---|
| Sun (Su) | --gr-su | #d97a1f saffron |
| Moon (Mo) | --gr-mo | #7a8a8f moonstone (off by default in filters) |
| Mars (Ma) | --gr-ma | #b83f2e rust |
| Mercury (Me) | --gr-me | #2f7d5e emerald |
| Jupiter (Ju) | --gr-ju | #b8902f gold |
| Venus (Ve) | --gr-ve | #a06aa8 orchid |
| Saturn (Sa) | --gr-sa | #3f5f86 indigo |
| Rahu (Ra) | --gr-ra | #6a5a3f umber |
| Ketu (Ke) | --gr-ke | #8a6a4a tan |
Cormorant Garamond (600–700), serif.Sora (600–700) — geometric, vibrant, NOT serif.
This is deliberate: grahas read as crisp, modern tokens, each in its own color.Inter (300–600).Noto Sans Devanagari.text-transform:uppercase, letter-spacing:.1em, --ink-soft.background: var(--glass);
border: 1px solid var(--glass-brd);
backdrop-filter: blur(26px) saturate(140%);
-webkit-backdrop-filter: blur(26px) saturate(140%);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.7);
border-radius: 30px; /* cards. controls 13–16px, chips 20px pill */
linear-gradient(90deg,transparent,var(--gold),transparent), opacity ~.5, 1px tall.opacity:.14. Decorative only, pointer-events:none. Never let it compete with content.viewBox="0 0 400 400". Outer rect rounded rx=6, gold stroke 1.5.polygon points="200,2 398,200 200,398 2,200",
gold stroke ~1.1, opacity .7.--faint, 9px, near each region edge. Graha glyphs: Sora 600,
~15px, each in its own --gr-* color, centered at the house centroid; multiple
grahas in one cell use per-glyph <tspan> fills so each keeps its color.--gold-soft, 4px, rounded; fill linear-gradient(90deg,var(--saffron),var(--gold)).--saffron vertical line with a "Now" label above.The app is dual-theme: Light / Dark / Auto, driven by data-theme="light|dark"
on <html> (set pre-paint by an inline head script; managed by useTheme).
Dark is the approved Obsidian direction: near-black warm-neutral surfaces,
cream text, brightened gold, lightened graha colors. Same geometry, radii,
blur, and fonts — dark is a token swap, never a layout change.
Rules:
| Token | Light | Dark | Use |
|---|---|---|---|
--surface | rgba(255,255,255,.5) | rgba(255,255,255,.06) | control / panel fills |
--surface-on | #fff | rgba(255,255,255,.10) | active seg button, hover fills |
--hl | rgba(255,255,255,.7) | rgba(255,255,255,.06) | inset top highlight |
--dot | #fffdf8 | #e8e2d6 | slider transition dot fill |
--chart-bg | rgba(255,252,244,.4) | rgba(255,255,255,.045) | North Indian chart interior |
--shadow-rgb / --shadow-rgb2 | 150,110,40 / 184,144,47 | 0,0,0 / 0,0,0 | accent-shadow color (use as rgba(var(--shadow-rgb),α)) — control shadows, tdot focus ring |
:root[data-theme="dark"]
block in tokens.css): --bg1/--bg2 near-black, --glass
smoked, --ink* cream, --gold #dcae4d, --saffron #f0a13c,
--gold-soft becomes a translucent gold wash, shadows go black-based.--gr-* vars swap automatically; keep referencing the vars and both themes
work for free.color:#fff (white on
the saffron→gold gradient reads in both themes), and the light body
gradient's #fff/#f7ead0 highlights (dark has its own
:root[data-theme="dark"] body override).#fff panels → use warm --glass (ivory), not cold white.opacity ≤ .15), decorative.Sora (sans), each in its own --gr-* color.#fff / rgba(255,255,255,…) surfaces → use --surface / --surface-on / --hl so dark mode works.