Redesign Classic layout for desktop and mobile
This commit is contained in:
Jonathan Sykes
3
.impeccable/config.json
Normal file
3
.impeccable/config.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"buildPath": "code"
|
||||
}
|
||||
328
.impeccable/design.json
Normal file
328
.impeccable/design.json
Normal file
@@ -0,0 +1,328 @@
|
||||
{
|
||||
"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."
|
||||
]
|
||||
}
|
||||
}
|
||||
26
.impeccable/surfaces/frontend-theme-classic-css.md
Normal file
26
.impeccable/surfaces/frontend-theme-classic-css.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
version: 1
|
||||
slug: "frontend-theme-classic-css"
|
||||
primary_target: "frontend/theme-classic.css"
|
||||
related_targets: ["frontend/index.html","frontend/app.js"]
|
||||
---
|
||||
|
||||
# Classic surface
|
||||
|
||||
Mode: Operate. Scope: Classic in the shared web frontend, mobile browser/PWA and desktop. Preserve features and all other layout themes. User approved code-first implementation of the full redesign plan.
|
||||
|
||||
## Direction contract
|
||||
|
||||
THESIS: A quiet media workspace gives watching and listening equal attention. Empty home is useful content, never content trapped in a video frame.
|
||||
|
||||
OWN-WORLD: Matte charcoal, warm white type, restrained vermilion, 12px corners, fine dividers. Bundled Hanken UI, Bricolage headings, JetBrains timing. No ambient glow or grain. Respect light and high-contrast preferences.
|
||||
|
||||
STORY: Search or choose a playlist, play, then browse without losing playback. Existing features and factual copy survive.
|
||||
|
||||
FIRST VIEWPORT: Desktop has a 232px library sidebar, flexible video/workspace and 340–420px browsing pane under search. Phones have search above content, centered transport under video, and existing navigation at the bottom. Empty home replaces the video proportions with a fully visible introduction or playlist collection.
|
||||
|
||||
FORM: User-pinned quiet studio workspace; concept seed 6fcc153a was run, but its assignment and catalog alternatives do not override the explicitly approved plan. Signature interaction: scrolling from playback into browsing reveals the existing mini-player above navigation; selecting it returns to playback without moving the document viewport.
|
||||
|
||||
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, DESIGN.md, and every shipping raster carrying its provenance
|
||||
|
||||
Constraints: no generated artwork needed; existing media thumbnails are user content. Existing untracked mockups remain untouched. No deployment.
|
||||
Reference in New Issue
Block a user