329 lines
14 KiB
JSON
329 lines
14 KiB
JSON
{
|
|
"schemaVersion": 2,
|
|
"generatedAt": "2026-10-02T21:37:12.817947+00:00",
|
|
"title": "Design System: YT Player — Classic",
|
|
"extensions": {
|
|
"colorMeta": {
|
|
"accent": {
|
|
"role": "primary",
|
|
"displayName": "Accent"
|
|
},
|
|
"accent-bright": {
|
|
"role": "primary",
|
|
"displayName": "Accent Bright"
|
|
},
|
|
"accent-deep": {
|
|
"role": "primary",
|
|
"displayName": "Accent Deep"
|
|
},
|
|
"bg": {
|
|
"role": "neutral",
|
|
"displayName": "Bg"
|
|
},
|
|
"bg-1": {
|
|
"role": "neutral",
|
|
"displayName": "Bg 1"
|
|
},
|
|
"bg-2": {
|
|
"role": "neutral",
|
|
"displayName": "Bg 2"
|
|
},
|
|
"bg-3": {
|
|
"role": "neutral",
|
|
"displayName": "Bg 3"
|
|
},
|
|
"line": {
|
|
"role": "neutral",
|
|
"displayName": "Line"
|
|
},
|
|
"line-soft": {
|
|
"role": "neutral",
|
|
"displayName": "Line Soft"
|
|
},
|
|
"text": {
|
|
"role": "neutral",
|
|
"displayName": "Text"
|
|
},
|
|
"text-2": {
|
|
"role": "neutral",
|
|
"displayName": "Text 2"
|
|
},
|
|
"text-dim": {
|
|
"role": "neutral",
|
|
"displayName": "Text Dim"
|
|
},
|
|
"on-primary": {
|
|
"role": "neutral",
|
|
"displayName": "On Primary"
|
|
},
|
|
"on-play": {
|
|
"role": "neutral",
|
|
"displayName": "On Play"
|
|
},
|
|
"light-bg": {
|
|
"role": "neutral",
|
|
"displayName": "Light Bg"
|
|
},
|
|
"light-bg-1": {
|
|
"role": "neutral",
|
|
"displayName": "Light Bg 1"
|
|
},
|
|
"light-bg-2": {
|
|
"role": "neutral",
|
|
"displayName": "Light Bg 2"
|
|
},
|
|
"light-bg-3": {
|
|
"role": "neutral",
|
|
"displayName": "Light Bg 3"
|
|
},
|
|
"light-line": {
|
|
"role": "neutral",
|
|
"displayName": "Light Line"
|
|
},
|
|
"light-line-soft": {
|
|
"role": "neutral",
|
|
"displayName": "Light Line Soft"
|
|
},
|
|
"light-text": {
|
|
"role": "neutral",
|
|
"displayName": "Light Text"
|
|
},
|
|
"light-text-2": {
|
|
"role": "neutral",
|
|
"displayName": "Light Text 2"
|
|
},
|
|
"light-text-dim": {
|
|
"role": "neutral",
|
|
"displayName": "Light Text Dim"
|
|
},
|
|
"light-accent": {
|
|
"role": "primary",
|
|
"displayName": "Light Accent"
|
|
},
|
|
"light-accent-bright": {
|
|
"role": "primary",
|
|
"displayName": "Light Accent Bright"
|
|
},
|
|
"light-accent-deep": {
|
|
"role": "primary",
|
|
"displayName": "Light Accent Deep"
|
|
},
|
|
"contrast-bg": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Bg"
|
|
},
|
|
"contrast-bg-2": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Bg 2"
|
|
},
|
|
"contrast-bg-3": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Bg 3"
|
|
},
|
|
"contrast-line": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Line"
|
|
},
|
|
"contrast-line-soft": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Line Soft"
|
|
},
|
|
"contrast-text-dim": {
|
|
"role": "neutral",
|
|
"displayName": "Contrast Text Dim"
|
|
},
|
|
"contrast-accent": {
|
|
"role": "primary",
|
|
"displayName": "Contrast Accent"
|
|
},
|
|
"contrast-accent-bright": {
|
|
"role": "primary",
|
|
"displayName": "Contrast Accent Bright"
|
|
}
|
|
},
|
|
"typographyMeta": {
|
|
"display": {
|
|
"displayName": "Display",
|
|
"purpose": "Empty-home heading."
|
|
},
|
|
"headline": {
|
|
"displayName": "Headline",
|
|
"purpose": "Now-playing media title."
|
|
},
|
|
"title": {
|
|
"displayName": "Title",
|
|
"purpose": "Browsing heading."
|
|
},
|
|
"body": {
|
|
"displayName": "Body",
|
|
"purpose": "Interface text."
|
|
},
|
|
"label": {
|
|
"displayName": "Label",
|
|
"purpose": "Suggestion chips."
|
|
},
|
|
"media-title": {
|
|
"displayName": "Media Title",
|
|
"purpose": "Browsing media titles."
|
|
},
|
|
"time": {
|
|
"displayName": "Time",
|
|
"purpose": "Tabular transport timestamps."
|
|
}
|
|
},
|
|
"shadows": [
|
|
{
|
|
"name": "dialog-dark",
|
|
"value": "0 18px 50px -12px rgba(0, 0, 0, 0.7)",
|
|
"purpose": "Inherited dialog and sheet elevation in dark mode."
|
|
},
|
|
{
|
|
"name": "dialog-light",
|
|
"value": "0 18px 50px -18px rgba(0, 0, 0, 0.25)",
|
|
"purpose": "Inherited dialog and sheet elevation in light mode."
|
|
},
|
|
{
|
|
"name": "playing-edge",
|
|
"value": "inset 2px 0 var(--accent)",
|
|
"purpose": "Selected media row indicator, not ambient elevation."
|
|
}
|
|
],
|
|
"motion": [
|
|
{
|
|
"name": "ease",
|
|
"value": "cubic-bezier(0.22, 1, 0.36, 1)",
|
|
"purpose": "Inherited interface easing."
|
|
},
|
|
{
|
|
"name": "color-state",
|
|
"value": "background 0.16s, color 0.16s",
|
|
"purpose": "Recurring inherited color state transition."
|
|
},
|
|
{
|
|
"name": "reduced-duration",
|
|
"value": "0.001ms",
|
|
"purpose": "Explicit preference and operating-system reduced motion."
|
|
}
|
|
],
|
|
"breakpoints": [
|
|
{
|
|
"name": "stacked-max",
|
|
"value": "1200px"
|
|
},
|
|
{
|
|
"name": "mobile-max",
|
|
"value": "860px"
|
|
},
|
|
{
|
|
"name": "xl-navigation-max",
|
|
"value": "420px"
|
|
},
|
|
{
|
|
"name": "narrow-thumbnail-max",
|
|
"value": "380px"
|
|
},
|
|
{
|
|
"name": "transport-wide-container-min",
|
|
"value": "620px"
|
|
},
|
|
{
|
|
"name": "transport-narrow-container-max",
|
|
"value": "300px"
|
|
}
|
|
]
|
|
},
|
|
"components": [
|
|
{
|
|
"name": "Filled action",
|
|
"kind": "button",
|
|
"refersTo": "button-primary",
|
|
"description": "Classic list action.",
|
|
"html": "<button class=\"ds-primary\">Play all</button>",
|
|
"css": ".ds-primary { background:var(--accent-deep,#c6442f);color:#fff;border:0;border-radius:8px;min-height:44px;padding:8px 12px;font:800 14px var(--ui,\"Hanken Grotesk\",system-ui,sans-serif);cursor:pointer;transition:background .16s,color .16s; }.ds-primary:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Search action",
|
|
"kind": "button",
|
|
"refersTo": "button-search",
|
|
"description": "Quiet search submission, accented on hover.",
|
|
"html": "<button class=\"ds-search\">Search</button>",
|
|
"css": ".ds-search { background:var(--bg-3,#2b2e33);color:var(--text,#f3f1ed);border:0;border-radius:8px;min-height:46px;padding:0 22px;font:600 14px var(--ui,\"Hanken Grotesk\",system-ui,sans-serif);cursor:pointer;transition:background .16s,color .16s; }.ds-search:hover { background:var(--accent-deep,#c6442f);color:#fff; }.ds-search:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Play control",
|
|
"kind": "button",
|
|
"refersTo": "button-play",
|
|
"description": "Circular primary transport.",
|
|
"html": "<button class=\"ds-play\" aria-label=\"Play\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m8 5 11 7-11 7z\" fill=\"currentColor\"/></svg></button>",
|
|
"css": ".ds-play { display:grid;place-items:center;width:64px;height:64px;border:0;border-radius:50%;background:var(--accent,#f06b53);color:#171719;cursor:pointer;transition:background .16s; }.ds-play:hover { background:var(--accent-bright,#ff947e); }.ds-play:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Search field",
|
|
"kind": "input",
|
|
"refersTo": "input-search",
|
|
"description": "Full-width media query field.",
|
|
"html": "<input class=\"ds-input\" aria-label=\"Search media\" placeholder=\"Search YouTube…\">",
|
|
"css": ".ds-input { background:var(--bg-1,#18191c);color:var(--text,#f3f1ed);border:1px solid var(--line,#42464d);border-radius:8px;min-height:46px;padding:11px 14px;font:16px var(--ui,\"Hanken Grotesk\",system-ui,sans-serif);caret-color:var(--accent,#f06b53);transition:border-color .2s,background .2s; }.ds-input::placeholder { color:var(--text-dim,#a1a5ac);opacity:1; }.ds-input:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Suggestion chip",
|
|
"kind": "chip",
|
|
"refersTo": "chip",
|
|
"description": "Media search suggestion.",
|
|
"html": "<button class=\"ds-chip\">Jazz</button>",
|
|
"css": ".ds-chip { min-height:44px;padding:10px 14px;background:var(--bg-2,#202226);border:1px solid var(--line-soft,#2b2e33);border-radius:8px;color:var(--text,#f3f1ed);font:500 14px var(--ui,\"Hanken Grotesk\",system-ui,sans-serif);cursor:pointer;transition:background .16s,border-color .16s; }.ds-chip:hover { border-color:var(--accent,#f06b53); }.ds-chip:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Active navigation",
|
|
"kind": "nav",
|
|
"refersTo": "nav-active",
|
|
"description": "Sidebar selection with stroked SVG.",
|
|
"html": "<button class=\"ds-nav\" aria-current=\"page\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"/><path d=\"m16 16 5 5\"/></svg>Search</button>",
|
|
"css": ".ds-nav { display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 12px;border:0;border-radius:var(--radius-sm,8px);background:var(--bg-3,#2b2e33);color:var(--text,#f3f1ed);font:14px var(--ui,\"Hanken Grotesk\",system-ui,sans-serif);cursor:pointer;transition:color .18s,background .18s; }.ds-nav svg { fill:none;stroke:var(--accent,#f06b53);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }.ds-nav:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
},
|
|
{
|
|
"name": "Playing media row",
|
|
"kind": "card",
|
|
"refersTo": "media-row",
|
|
"description": "Divider-separated selected media without a raster fixture.",
|
|
"html": "<div class=\"ds-row\" tabindex=\"0\"><div class=\"ds-thumb\" aria-label=\"Media thumbnail area\"></div><div><div class=\"ds-title\">Media title</div><div class=\"ds-channel\">Channel</div></div><button class=\"ds-row-menu\" aria-label=\"Media actions\"><svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"5\" r=\"1.5\"/><circle cx=\"12\" cy=\"12\" r=\"1.5\"/><circle cx=\"12\" cy=\"19\" r=\"1.5\"/></svg></button></div>",
|
|
"css": ".ds-row { display:grid;grid-template-columns:88px minmax(0,1fr) 44px;gap:12px;padding:12px 8px;border-bottom:1px solid var(--line-soft,#2b2e33);background:var(--bg-3,#2b2e33);box-shadow:inset 2px 0 var(--accent,#f06b53);color:var(--text,#f3f1ed);font-family:var(--ui,\"Hanken Grotesk\",system-ui,sans-serif); }.ds-thumb { width:88px;aspect-ratio:16/9;border-radius:6px;background:var(--bg-2,#202226); }.ds-title { font-size:14px;font-weight:600;line-height:1.45; }.ds-channel { font-size:12px;color:var(--text-dim,#a1a5ac);margin-top:5px; }.ds-row-menu { min-width:44px;min-height:44px;background:transparent;color:var(--text,#f3f1ed);border:0;cursor:pointer; }.ds-row-menu svg { fill:currentColor; }.ds-row:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }.ds-row-menu:focus-visible { outline:2px solid var(--accent,#f06b53);outline-offset:3px; }"
|
|
}
|
|
],
|
|
"narrative": {
|
|
"northStar": "Quiet Media Studio",
|
|
"overview": "Classic is a matte charcoal media workspace with warm white type and restrained vermilion. Watching and listening share the same visual priority; playback, browsing, and library controls remain legible together. This system applies only when the Classic layout is selected. Other theme families retain their own visual authority.\n\nThe implemented world uses tonal surfaces, fine dividers, bundled typography, and generous control targets. Light, high contrast, text scale, compact density, and reduced motion are supported appearance preferences. Source evidence is frontend/theme-classic.css, with inherited typography and preference values from frontend/styles.css and frontend/refresh.css; the approved direction lives in .impeccable/surfaces/frontend-theme-classic-css.md.",
|
|
"keyCharacteristics": [
|
|
"Matte tonal layers and fine dividers.",
|
|
"Restrained vermilion for playback, actions, and selection.",
|
|
"Bricolage headings, Hanken interface text, JetBrains timing.",
|
|
"Responsive workspace with persistent access to playback."
|
|
],
|
|
"rules": [
|
|
{
|
|
"name": "The Classic Scope Rule",
|
|
"body": "Apply these rules only to Classic; shared markup does not make them rules for other layout families.",
|
|
"section": "colors"
|
|
},
|
|
{
|
|
"name": "The Tonal Surface Rule",
|
|
"body": "Use surface tone and fine dividers for resting depth; reserve the inherited ambient shadow for dialogs and sheets.",
|
|
"section": "elevation"
|
|
}
|
|
],
|
|
"dos": [
|
|
"Do keep Classic overrides scoped to the selected Classic layout.",
|
|
"Do use tonal surfaces and fine dividers for workspace hierarchy.",
|
|
"Do preserve light, high contrast, text scale, density, safe areas, and reduced motion.",
|
|
"Do use inline SVG for navigation icons and retain visible keyboard focus.",
|
|
"Do use media thumbnails as user content."
|
|
],
|
|
"donts": [
|
|
"Don't add ambient glow or grain to Classic.",
|
|
"Don't force empty home into the video aspect ratio.",
|
|
"Don't hide row actions until hover or reduce established control targets to fit a crowded layout.",
|
|
"Don't transfer this visual world to other layout families."
|
|
]
|
|
}
|
|
}
|