",
"css": ".ds-sky { position: relative; height: 140px; background: var(--night, #040b26); } .ds-sky span { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--c); opacity: .7; animation: ds-twinkle 4s ease-in-out infinite; } @keyframes ds-twinkle { 50% { opacity: .15; } } @media (prefers-reduced-motion: reduce) { .ds-sky span { animation: none; } }"
}
],
"narrative": {
"northStar": "The Owl's Night Watch",
"overview": "A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a sad droop on a wrong password, an amber glow when the password is shown, a hop on success) carry the feedback alongside plain text, never instead of it.\n\nThe world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look (\"it must not look like a game, be natural\"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.\n\nThe system has been built on one surface so far (the sign-in page). Anything below described as a single instance has only that one use in the build and should be treated as provisional, not a pattern.",
"keyCharacteristics": [
"Deep navy night ground with a sparse, seeded field of small round stars, kept clear of text and controls.",
"One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.",
"Dark outlined pill controls for both the field and the button, after the user's HOOT button.",
"Platform UI face for every text role, including the product name.",
"A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns its movement off."
],
"rules": [
{
"name": "The One Warm Thing Rule",
"body": "Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy. The owl's ambers and golds stay inside the owl.",
"section": "colors"
},
{
"name": "The Clear Sky Rule",
"body": "Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.",
"section": "colors"
},
{
"name": "The Single Lift Rule",
"body": "One raised surface per screen; controls are outlined, not shadowed.",
"section": "elevation"
}
],
"dos": [
"Do keep the ground Night Navy and let the owl be the only warm, shaded object on screen.",
"Do use Owl Orange for focus rings (2px outline) on every interactive element.",
"Do build controls as dark outlined pills (999px, 46px tall) for both fields and primary buttons.",
"Do say in text whatever the owl expresses; the owl is decoration with feedback, never the only feedback.",
"Do give every owl or star animation a reduced-motion path that turns it off.",
"Do keep stars small (1.5 to 3px), round, sparse, seeded and clear of text and controls.",
"Do use clearly fake sample data in any design, mockup or screenshot (real run output is PHI)."
],
"donts": [
"Don't make it look like a game: no pixel art, stepped edges, chunky pixel fonts or arcade effects (user decision, 22 Oct).",
"Don't fill controls with orange; orange is a signal, not a surface.",
"Don't add shadows to controls; the card is the only lifted object.",
"Don't add a second type family for display; hierarchy comes from weight and size in the platform face."
]
}
}