Six Harming Groups (Liu Hai): The Rabbit and Dragon are in the Six Harming Groups.
",
- "css": ".ds-advice-warning { background: rgba(185,28,28,0.20); border-color: rgba(185,28,28,0.20); } .ds-advice-warning-text { font-size: 0.875rem; color: #fecaca; line-height: 1.5; } .ds-advice-warning-text strong { font-weight: 600; }"
- },
- {
- "name": "Overall Assessment Section",
- "kind": "custom",
- "refersTo": "overall-assessment",
- "description": "The emotional crescendo. The only element with a gradient background.",
- "html": "
Overall Assessment
Excellent
Your compatibility with a Fire Dragon Virgo is excellent.
Practical advice: Enjoy it.
",
- "css": ".ds-overall { background: linear-gradient(to bottom right, rgba(79,70,229,0.30), rgba(147,51,234,0.30)); border: 1px solid rgba(79,70,229,0.20); border-radius: 12px; padding: 24px; } .ds-overall-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .ds-overall-title { font-size: 1.125rem; font-weight: 600; color: #ffffff; } .ds-overall-body { font-size: 0.875rem; color: #e5e7eb; line-height: 1.6; margin-bottom: 12px; } .ds-overall-advice { padding: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; } .ds-overall-advice p { font-size: 0.875rem; color: #d1d5db; line-height: 1.5; } .ds-overall-advice strong { font-weight: 600; color: #ffffff; }"
- },
- {
- "name": "Text Input",
- "kind": "input",
- "refersTo": "text-input",
- "description": "Form input on the void background. Focus ring in indigo.",
- "html": "",
- "css": ".ds-input { width: 100%; padding: 12px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; color: #ffffff; font-family: Geist, Inter, system-ui, sans-serif; font-size: 1.125rem; box-sizing: border-box; } .ds-input::placeholder { color: #6b7280; } .ds-input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px #4f46e5; }"
- }
- ],
- "narrative": {
- "northStar": "Deep Sky",
- "overview": "The interface feels like looking up at a truly dark sky — not a flat black void, but a deep field where content emerges like starlight. The near-black canvas is the baseline; everything placed on it is a deliberate point of light. Sections reveal themselves not with sharp borders but with subtle luminosity shifts. The overall assessment section uses a gradient from indigo to purple, suggesting a nebular glow. Rating badges glow in their own spectral colors, each a distinct celestial body. Nothing sits flat; every element carries at least one layer of depth through opacity, color temperature, or gradient. This is a system for a personal tool shared between friends — sophisticated enough to trust, intimate enough to feel warm. No glassmorphism, no aggressive animations, no SaaS tropes. Just content placed carefully in a deep sky.",
- "keyCharacteristics": [
- "Dark-first, opacity-layered depth model",
- "Single accent (indigo) with spectral supporting colors for semantic states",
- "Gradients used sparingly at the system's emotional peak",
- "Generous breathing room — 24px card padding, 32px section gaps",
- "Type stays restrained: Geist Sans at a tight scale",
- "Zero box-shadows; depth is luminosity, not elevation"
- ],
- "rules": [
- {
- "name": "The One Light Rule",
- "body": "Only one element on any given screen uses the full-saturation indigo primary (#4f46e5). Everything else stays in the opacity-layered range. The primary button is the only thing that burns at full brightness.",
- "section": "colors"
- },
- {
- "name": "The Nebula Rule",
- "body": "Gradients appear on exactly one element: the overall assessment. This is the system's emotional crescendo. No other section competes with it for visual weight.",
- "section": "colors"
- },
- {
- "name": "The Flat-By-Default Rule",
- "body": "No element casts a shadow at rest. No element lifts on hover. The entire interface exists in one plane — depth is atmospheric, not dimensional.",
- "section": "elevation"
- },
- {
- "name": "The Soft Edge Rule",
- "body": "All interactive and container elements use border-radius. Nothing is sharp. Cards at 12px, buttons at 8px, badges fully round. Celestial bodies don't have sharp corners.",
- "section": "shapes"
- }
- ],
- "dos": [
- "Do use opacity layering for depth — white/5 for surfaces, white/10 for borders, color-900/20 for semantic backgrounds.",
- "Do keep the primary button as the only full-saturation element on screen.",
- "Do use the indigo-to-purple gradient exclusively on the overall assessment section.",
- "Do maintain 24px internal padding on all cards and 32px gaps between major sections.",
- "Do round all containers: 12px for cards, 8px for buttons and advice boxes, fully round for badges.",
- "Do use the semantic spectral colors (emerald/blue/amber/red) only for ratings and contextual warnings."
- ],
- "donts": [
- "Don't add box-shadows or elevation. Depth is luminosity, not Z-height.",
- "Don't use glassmorphism, backdrop-blur, or frosted-glass effects.",
- "Don't add gradients to cards, buttons, or any section other than the overall assessment.",
- "Don't use pure white (#ffffff) for body text — reserve it for headings and primary buttons.",
- "Don't use sharp corners. Every container and interactive element must be rounded.",
- "Don't add animations or transitions beyond the 150ms background-color hover on buttons."
- ]
- }
-}
\ No newline at end of file