@putdotio/design 1.0.0 → 1.2.0

package/DESIGN.md

@@ -3,23 +3,23 @@ version: "0.1.0"
 name: "put.io Design System"
 description: "Public token and guidance contract for put.io product surfaces."
 colors:
-  brand: "#FDCE45"
+  brand: "hsl(44.7, 97.9%, 63.1%)"
   dark:
     app-bg: "hsl(0, 0%, 8.5%)"
-    page-bg: "black"
+    page-bg: "hsl(0, 0%, 0%)"
     text: "hsl(0, 0%, 93.0%)"
     text-muted: "hsl(0, 0%, 62.8%)"
     border: "hsl(0, 0%, 24.3%)"
-    success: "hsl(151, 55.0%, 41.5%)"
-    danger: "hsl(358, 75.0%, 59.0%)"
+    success: "hsl(151, 55%, 41.5%)"
+    danger: "hsl(358, 75%, 59%)"
   light:
-    app-bg: "white"
+    app-bg: "hsl(0, 0%, 100%)"
     page-bg: "hsl(0, 0%, 97.3%)"
     text: "hsl(0, 0%, 9.0%)"
     text-muted: "hsl(0, 0%, 43.5%)"
     border: "hsl(0, 0%, 85.8%)"
-    success: "hsl(151, 55.0%, 41.5%)"
-    danger: "hsl(358, 75.0%, 59.0%)"
+    success: "hsl(151, 55%, 41.5%)"
+    danger: "hsl(358, 75%, 59%)"
 typography:
   ui:
     family: "\"GT America\", sans-serif"
@@ -64,11 +64,11 @@ components:
 
 put.io is a content-agnostic cloud file product. The interface should feel premium because the file browser is useful, fast, quiet, and honest about the data it has. Design for raw filenames, folders, transfers, storage, playback controls, and settings without pretending that structured media metadata is always available.
 
-The canonical source for tokens is DTCG-compatible JSON in `tokens/`. Generated artifacts in `dist/` and `system/tokens.css` are outputs. This file is the human and agent-readable contract that explains how to use those tokens.
+The canonical source for tokens is DTCG-compatible JSON in `tokens/`. Generated artifacts in `dist/` and `system/tokens.css` are outputs. This file explains how to use those tokens.
 
 ## Colors
 
-Yellow `#FDCE45` is sacred. Use it for the put.io brand mark, primary action fill, folder/file emphasis, progress, and focus affordances. Do not tint it into a new brand color, gradient it into a different accent, or use it as foreground text on light surfaces.
+Yellow `#FDCE45` is the resting `--yellow-solid` brand value in both light and dark modes. Use it for the put.io brand mark, primary action fill, folder/file emphasis, progress, and focus affordances. Use `--yellow-solid-hover` for primary button hover feedback; do not invent alternate yellows, gradient yellow into a different accent, or use yellow as foreground text on light surfaces.
 
 Dark app surfaces are the default product mode, but the token contract includes both dark and light palettes. Light surfaces are allowed for landing, docs, and narrow product states where readability is stronger. Semantic red, green, and neutral scales should come from tokens rather than one-off CSS values.
 
@@ -94,7 +94,9 @@ The default radius is `6px`. Use `4px` for tight controls, `8px` or `10px` for l
 
 ## Components
 
-Buttons use yellow only for primary commands. Secondary buttons should feel quiet and tokenized against the active surface. File rows are the core component: preserve raw names, keep metadata compact, and make hover/focus states obvious without inflating row height.
+Buttons use yellow only for primary commands. Primary buttons use `--button-primary-bg` at rest and `--button-primary-bg-hover` on hover so the CTA never feels inert. Secondary buttons should feel quiet and tokenized against the active surface. File rows are the core component: preserve raw names, keep metadata compact, and make hover/focus states obvious without inflating row height.
+
+Form fields use the shared `--field-*` aliases: `--field-bg` for the fill, `--field-border` for the resting border, and `--field-ring` for focus. Invalid fields opt in with `aria-invalid="true"` and use red border/text only; do not add red fill. Raised panels use the shared `--panel-*` aliases instead of auth- or screen-specific panel variables.
 
 TV components are list-first and focus-first. A TV app is still a file browser, not a poster wall. Roku, native Apple, Android, and web TV repos should consume the generic tokens and generate their own platform bindings.
 
@@ -106,6 +108,6 @@ Do use Phosphor-style inline SVG for forward-looking icon guidance and no emoji
 
 Do keep `DESIGN.md`, `tokens/`, `dist/`, and `system/tokens.css` in agreement.
 
-Don't publish private research, local file paths, Claude project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
+Don't publish private research, local file paths, internal project links, screenshots, team photos, account data, discount strategy, or auth-gated workspace URLs in the public design repo.
 
 Don't generate Swift, Kotlin, Android XML, or Roku outputs from this repo until a consuming platform repo asks for an adapter.

package/README.md

@@ -5,7 +5,7 @@
 
   <h1>put.io design</h1>
 
-  <p>Public design tokens and design-system guidance for <a href="https://put.io">put.io</a>.</p>
+  <p>Public design tokens, brand assets, and design-system guidance for <a href="https://put.io">put.io</a>.</p>
 
   <p>
     <a href="https://www.npmjs.com/package/@putdotio/design" style="text-decoration:none;"><img src="https://img.shields.io/npm/v/%40putdotio%2Fdesign?style=flat&label=npm&logo=npm&colorA=000000&colorB=000000" alt="npm version"></a>
@@ -18,23 +18,39 @@
 
 Live guide: [design.put.io](https://design.put.io)
 
-This repo owns the public contract behind it: DTCG token sources, generated CSS/JSON/TypeScript artifacts, preview cards, and deployable static guidance.
+This repo owns the public contract behind it: DTCG token sources, generated
+CSS/JSON/TypeScript artifacts, brand assets, preview cards, and deployable
+static guidance.
 
-## Use
+## Install
 
-Token sources live in [`tokens`](tokens). Generated package artifacts live in [`dist`](dist).
+Token sources live in [`tokens`](tokens). Generated package artifacts live in
+[`dist`](dist). Package-safe brand assets live in [`system/assets`](system/assets).
 
 ```bash
 npm install @putdotio/design
 ```
 
-Common entrypoints:
+## Use
+
+Import the generated CSS when a web surface needs put.io custom properties:
+
+```css
+@import "@putdotio/design/css";
+```
+
+Component recipes should consume semantic aliases such as `--field-*`,
+`--panel-*`, `--primary`, `--success`, and `--destructive` instead of reaching
+into palette tokens directly.
+
+Package entrypoints:
 
 - CSS custom properties: [`dist/css/tokens.css`](dist/css/tokens.css)
 - DTCG token tree: [`dist/tokens.dtcg.json`](dist/tokens.dtcg.json)
 - Flat token metadata: [`dist/tokens.flat.json`](dist/tokens.flat.json)
 - Figma-safe subset: [`dist/figma/putio.tokens.json`](dist/figma/putio.tokens.json)
-- Human and AI design contract: [`DESIGN.md`](DESIGN.md)
+- Brand assets: [`system/assets`](system/assets) via `@putdotio/design/assets/<file>`
+- Design contract: [`DESIGN.md`](DESIGN.md)
 
 ## Commands
 
@@ -56,6 +72,11 @@ Use `pnpm tokens:build` after token edits.
 - [Security](SECURITY.md)
 - [Agent guide](AGENTS.md)
 
+## Contributing
+
+See [Contributing](CONTRIBUTING.md) for local setup, validation, and pull
+request expectations.
+
 ## License
 
 [MIT](LICENSE)

package/dist/css/tokens.css

@@ -2,20 +2,53 @@
    put.io design tokens
    Do not edit directly. Generated from DTCG token JSON in tokens/.
 
-   Brand constant: Yellow #FDCE45 (sacred - never changes)
+   Brand constant: Yellow #FDCE45 in both light and dark modes.
    Canonical source: DTCG-compatible JSON in tokens/
    ============================================================ */
 
 /* -- Light (default) ------------------------------------------------ */
 :root {
+  --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 95.1%);
   --button-secondary-fg: hsl(0, 0%, 9.0%);
-  --input-bg: white;
+  --button-success-bg: hsl(151, 55%, 41.5%);
+  --button-success-bg-hover: hsl(151, 58%, 37%);
+  --button-danger-bg: hsl(358, 75%, 59%);
+  --button-danger-bg-hover: hsl(357, 66%, 53%);
+  --button-info-bg-hover: hsl(0, 0%, 52.3%);
+  --input-bg: hsl(0, 0%, 100%);
   --input-border: hsl(0, 0%, 85.8%);
-  --file-row-bg: transparent;
+  --field-bg: hsl(0, 0%, 100%);
+  --field-bg-disabled: hsl(0, 0%, 97.3%);
+  --field-border: hsl(0, 0%, 85.8%);
+  --field-border-hover: hsl(0, 0%, 78.0%);
+  --field-border-focus: hsl(0, 0%, 78.0%);
+  --field-text: hsl(0, 0%, 9.0%);
+  --field-placeholder: hsl(0, 0%, 43.5%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
+  --panel-bg: hsl(0, 0%, 95.1%);
+  --panel-border: hsl(0, 0%, 88.7%);
+  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
+  --background: hsl(0, 0%, 99.0%);
+  --foreground: hsl(0, 0%, 9.0%);
+  --foreground-muted: hsl(0, 0%, 43.5%);
+  --success: hsl(151, 55%, 41.5%);
+  --destructive: hsl(358, 75%, 59%);
+  --invert-foreground: hsl(0, 0%, 100%);
+  --solid-foreground: hsl(0, 0%, 0%);
+  --muted: hsl(0, 0%, 97.3%);
+  --muted-foreground: hsl(0, 0%, 43.5%);
+  --accent: hsl(0, 0%, 95.1%);
+  --accent-foreground: hsl(0, 0%, 9.0%);
+  --card: hsl(0, 0%, 95.1%);
+  --card-foreground: hsl(0, 0%, 9.0%);
+  --popover: hsl(0, 0%, 95.1%);
+  --popover-foreground: hsl(0, 0%, 9.0%);
+  --input: hsl(0, 0%, 85.8%);
+  --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 97.3%);
   --notification-info-bg: hsl(0, 0%, 97.3%);
-  --notification-danger-bg: hsl(360, 100%, 96.8%);
+  --notification-danger-bg: hsl(2, 100%, 96%);
   --bg: hsl(0, 0%, 99.0%);
   --bg-secondary: hsl(0, 0%, 97.3%);
   --component-bg: hsl(0, 0%, 95.1%);
@@ -28,76 +61,84 @@
   --solid-hover: hsl(0, 0%, 52.3%);
   --text-secondary: hsl(0, 0%, 43.5%);
   --text: hsl(0, 0%, 9.0%);
-  --green-bg: hsl(136, 50.0%, 98.9%);
-  --green-bg-secondary: hsl(138, 62.5%, 96.9%);
-  --green-component-bg: hsl(139, 55.2%, 94.5%);
-  --green-component-bg-hover: hsl(140, 48.7%, 91.0%);
-  --green-component-bg-active: hsl(141, 43.7%, 86.0%);
-  --green-line: hsl(143, 40.3%, 79.0%);
-  --green-border: hsl(146, 38.5%, 69.0%);
-  --green-border-hover: hsl(151, 40.2%, 54.1%);
-  --green-solid: hsl(151, 55.0%, 41.5%);
-  --green-solid-hover: hsl(152, 57.5%, 37.6%);
-  --green-text-secondary: hsl(153, 67.0%, 28.5%);
-  --green-text: hsl(155, 40.0%, 14.0%);
-  --red-bg: hsl(359, 100%, 99.4%);
-  --red-bg-secondary: hsl(359, 100%, 98.6%);
-  --red-component-bg: hsl(360, 100%, 96.8%);
-  --red-component-bg-hover: hsl(360, 97.9%, 94.8%);
-  --red-component-bg-active: hsl(360, 90.2%, 91.9%);
-  --red-line: hsl(360, 81.7%, 87.8%);
-  --red-border: hsl(359, 74.2%, 81.7%);
-  --red-border-hover: hsl(359, 69.5%, 74.3%);
-  --red-solid: hsl(358, 75.0%, 59.0%);
-  --red-solid-hover: hsl(358, 69.4%, 55.2%);
-  --red-text-secondary: hsl(358, 65.0%, 48.7%);
-  --red-text: hsl(354, 50.0%, 14.6%);
-  --yellow-bg: hsl(60, 54.0%, 98.5%);
-  --yellow-bg-secondary: hsl(52, 100%, 95.5%);
-  --yellow-component-bg: hsl(55, 100%, 90.9%);
-  --yellow-component-bg-hover: hsl(54, 100%, 86.6%);
-  --yellow-component-bg-active: hsl(52, 97.9%, 82.0%);
-  --yellow-line: hsl(50, 89.4%, 76.1%);
-  --yellow-border: hsl(47, 80.4%, 68.0%);
-  --yellow-border-hover: hsl(48, 100%, 46.1%);
-  --yellow-solid-hover: #FDCE45;
-  --yellow-text-secondary: hsl(42, 100%, 29.0%);
-  --yellow-text: hsl(40, 55.0%, 13.5%);
+  --green-bg: hsl(140, 60%, 99%);
+  --green-bg-secondary: hsl(140, 41%, 97%);
+  --green-component-bg: hsl(135, 53%, 93%);
+  --green-component-bg-hover: hsl(138, 58%, 89%);
+  --green-component-bg-active: hsl(140, 50%, 84%);
+  --green-line: hsl(141, 47%, 77%);
+  --green-border: hsl(140, 39%, 68%);
+  --green-border-hover: hsl(146, 39%, 55%);
+  --green-solid: hsl(151, 55%, 41.5%);
+  --green-solid-hover: hsl(151, 58%, 37%);
+  --green-text-secondary: hsl(155, 100%, 25%);
+  --green-text: hsl(146, 35%, 17%);
+  --red-bg: hsl(0, 100%, 99%);
+  --red-bg-secondary: hsl(0, 100%, 98%);
+  --red-component-bg: hsl(2, 100%, 96%);
+  --red-component-bg-hover: hsl(4, 100%, 93%);
+  --red-component-bg-active: hsl(3, 100%, 89%);
+  --red-line: hsl(3, 97%, 86%);
+  --red-border: hsl(2, 81%, 80%);
+  --red-border-hover: hsl(2, 71%, 73%);
+  --red-solid: hsl(358, 75%, 59%);
+  --red-solid-hover: hsl(357, 66%, 53%);
+  --red-text-secondary: hsl(355, 64%, 49%);
+  --red-text: hsl(358, 62%, 24%);
+  --yellow-bg: hsl(45, 60%, 99%);
+  --yellow-bg-secondary: hsl(53, 100%, 96%);
+  --yellow-component-bg: hsl(52, 100%, 88%);
+  --yellow-component-bg-hover: hsl(50, 100%, 82%);
+  --yellow-component-bg-active: hsl(48, 100%, 76%);
+  --yellow-line: hsl(46, 87%, 73%);
+  --yellow-border: hsl(45, 67%, 67%);
+  --yellow-border-hover: hsl(44, 58%, 56%);
+  --yellow-solid-hover: hsl(45, 89%, 58%);
+  --yellow-text-secondary: hsl(46, 100%, 29%);
+  --yellow-text: hsl(43, 32%, 21%);
   --lime-3: hsl(85, 76.0%, 92.3%);
   --html-bg: hsl(0, 0%, 97.3%);
-  --app-bg: white;
-  --nav-bg: white;
-  --nav-item-bg: transparent;
+  --app-bg: hsl(0, 0%, 100%);
+  --nav-bg: hsl(0, 0%, 100%);
+  --nav-item-bg: hsla(0, 0%, 0%, 0);
   --nav-item-bg-hover: hsl(0, 0%, 95.1%);
   --nav-item-bg-active: hsl(0, 0%, 95.1%);
-  --list-item-bg: transparent;
+  --list-item-bg: hsla(0, 0%, 0%, 0);
   --list-item-bg-hover: hsl(0, 0%, 97.3%);
   --list-item-bg-active: hsl(0, 0%, 97.3%);
   --list-item-border: hsl(0, 0%, 90.9%);
   --segmented-control-bg: hsl(0, 0%, 95.1%);
-  --segmented-control-bg-active: white;
+  --segmented-control-bg-active: hsl(0, 0%, 100%);
   --transfer-list-item-completing-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-downloading-bg: hsl(85, 76.0%, 92.3%);
   --transfer-list-item-finished-bg: hsl(0, 0%, 97.3%);
   --transfer-list-item-passive-bg: hsl(0, 0%, 99.0%);
   --hi-contrast: hsl(0, 0%, 9.0%);
   --lo-contrast: hsl(0, 0%, 99.0%);
-  --transparent: transparent;
+  --transparent: hsla(0, 0%, 0%, 0);
   --overlay-inline: hsla(0, 0%, 0%, 0.047);
   --overlay-full: hsla(0, 0%, 0%, 0.439);
-  --button-primary-bg: #FDCE45;
-  --button-primary-fg: #0A0A0A;
+  --button-primary-bg: hsl(44.7, 97.9%, 63.1%);
+  --button-primary-fg: hsl(38, 65%, 10%);
   --button-radius: 6px;
+  --button-success-fg: hsl(0, 0%, 100%);
+  --button-danger-fg: hsl(0, 0%, 100%);
   --input-radius: 6px;
-  --file-row-icon: #FDCE45;
-  --yellow-solid: #FDCE45;
+  --panel-radius: 10px;
+  --primary: hsl(44.7, 97.9%, 63.1%);
+  --primary-foreground: hsl(38, 65%, 10%);
+  --success-foreground: hsl(0, 0%, 100%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --ring: hsla(47, 100%, 65%, 0.35);
+  --file-row-icon: hsl(44.7, 97.9%, 63.1%);
+  --yellow-solid: hsl(44.7, 97.9%, 63.1%);
   --shadow-color: hsl(0, 0%, 78.0%);
   --shadow: hsl(0, 0%, 78.0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.12);
   --shadow-focus-color: hsla(47, 100%, 65%, 0.35);
-  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --shadow-focus: 0 0 0 3px hsla(47, 100%, 65%, 0.35);
   --font-sans: "GT America", sans-serif;
   --font-display: "GT America", sans-serif;
   --font-ui-mono: "GT America Mono", monospace;
@@ -148,14 +189,47 @@
 
 /* -- Dark (.dark) --------------------------------------------------- */
 .dark {
+  --button-primary-bg-hover: hsl(45, 89%, 58%);
   --button-secondary-bg: hsl(0, 0%, 13.6%);
   --button-secondary-fg: hsl(0, 0%, 93.0%);
-  --input-bg: hsl(0, 0%, 13.6%);
+  --button-success-bg: hsl(151, 55%, 41.5%);
+  --button-success-bg-hover: hsl(151, 68%, 35%);
+  --button-danger-bg: hsl(358, 75%, 59%);
+  --button-danger-bg-hover: hsl(357, 67%, 53%);
+  --button-info-bg-hover: hsl(0, 0%, 49.4%);
+  --input-bg: hsl(0, 0%, 8.5%);
   --input-border: hsl(0, 0%, 24.3%);
-  --file-row-bg: transparent;
+  --field-bg: hsl(0, 0%, 8.5%);
+  --field-bg-disabled: hsl(0, 0%, 11.0%);
+  --field-border: hsl(0, 0%, 24.3%);
+  --field-border-hover: hsl(0, 0%, 31.2%);
+  --field-border-focus: hsl(0, 0%, 31.2%);
+  --field-text: hsl(0, 0%, 93.0%);
+  --field-placeholder: hsl(0, 0%, 62.8%);
+  --field-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
+  --panel-bg: hsl(0, 0%, 13.6%);
+  --panel-border: hsl(0, 0%, 20.5%);
+  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
+  --background: hsl(0, 0%, 8.5%);
+  --foreground: hsl(0, 0%, 93.0%);
+  --foreground-muted: hsl(0, 0%, 62.8%);
+  --success: hsl(151, 55%, 41.5%);
+  --destructive: hsl(358, 75%, 59%);
+  --invert-foreground: hsl(0, 0%, 8.5%);
+  --solid-foreground: hsl(0, 0%, 100%);
+  --muted: hsl(0, 0%, 11.0%);
+  --muted-foreground: hsl(0, 0%, 62.8%);
+  --accent: hsl(0, 0%, 13.6%);
+  --accent-foreground: hsl(0, 0%, 93.0%);
+  --card: hsl(0, 0%, 13.6%);
+  --card-foreground: hsl(0, 0%, 93.0%);
+  --popover: hsl(0, 0%, 13.6%);
+  --popover-foreground: hsl(0, 0%, 93.0%);
+  --input: hsl(0, 0%, 24.3%);
+  --file-row-bg: hsla(0, 0%, 0%, 0);
   --file-row-bg-hover: hsl(0, 0%, 11.0%);
   --notification-info-bg: hsl(0, 0%, 13.6%);
-  --notification-danger-bg: hsl(356, 43.4%, 16.4%);
+  --notification-danger-bg: hsl(0, 55%, 15%);
   --bg: hsl(0, 0%, 8.5%);
   --bg-secondary: hsl(0, 0%, 11.0%);
   --component-bg: hsl(0, 0%, 13.6%);
@@ -168,49 +242,49 @@
   --solid-hover: hsl(0, 0%, 49.4%);
   --text-secondary: hsl(0, 0%, 62.8%);
   --text: hsl(0, 0%, 93.0%);
-  --green-bg: hsl(146, 30.0%, 7.4%);
-  --green-bg-secondary: hsl(155, 44.2%, 8.4%);
-  --green-component-bg: hsl(155, 46.7%, 10.9%);
-  --green-component-bg-hover: hsl(154, 48.4%, 12.9%);
-  --green-component-bg-active: hsl(154, 49.7%, 14.9%);
-  --green-line: hsl(154, 50.9%, 17.6%);
-  --green-border: hsl(153, 51.8%, 21.8%);
-  --green-border-hover: hsl(151, 51.7%, 28.4%);
-  --green-solid: hsl(151, 55.0%, 41.5%);
-  --green-solid-hover: hsl(151, 49.3%, 46.5%);
-  --green-text-secondary: hsl(151, 50.0%, 53.2%);
-  --green-text: hsl(137, 72.0%, 94.0%);
-  --red-bg: hsl(353, 23.0%, 9.8%);
-  --red-bg-secondary: hsl(357, 34.4%, 12.0%);
-  --red-component-bg: hsl(356, 43.4%, 16.4%);
-  --red-component-bg-hover: hsl(356, 47.6%, 19.2%);
-  --red-component-bg-active: hsl(356, 51.1%, 21.9%);
-  --red-line: hsl(356, 55.2%, 25.9%);
-  --red-border: hsl(357, 60.2%, 31.8%);
-  --red-border-hover: hsl(358, 65.0%, 40.4%);
-  --red-solid: hsl(358, 75.0%, 59.0%);
-  --red-solid-hover: hsl(358, 85.3%, 64.0%);
-  --red-text-secondary: hsl(358, 100%, 69.5%);
-  --red-text: hsl(351, 89.0%, 96.0%);
-  --yellow-bg: hsl(45, 100%, 5.5%);
-  --yellow-bg-secondary: hsl(46, 100%, 6.7%);
-  --yellow-component-bg: hsl(45, 100%, 8.7%);
-  --yellow-component-bg-hover: hsl(45, 100%, 10.4%);
-  --yellow-component-bg-active: hsl(47, 100%, 12.1%);
-  --yellow-line: hsl(49, 100%, 14.3%);
-  --yellow-border: hsl(49, 90.3%, 18.4%);
-  --yellow-border-hover: hsl(50, 100%, 22.0%);
-  --yellow-solid-hover: #FDCE45;
-  --yellow-text-secondary: hsl(48, 100%, 47.0%);
-  --yellow-text: hsl(53, 100%, 91.0%);
+  --green-bg: hsl(140, 13%, 6%);
+  --green-bg-secondary: hsl(149, 21%, 9%);
+  --green-component-bg: hsl(151, 35%, 13%);
+  --green-component-bg-hover: hsl(149, 49%, 16%);
+  --green-component-bg-active: hsl(149, 46%, 19%);
+  --green-line: hsl(146, 42%, 24%);
+  --green-border: hsl(146, 41%, 29%);
+  --green-border-hover: hsl(148, 43%, 34%);
+  --green-solid: hsl(151, 55%, 41.5%);
+  --green-solid-hover: hsl(151, 68%, 35%);
+  --green-text-secondary: hsl(146, 56%, 60%);
+  --green-text: hsl(142, 71%, 82%);
+  --red-bg: hsl(8, 13%, 7%);
+  --red-bg-secondary: hsl(4, 28%, 10%);
+  --red-component-bg: hsl(0, 55%, 15%);
+  --red-component-bg-hover: hsl(357, 70%, 19%);
+  --red-component-bg-active: hsl(358, 62%, 24%);
+  --red-line: hsl(359, 52%, 30%);
+  --red-border: hsl(0, 46%, 38%);
+  --red-border-hover: hsl(359, 45%, 49%);
+  --red-solid: hsl(358, 75%, 59%);
+  --red-solid-hover: hsl(357, 67%, 53%);
+  --red-text-secondary: hsl(2, 100%, 77%);
+  --red-text: hsl(5, 100%, 91%);
+  --yellow-bg: hsl(0, 0%, 0%);
+  --yellow-bg-secondary: hsl(38, 35%, 6%);
+  --yellow-component-bg: hsl(45, 70%, 9%);
+  --yellow-component-bg-hover: hsl(44, 100%, 11%);
+  --yellow-component-bg-active: hsl(44, 100%, 14%);
+  --yellow-line: hsl(45, 71%, 19%);
+  --yellow-border: hsl(45, 53%, 26%);
+  --yellow-border-hover: hsl(45, 49%, 34%);
+  --yellow-solid-hover: hsl(45, 89%, 58%);
+  --yellow-text-secondary: hsl(45, 100%, 64%);
+  --yellow-text: hsl(46, 89%, 86%);
   --lime-3: hsl(85, 45%, 12%);
-  --html-bg: black;
+  --html-bg: hsl(0, 0%, 0%);
   --app-bg: hsl(0, 0%, 8.5%);
   --nav-bg: hsl(0, 0%, 8.5%);
-  --nav-item-bg: transparent;
+  --nav-item-bg: hsla(0, 0%, 0%, 0);
   --nav-item-bg-hover: hsl(0, 0%, 13.6%);
   --nav-item-bg-active: hsl(0, 0%, 13.6%);
-  --list-item-bg: transparent;
+  --list-item-bg: hsla(0, 0%, 0%, 0);
   --list-item-bg-hover: hsl(0, 0%, 11.0%);
   --list-item-bg-active: hsl(0, 0%, 11.0%);
   --list-item-border: hsl(0, 0%, 17.9%);
@@ -224,8 +298,8 @@
   --lo-contrast: hsl(0, 0%, 8.5%);
   --overlay-inline: hsla(0, 0%, 0%, 0.439);
   --overlay-full: hsla(0, 0%, 0%, 0.565);
-  --shadow-color: black;
-  --shadow: black;
+  --shadow-color: hsl(0, 0%, 0%);
+  --shadow: hsl(0, 0%, 0%);
   --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.4);
   --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.5);
   --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.6);
@@ -363,4 +437,4 @@ a:hover { text-decoration-color: currentColor; }
 .bg-1           { background: var(--bg); }
 .bg-2           { background: var(--bg-secondary); }
 .bg-component   { background: var(--component-bg); }
-.bg-yellow      { background: var(--yellow-solid); color: #000; }
+.bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }