Only complete files and comments are allowed! I forbid any s...

Prompt

Only complete files and comments are allowed! I forbid any simplified, mock, placeholder, dummy, simulated, incomplete, or unoptimized production-ready code. It must not be truncated, and there must be no instances of … or similar. 50 xy must not be a dummy, “to do,” or “sorry” placeholder. You must provide the complete code for every file; do not write anything else besides that. Construct a complete, production-ready front-end CSS design system, UI component library, and visual benchmark harness from scratch. The system must be fully implemented in native, unabridged HTML5 and CSS3 (with optional modern vanilla JavaScript for dynamic contrast calculations), structuring all design tokens, layout grids, glassmorphic capsule buttons, solid accent badges, dark-mode container cards, and typographic labels exactly as specified below. Deliver the entire codebase across dedicated files (index.html, tokens.css, components.css, and layout.css) with zero placeholders, mocks, simplifications, or missing declarations. # 1. Design Token Architecture & CSS Custom Properties (tokens.css) Define the complete CSS root custom properties covering the full palette, dimensions, border radii, typography, and shadow specifications: Grayscale Benchmark Ramp Tokens: --color-gray-60: #999999 (RGB: 153, 153, 153, ~60% luminance) --color-gray-50: #808080 (RGB: 128, 128, 128, ~50% luminance) --color-gray-40: #666666 (RGB: 102, 102, 102, ~40% luminance) --color-gray-30: #4d4d4d (RGB: 77, 77, 77, ~30% luminance) --color-gray-20: #333333 (RGB: 51, 51, 51, ~20% luminance) --color-gray-10: #1a1a1a (RGB: 26, 26, 26, ~10% luminance) --color-black: #000000 (RGB: 0, 0, 0, pitch black panel) Vibrant Accent Palette Tokens: --accent-green: #2bcc53 (RGB: 43, 204, 83) --accent-yellow: #fad100 (RGB: 250, 209, 0) --accent-orange: #f88c2a (RGB: 248, 140, 42) --accent-red: #f73a3d (RGB: 247, 58, 61) --accent-magenta: #d22be9 (RGB: 210, 43, 233) --accent-blue: #0087f5 (RGB: 0, 135, 245) Dark Mode Surface Gradient Tokens: --surface-medium-top: #2c2c2e (RGB: 44, 44, 46) --surface-medium-bottom: #1c1c1e (RGB: 28, 28, 30) --surface-large-top: #242426 (RGB: 36, 36, 38) --surface-large-bottom: #1a1a1c (RGB: 26, 26, 28) Geometry & Corner Radii Tokens: --radius-pill: 19px --radius-card: 16px --width-stripe: 75px --width-ramp-total: 450px --width-panel-black: 300px --canvas-width: 750px --canvas-height: 771px Typography Tokens: --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Roboto", "Segoe UI", sans-serif --font-color-white: #ffffff --font-size-heading: 10px --font-size-subtext: 9.5px --font-weight-semibold: 600 --font-weight-regular: 400 Shadow & Elevation Tokens: --shadow-card-medium: -2px 6px 18px 0px rgba(0, 0, 0, 0.45) --shadow-card-large: -2px 8px 22px 0px rgba(0, 0, 0, 0.45) # 2. Layout Grid & Canvas Container (layout.css) Construct the base stage and split layout: Canvas Root Container: Fixed dimensions of 750px width by 771px height, position: relative, overflow: hidden, with an aspect ratio of 0.972763. Left Column Grid (Grayscale Benchmark Ramp): Container spanning x = 0\text{ px} to x = 450\text{ px} (width: 450px, height: 100%) using a 6-column CSS Grid (grid-template-columns: repeat(6, 75px)). Six vertical column elements assigned respectively to --color-gray-60, --color-gray-50, --color-gray-40, --color-gray-30, --color-gray-20, and --color-gray-10. Right Annotation Panel: Container spanning x = 450\text{ px} to x = 750\text{ px} (width: 300px, height: 100%) with background color --color-black (#000000). # 3. Frosted Glass Dynamic Translucent Capsule Buttons (components.css) Implement the dynamic translucent capsule button component class (.pill-frosted): Base Styling: width: 63px, height: 39px, border-radius: var(--radius-pill) (19px). backdrop-filter: blur(20px) saturate(180%), -webkit-backdrop-filter: blur(20px) saturate(180%). background: rgba(255, 255, 255, 0.12), subtle 1px border stroke border: 1px solid rgba(255, 255, 255, 0.18). position: absolute, top: 29px (center y = 48.5\text{ px}). Straddle Seam Coordinate Positions: pill-frosted-1: left: 43px (centered at x = 74.5\text{ px} over the 75px seam). pill-frosted-2: left: 118px (centered at x = 149.5\text{ px} over the 150px seam). pill-frosted-3: left: 193px (centered at x = 224.5\text{ px} over the 225px seam). pill-frosted-4: left: 268px (centered at x = 299.5\text{ px} over the 300px seam). pill-frosted-5: left: 343px (centered at x = 374.5\text{ px} over the 375px seam). pill-frosted-6: left: 417px (centered at x = 448.5\text{ px} over the 450px seam). # 4. Solid Accent Color Capsule Badges (components.css) Implement the solid saturated capsule badge component class (.badge-accent): Base Styling: border-radius: var(--radius-pill) (19px), position: absolute, border: none, satin finish. Vertical alignment centered at y = 130\text{ px}. Color Variant Classes & Exact Bounding Boxes: .badge-green: left: 44px; top: 112px; width: 62px; height: 37px; background-color: var(--accent-green); (#2bcc53) .badge-yellow: left: 119px; top: 111px; width: 61px; height: 38px; background-color: var(--accent-yellow); (#fad100) .badge-orange: left: 194px; top: 111px; width: 61px; height: 38px; background-color: var(--accent-orange); (#f88c2a) .badge-red: left: 269px; top: 111px; width: 62px; height: 38px; background-color: var(--accent-red); (#f73a3d) .badge-magenta: left: 343px; top: 110px; width: 63px; height: 40px; background-color: var(--accent-magenta); (#d22be9) .badge-blue: left: 417px; top: 109px; width: 65px; height: 42px; background-color: var(--accent-blue); (#0087f5) # 5. Dark Mode Container Cards (components.css) Implement the dark mode container card components spanning horizontally from x = 44\text{ px} to x = 480\text{ px} (width: 436px): Shared Card Base Styling: width: 436px, left: 44px, position: absolute, border-radius: var(--radius-card) (16px), border: 1px solid rgba(255, 255, 255, 0.08), box-sizing: border-box. Medium UI Dark Mode Card (.card-medium): top: 195px, height: 150px (spans y = 195\text{ px} to y = 345\text{ px}). background: linear-gradient(180deg, var(--surface-medium-top) 0%, var(--surface-medium-bottom) 100%). box-shadow: var(--shadow-card-medium). Large UI Dark Mode Card (.card-large): top: 412px, height: 299px (spans y = 412\text{ px} to y = 711\text{ px}). background: linear-gradient(180deg, var(--surface-large-top) 0%, var(--surface-large-bottom) 100%). box-shadow: var(--shadow-card-large). # 6. Typographic Annotation System (components.css) Implement the right-side text label blocks rendered in crisp white against the black background: Typography Styling: font-family: var(--font-family-sans), color: var(--font-color-white), position: absolute, -webkit-font-smoothing: antialiased. .label-title: font-size: var(--font-size-heading) (10px), font-weight: var(--font-weight-semibold) (600), line-height: 1.0, margin: 0. .label-subtitle: font-size: var(--font-size-subtext) (9.5px), font-weight: var(--font-weight-regular) (400), line-height: 1.1, margin: 3px 0 0 0. Label Block Placement: Block 1 (Small UI): left: 509px; top: 38px; Title text: Small UI Subtitle text: Dynamic (Over light background) Block 2 (Medium UI): left: 510px; top: 194px; Title text: Medium UI Subtitle text: Dark Mode Block 3 (Large UI): left: 510px; top: 424px; Title text: Large UI Subtitle text: Dark Mode # 7. HTML Document Architecture (index.html) Provide the complete semantic HTML5 markup assembling the entire tree: Document <!DOCTYPE html> with <meta charset="UTF-8"> and viewport settings. Linked stylesheets tokens.css, layout.css, and components.css. The .canvas-container element wrapping the .benchmark-ramp (6 .stripe elements), the .black-panel, the 6 .pill-frosted elements, the 6 .badge-accent elements, the .card-medium and .card-large containers, and the 3 .annotation-block elements. Write the entire software solution in full, unabridged production code across all files without truncated lines or omitted rules.

A system prompt was added to support web rendering