Owl login: sad droop, peek glow, tap jump; title in card; docs refreshed
- Wrong password: owl droops its head with a slow blink (replaces the head-shake) - Show password: the owl's eye rims and lenses glow amber - Tap the owl and it jumps - Title "G2Team Potential Updater" and "Sign in" centered inside the card; subtitle hides after sign-in - Password field autofocuses - DESIGN.md, design.json, PRODUCT.md and the design brief updated to match the page Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
VasanthandClaude Opus 5.5 committed
1 parent
3b6e35fa62
commit
1e44758398
5 files changed
+443
-106
No files matched your search
+371
-48
@@ -1,53 +1,364 @@
|
||||
{
|
||||
"schemaVersion": 2,
|
||||
"generatedAt": "2026-10-22T12:00:00Z",
|
||||
"title": "Design System: Charge Billed Automation",
|
||||
"generatedAt": "2026-10-22T18:00:00Z",
|
||||
"title": "Design System: G2Team Potential Updater",
|
||||
"extensions": {
|
||||
"colorMeta": {
|
||||
"night": { "role": "neutral", "displayName": "Night Navy", "canonical": "#040b26", "tonalRamp": ["oklch(15% 0.057 267)", "oklch(25% 0.057 267)", "oklch(35% 0.057 267)", "oklch(45% 0.057 267)", "oklch(55% 0.057 267)", "oklch(68% 0.057 267)", "oklch(80% 0.057 267)", "oklch(95% 0.057 267)"] },
|
||||
"panel": { "role": "neutral", "displayName": "Card Navy", "canonical": "#0c1638", "tonalRamp": ["oklch(15% 0.068 268)", "oklch(25% 0.068 268)", "oklch(35% 0.068 268)", "oklch(45% 0.068 268)", "oklch(55% 0.068 268)", "oklch(68% 0.068 268)", "oklch(80% 0.068 268)", "oklch(95% 0.068 268)"] },
|
||||
"panel-line": { "role": "neutral", "displayName": "Card Edge", "canonical": "#26335e", "tonalRamp": ["oklch(15% 0.078 269)", "oklch(25% 0.078 269)", "oklch(35% 0.078 269)", "oklch(45% 0.078 269)", "oklch(55% 0.078 269)", "oklch(68% 0.078 269)", "oklch(80% 0.078 269)", "oklch(95% 0.078 269)"] },
|
||||
"field": { "role": "neutral", "displayName": "Well Navy", "canonical": "#050c28", "tonalRamp": ["oklch(15% 0.059 268)", "oklch(25% 0.059 268)", "oklch(35% 0.059 268)", "oklch(45% 0.059 268)", "oklch(55% 0.059 268)", "oklch(68% 0.059 268)", "oklch(80% 0.059 268)", "oklch(95% 0.059 268)"] },
|
||||
"field-line": { "role": "neutral", "displayName": "Field Edge", "canonical": "#56689c", "tonalRamp": ["oklch(15% 0.085 269)", "oklch(25% 0.085 269)", "oklch(35% 0.085 269)", "oklch(45% 0.085 269)", "oklch(55% 0.085 269)", "oklch(68% 0.085 269)", "oklch(80% 0.085 269)", "oklch(95% 0.085 269)"] },
|
||||
"pill-fill": { "role": "neutral", "displayName": "Button Navy", "canonical": "#0a1435", "tonalRamp": ["oklch(15% 0.066 268)", "oklch(25% 0.066 268)", "oklch(35% 0.066 268)", "oklch(45% 0.066 268)", "oklch(55% 0.066 268)", "oklch(68% 0.066 268)", "oklch(80% 0.066 268)", "oklch(95% 0.066 268)"] },
|
||||
"pill-fill-hover": { "role": "neutral", "displayName": "Button Navy Lifted", "canonical": "#101d45", "tonalRamp": ["oklch(15% 0.077 267)", "oklch(25% 0.077 267)", "oklch(35% 0.077 267)", "oklch(45% 0.077 267)", "oklch(55% 0.077 267)", "oklch(68% 0.077 267)", "oklch(80% 0.077 267)", "oklch(95% 0.077 267)"] },
|
||||
"pill-line": { "role": "neutral", "displayName": "Moonlight Edge", "canonical": "#c9d5f2", "tonalRamp": ["oklch(15% 0.042 268)", "oklch(25% 0.042 268)", "oklch(35% 0.042 268)", "oklch(45% 0.042 268)", "oklch(55% 0.042 268)", "oklch(68% 0.042 268)", "oklch(80% 0.042 268)", "oklch(95% 0.042 268)"] },
|
||||
"pill-text": { "role": "neutral", "displayName": "Pure White", "canonical": "#ffffff", "tonalRamp": ["oklch(15% 0 0)", "oklch(25% 0 0)", "oklch(35% 0 0)", "oklch(45% 0 0)", "oklch(55% 0 0)", "oklch(68% 0 0)", "oklch(80% 0 0)", "oklch(95% 0 0)"] },
|
||||
"ink": { "role": "neutral", "displayName": "Starlight Ink", "canonical": "#eef2ff", "tonalRamp": ["oklch(15% 0.018 272)", "oklch(25% 0.018 272)", "oklch(35% 0.018 272)", "oklch(45% 0.018 272)", "oklch(55% 0.018 272)", "oklch(68% 0.018 272)", "oklch(80% 0.018 272)", "oklch(95% 0.018 272)"] },
|
||||
"ink-2": { "role": "neutral", "displayName": "Mist Ink", "canonical": "#a9b6d8", "tonalRamp": ["oklch(15% 0.051 269)", "oklch(25% 0.051 269)", "oklch(35% 0.051 269)", "oklch(45% 0.051 269)", "oklch(55% 0.051 269)", "oklch(68% 0.051 269)", "oklch(80% 0.051 269)", "oklch(95% 0.051 269)"] },
|
||||
"owl": { "role": "primary", "displayName": "Owl Orange", "canonical": "#ec7d33", "tonalRamp": ["oklch(15% 0.16 50)", "oklch(25% 0.16 50)", "oklch(35% 0.16 50)", "oklch(45% 0.16 50)", "oklch(55% 0.16 50)", "oklch(68% 0.16 50)", "oklch(80% 0.16 50)", "oklch(95% 0.16 50)"] },
|
||||
"owl-soft": { "role": "primary", "displayName": "Lamplight Orange", "canonical": "#f5a25a", "tonalRamp": ["oklch(15% 0.132 60)", "oklch(25% 0.132 60)", "oklch(35% 0.132 60)", "oklch(45% 0.132 60)", "oklch(55% 0.132 60)", "oklch(68% 0.132 60)", "oklch(80% 0.132 60)", "oklch(95% 0.132 60)"] },
|
||||
"error": { "role": "semantic", "displayName": "Soft Alarm", "canonical": "#ff9a9a", "tonalRamp": ["oklch(15% 0.121 20)", "oklch(25% 0.121 20)", "oklch(35% 0.121 20)", "oklch(45% 0.121 20)", "oklch(55% 0.121 20)", "oklch(68% 0.121 20)", "oklch(80% 0.121 20)", "oklch(95% 0.121 20)"] }
|
||||
"night": {
|
||||
"role": "neutral",
|
||||
"displayName": "Night Navy",
|
||||
"canonical": "#040b26",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.057 267)",
|
||||
"oklch(25% 0.057 267)",
|
||||
"oklch(35% 0.057 267)",
|
||||
"oklch(45% 0.057 267)",
|
||||
"oklch(55% 0.057 267)",
|
||||
"oklch(68% 0.057 267)",
|
||||
"oklch(80% 0.057 267)",
|
||||
"oklch(95% 0.057 267)"
|
||||
]
|
||||
},
|
||||
"panel": {
|
||||
"role": "neutral",
|
||||
"displayName": "Card Navy",
|
||||
"canonical": "#0c1638",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.068 268)",
|
||||
"oklch(25% 0.068 268)",
|
||||
"oklch(35% 0.068 268)",
|
||||
"oklch(45% 0.068 268)",
|
||||
"oklch(55% 0.068 268)",
|
||||
"oklch(68% 0.068 268)",
|
||||
"oklch(80% 0.068 268)",
|
||||
"oklch(95% 0.068 268)"
|
||||
]
|
||||
},
|
||||
"panel-line": {
|
||||
"role": "neutral",
|
||||
"displayName": "Card Edge",
|
||||
"canonical": "#26335e",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.078 269)",
|
||||
"oklch(25% 0.078 269)",
|
||||
"oklch(35% 0.078 269)",
|
||||
"oklch(45% 0.078 269)",
|
||||
"oklch(55% 0.078 269)",
|
||||
"oklch(68% 0.078 269)",
|
||||
"oklch(80% 0.078 269)",
|
||||
"oklch(95% 0.078 269)"
|
||||
]
|
||||
},
|
||||
"field": {
|
||||
"role": "neutral",
|
||||
"displayName": "Well Navy",
|
||||
"canonical": "#050c28",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.059 268)",
|
||||
"oklch(25% 0.059 268)",
|
||||
"oklch(35% 0.059 268)",
|
||||
"oklch(45% 0.059 268)",
|
||||
"oklch(55% 0.059 268)",
|
||||
"oklch(68% 0.059 268)",
|
||||
"oklch(80% 0.059 268)",
|
||||
"oklch(95% 0.059 268)"
|
||||
]
|
||||
},
|
||||
"field-line": {
|
||||
"role": "neutral",
|
||||
"displayName": "Field Edge",
|
||||
"canonical": "#56689c",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.085 269)",
|
||||
"oklch(25% 0.085 269)",
|
||||
"oklch(35% 0.085 269)",
|
||||
"oklch(45% 0.085 269)",
|
||||
"oklch(55% 0.085 269)",
|
||||
"oklch(68% 0.085 269)",
|
||||
"oklch(80% 0.085 269)",
|
||||
"oklch(95% 0.085 269)"
|
||||
]
|
||||
},
|
||||
"pill-fill": {
|
||||
"role": "neutral",
|
||||
"displayName": "Button Navy",
|
||||
"canonical": "#0a1435",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.066 268)",
|
||||
"oklch(25% 0.066 268)",
|
||||
"oklch(35% 0.066 268)",
|
||||
"oklch(45% 0.066 268)",
|
||||
"oklch(55% 0.066 268)",
|
||||
"oklch(68% 0.066 268)",
|
||||
"oklch(80% 0.066 268)",
|
||||
"oklch(95% 0.066 268)"
|
||||
]
|
||||
},
|
||||
"pill-fill-hover": {
|
||||
"role": "neutral",
|
||||
"displayName": "Button Navy Lifted",
|
||||
"canonical": "#101d45",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.077 267)",
|
||||
"oklch(25% 0.077 267)",
|
||||
"oklch(35% 0.077 267)",
|
||||
"oklch(45% 0.077 267)",
|
||||
"oklch(55% 0.077 267)",
|
||||
"oklch(68% 0.077 267)",
|
||||
"oklch(80% 0.077 267)",
|
||||
"oklch(95% 0.077 267)"
|
||||
]
|
||||
},
|
||||
"pill-line": {
|
||||
"role": "neutral",
|
||||
"displayName": "Moonlight Edge",
|
||||
"canonical": "#c9d5f2",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.042 268)",
|
||||
"oklch(25% 0.042 268)",
|
||||
"oklch(35% 0.042 268)",
|
||||
"oklch(45% 0.042 268)",
|
||||
"oklch(55% 0.042 268)",
|
||||
"oklch(68% 0.042 268)",
|
||||
"oklch(80% 0.042 268)",
|
||||
"oklch(95% 0.042 268)"
|
||||
]
|
||||
},
|
||||
"pill-text": {
|
||||
"role": "neutral",
|
||||
"displayName": "Pure White",
|
||||
"canonical": "#ffffff",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0 0)",
|
||||
"oklch(25% 0 0)",
|
||||
"oklch(35% 0 0)",
|
||||
"oklch(45% 0 0)",
|
||||
"oklch(55% 0 0)",
|
||||
"oklch(68% 0 0)",
|
||||
"oklch(80% 0 0)",
|
||||
"oklch(95% 0 0)"
|
||||
]
|
||||
},
|
||||
"ink": {
|
||||
"role": "neutral",
|
||||
"displayName": "Starlight Ink",
|
||||
"canonical": "#eef2ff",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.018 272)",
|
||||
"oklch(25% 0.018 272)",
|
||||
"oklch(35% 0.018 272)",
|
||||
"oklch(45% 0.018 272)",
|
||||
"oklch(55% 0.018 272)",
|
||||
"oklch(68% 0.018 272)",
|
||||
"oklch(80% 0.018 272)",
|
||||
"oklch(95% 0.018 272)"
|
||||
]
|
||||
},
|
||||
"ink-2": {
|
||||
"role": "neutral",
|
||||
"displayName": "Mist Ink",
|
||||
"canonical": "#a9b6d8",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.051 269)",
|
||||
"oklch(25% 0.051 269)",
|
||||
"oklch(35% 0.051 269)",
|
||||
"oklch(45% 0.051 269)",
|
||||
"oklch(55% 0.051 269)",
|
||||
"oklch(68% 0.051 269)",
|
||||
"oklch(80% 0.051 269)",
|
||||
"oklch(95% 0.051 269)"
|
||||
]
|
||||
},
|
||||
"owl": {
|
||||
"role": "primary",
|
||||
"displayName": "Owl Orange",
|
||||
"canonical": "#ec7d33",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.16 50)",
|
||||
"oklch(25% 0.16 50)",
|
||||
"oklch(35% 0.16 50)",
|
||||
"oklch(45% 0.16 50)",
|
||||
"oklch(55% 0.16 50)",
|
||||
"oklch(68% 0.16 50)",
|
||||
"oklch(80% 0.16 50)",
|
||||
"oklch(95% 0.16 50)"
|
||||
]
|
||||
},
|
||||
"owl-soft": {
|
||||
"role": "primary",
|
||||
"displayName": "Lamplight Orange",
|
||||
"canonical": "#f5a25a",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.132 60)",
|
||||
"oklch(25% 0.132 60)",
|
||||
"oklch(35% 0.132 60)",
|
||||
"oklch(45% 0.132 60)",
|
||||
"oklch(55% 0.132 60)",
|
||||
"oklch(68% 0.132 60)",
|
||||
"oklch(80% 0.132 60)",
|
||||
"oklch(95% 0.132 60)"
|
||||
]
|
||||
},
|
||||
"error": {
|
||||
"role": "semantic",
|
||||
"displayName": "Soft Alarm",
|
||||
"canonical": "#ff9a9a",
|
||||
"tonalRamp": [
|
||||
"oklch(15% 0.121 20)",
|
||||
"oklch(25% 0.121 20)",
|
||||
"oklch(35% 0.121 20)",
|
||||
"oklch(45% 0.121 20)",
|
||||
"oklch(55% 0.121 20)",
|
||||
"oklch(68% 0.121 20)",
|
||||
"oklch(80% 0.121 20)",
|
||||
"oklch(95% 0.121 20)"
|
||||
]
|
||||
}
|
||||
},
|
||||
"typographyMeta": {
|
||||
"display": { "displayName": "Display", "purpose": "Product name above the card. Single instance." },
|
||||
"title": { "displayName": "Title", "purpose": "Signed-in confirmation heading. Single instance." },
|
||||
"body": { "displayName": "Body", "purpose": "Subtitle and running copy, usually in Mist Ink." },
|
||||
"label": { "displayName": "Label", "purpose": "Field labels, 8px above the field." },
|
||||
"button": { "displayName": "Button", "purpose": "Pill button label." },
|
||||
"input": { "displayName": "Input", "purpose": "Typed text; 16px avoids mobile zoom." },
|
||||
"message": { "displayName": "Message", "purpose": "Error and caps-lock lines under the field." }
|
||||
"display": {
|
||||
"displayName": "Display",
|
||||
"purpose": "Product name, centered at the top of the card. Single instance."
|
||||
},
|
||||
"title": {
|
||||
"displayName": "Title",
|
||||
"purpose": "Signed-in confirmation heading. Single instance."
|
||||
},
|
||||
"body": {
|
||||
"displayName": "Body",
|
||||
"purpose": "The \"Sign in\" subtitle and running copy, usually in Mist Ink."
|
||||
},
|
||||
"label": {
|
||||
"displayName": "Label",
|
||||
"purpose": "Field labels, 8px above the field."
|
||||
},
|
||||
"button": {
|
||||
"displayName": "Button",
|
||||
"purpose": "Pill button label."
|
||||
},
|
||||
"input": {
|
||||
"displayName": "Input",
|
||||
"purpose": "Typed text; 16px avoids mobile zoom."
|
||||
},
|
||||
"message": {
|
||||
"displayName": "Message",
|
||||
"purpose": "Error and caps-lock lines under the field."
|
||||
}
|
||||
},
|
||||
"shadows": [
|
||||
{ "name": "night-lift", "value": "0 18px 40px rgba(0, 3, 15, .5)", "purpose": "The sign-in card only; the single raised surface. Single instance." }
|
||||
{
|
||||
"name": "night-lift",
|
||||
"value": "0 18px 40px rgba(0, 3, 15, .5)",
|
||||
"purpose": "The sign-in card only; the single raised surface. Single instance."
|
||||
}
|
||||
],
|
||||
"focusRings": [
|
||||
{ "name": "control-focus", "value": "outline: 2px solid #ec7d33; outline-offset: 2px (input, plus border-color #ec7d33), 3px (pill button), 0 (reveal icon button)", "purpose": "Keyboard focus on every interactive element; turns #ff9a9a on an invalid field." }
|
||||
{
|
||||
"name": "control-focus",
|
||||
"value": "outline: 2px solid #ec7d33; outline-offset: 2px (input, plus border-color #ec7d33), 3px (pill button), 0 (reveal icon button)",
|
||||
"purpose": "Keyboard focus on every interactive element; turns #ff9a9a on an invalid field."
|
||||
}
|
||||
],
|
||||
"motion": [
|
||||
{ "name": "control-transition", "value": ".15s ease-out", "purpose": "Pill button border and fill on hover." },
|
||||
{ "name": "gaze", "value": "transform .14s ease-out", "purpose": "Owl irises following the caret." },
|
||||
{ "name": "blink", "value": "transform .08s ease-out, 160ms, every 2.5-6s", "purpose": "Owl eyelids." },
|
||||
{ "name": "breathe", "value": "3.2s ease-in-out infinite, translateY(1.5px)", "purpose": "Owl idle bob." },
|
||||
{ "name": "shake-no", "value": ".65s ease-in-out; glasses wobble .65s with .07s delay", "purpose": "Wrong password." },
|
||||
{ "name": "tilt", "value": ".8s ease-in-out, rotate(-10deg)", "purpose": "Empty submit." },
|
||||
{ "name": "hop", "value": ".75s cubic-bezier(.3, .6, .35, 1), translateY(-14px) then -3px rebound; wings flap .75s; smile-eyes .12s ease-out", "purpose": "Successful sign-in." },
|
||||
{ "name": "twinkle", "value": "4s ease-in-out infinite, opacity to .15", "purpose": "About a third of the stars." },
|
||||
{ "name": "reduced-motion", "value": "prefers-reduced-motion: reduce", "purpose": "All owl and star animation and transitions off, no blink, success goes straight to the signed-in panel." }
|
||||
{
|
||||
"name": "control-transition",
|
||||
"value": ".15s ease-out",
|
||||
"purpose": "Pill button border and fill on hover."
|
||||
},
|
||||
{
|
||||
"name": "gaze",
|
||||
"value": "transform .14s ease-out",
|
||||
"purpose": "Owl irises following the caret."
|
||||
},
|
||||
{
|
||||
"name": "blink",
|
||||
"value": "transform .08s ease-out, 160ms, every 2.5-6s; skipped during happy and sad",
|
||||
"purpose": "Owl eyelids."
|
||||
},
|
||||
{
|
||||
"name": "breathe",
|
||||
"value": "3.2s ease-in-out infinite, translateY(.4 SVG units, about 1.6px)",
|
||||
"purpose": "Owl idle bob."
|
||||
},
|
||||
{
|
||||
"name": "droop",
|
||||
"value": "1.4s ease-in-out, head translateY(1.2 units) rotate(-6deg); slow-blink lids 1.4s",
|
||||
"purpose": "Wrong password (sad)."
|
||||
},
|
||||
{
|
||||
"name": "peek",
|
||||
"value": ".15s ease-out on stroke, fill, fill-opacity, filter",
|
||||
"purpose": "Owl eye rims and lenses glow amber while the password is shown."
|
||||
},
|
||||
{
|
||||
"name": "tilt",
|
||||
"value": ".8s ease-in-out, rotate(-10deg)",
|
||||
"purpose": "Empty submit."
|
||||
},
|
||||
{
|
||||
"name": "hop",
|
||||
"value": ".75s cubic-bezier(.3, .6, .35, 1), translateY(-14 units) then -3 rebound; wings flap .75s; smile-eyes .12s ease-out",
|
||||
"purpose": "Successful sign-in (with smile) and tap-the-owl jump (without)."
|
||||
},
|
||||
{
|
||||
"name": "twinkle",
|
||||
"value": "4s ease-in-out infinite, opacity to .15",
|
||||
"purpose": "About a third of the stars."
|
||||
},
|
||||
{
|
||||
"name": "reduced-motion",
|
||||
"value": "prefers-reduced-motion: reduce",
|
||||
"purpose": "All owl and star animation and transitions off, no blink or tap jump, success goes straight to the signed-in panel; gaze and peek glow still apply without easing."
|
||||
}
|
||||
],
|
||||
"breakpoints": [
|
||||
{ "name": "narrow", "value": "420px", "purpose": "Owl shrinks from 212px to 172px wide." }
|
||||
]
|
||||
{
|
||||
"name": "narrow",
|
||||
"value": "420px",
|
||||
"purpose": "Owl shrinks from 190px to 160px wide."
|
||||
}
|
||||
],
|
||||
"illustration": {
|
||||
"stars": [
|
||||
"#6ea8ff",
|
||||
"#4fd1c5",
|
||||
"#f29c4b",
|
||||
"#dfe7ff"
|
||||
],
|
||||
"owl": {
|
||||
"viewBox": "0 0 48 50",
|
||||
"outline": "#38200b at 1.2 stroke",
|
||||
"coat": [
|
||||
"#ff990e",
|
||||
"#f58200",
|
||||
"#bd4b00"
|
||||
],
|
||||
"wing": [
|
||||
"#ed7b00",
|
||||
"#a73e00"
|
||||
],
|
||||
"crownFeathers": "#ac4904",
|
||||
"chevrons": "#ffbe42",
|
||||
"faceDisc": "#ffe8b3",
|
||||
"eyeWhite": "#fffdf4",
|
||||
"iris": "#6b3518",
|
||||
"pupil": "#170e08",
|
||||
"glasses": "#2a180c, rounded rectangles 10x6 rx 1.5, sitting low on the face",
|
||||
"beak": "#eb870a",
|
||||
"feet": "#ed900f",
|
||||
"groundGlow": "#ffaa5a at .35 to 0",
|
||||
"peekGlow": {
|
||||
"rimStroke": "#ffc400",
|
||||
"rimGlow": [
|
||||
"#ffd84d",
|
||||
"#ffb300"
|
||||
],
|
||||
"lensFill": "#ffe066 at .45",
|
||||
"lensGlow": "#ffc400"
|
||||
}
|
||||
},
|
||||
"note": "Mascot illustration values only; never applied to UI chrome."
|
||||
}
|
||||
},
|
||||
"components": [
|
||||
{
|
||||
@@ -77,32 +388,44 @@
|
||||
"name": "Night Card",
|
||||
"kind": "card",
|
||||
"refersTo": "card",
|
||||
"description": "The single raised surface: Card Navy, 1px Card Edge, 18px corners, night-lift shadow. Single instance.",
|
||||
"html": "<section class=\"ds-card\"><h2 class=\"ds-title\">Run screen coming soon</h2><p class=\"ds-body\">You're signed in. This is where you'll start and watch the bot.</p></section>",
|
||||
"css": ".ds-card { width: min(360px, 100%); box-sizing: border-box; padding: 28px 24px 24px; background: var(--panel, #0c1638); border: 1px solid var(--panel-line, #26335e); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 3, 15, .5); color: var(--ink, #eef2ff); font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .ds-title { margin: 0; font-size: 20px; } .ds-body { margin: 6px 0 0; color: var(--ink-2, #a9b6d8); }"
|
||||
"description": "The single raised surface: Card Navy, 1px Card Edge, 18px corners, night-lift shadow, with the product name and subtitle centered at its top. Single instance.",
|
||||
"html": "<section class=\"ds-card\"><h1 class=\"ds-h1\">G2Team Potential Updater</h1><p class=\"ds-sub\">Sign in</p><h2 class=\"ds-title\">Run screen coming soon</h2><p class=\"ds-body\">You're signed in. This is where you'll start and watch the bot.</p></section>",
|
||||
"css": ".ds-card { width: min(360px, 100%); box-sizing: border-box; padding: 28px 24px 24px; background: var(--panel, #0c1638); border: 1px solid var(--panel-line, #26335e); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 3, 15, .5); color: var(--ink, #eef2ff); font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .ds-h1 { margin: 0; font-size: clamp(20px, 5vw, 23px); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; text-align: center; } .ds-sub { margin: 4px 0 22px; color: var(--ink-2, #a9b6d8); text-align: center; } .ds-title { margin: 0; font-size: 20px; } .ds-body { margin: 6px 0 0; color: var(--ink-2, #a9b6d8); }"
|
||||
},
|
||||
{
|
||||
"name": "Night Sky Header",
|
||||
"name": "Night Sky",
|
||||
"kind": "custom",
|
||||
"description": "Night Navy ground with small round stars, display product name and Mist Ink subtitle.",
|
||||
"html": "<div class=\"ds-sky\"><span style=\"left:12%;top:20%;--c:#6ea8ff\"></span><span style=\"left:80%;top:30%;--c:#4fd1c5\"></span><span style=\"left:30%;top:78%;--c:#f29c4b\"></span><span style=\"left:66%;top:84%;--c:#dfe7ff\"></span><h1 class=\"ds-h1\">Charge Billed Automation</h1><p class=\"ds-sub\">Sign in to run the bot</p></div>",
|
||||
"css": ".ds-sky { position: relative; padding: 48px 16px; background: var(--night, #040b26); color: var(--ink, #eef2ff); text-align: center; font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .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; } } .ds-h1 { margin: 0; font-size: clamp(24px, 6vw, 30px); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; } .ds-sub { margin: 8px 0 0; color: var(--ink-2, #a9b6d8); } @media (prefers-reduced-motion: reduce) { .ds-sky span { animation: none; } }"
|
||||
"description": "Night Navy ground with small, sparse round stars, about a third twinkling; kept clear of text and the card.",
|
||||
"html": "<div class=\"ds-sky\"><span style=\"left:12%;top:20%;--c:#6ea8ff\"></span><span style=\"left:80%;top:30%;--c:#4fd1c5\"></span><span style=\"left:30%;top:78%;--c:#f29c4b\"></span><span style=\"left:66%;top:84%;--c:#dfe7ff\"></span></div>",
|
||||
"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 head-shake on a wrong password, 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.",
|
||||
"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 them all off."
|
||||
"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.", "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" }
|
||||
{
|
||||
"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.",
|
||||
|
||||
Reference in new issue
Block a user