- `.agent/skills/domain-craft/ui-design/ui-visual-design/SKILL-CANONICAL.md` - `.agent/skills/domain-craft/ui-design/ui-visual-design/references/craft-fundamentals.md` - `packages/design/oak-design-system/dtcg/component.json` (structural `btn` tokens — no colour) - `packages/design/oak-design-system/studio-source/components/OakButton/oakbutton.html` (compiled component demo, confirms `variant="primary"` usage) - `packages/design/oak-design-system/components.css` (grepped for `.oak-btn`/`btn-prim
Scanned 9/11/2026
Install to Claude Code
npx -y skills add oaknational/oak-open-curriculum-ecosystem --skill transcripts --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Transcripts?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/oaknational-transcripts-152d64ba)More formats (shields.io, HTML) on the badges page.
## Files read
- `.agent/skills/domain-craft/ui-design/ui-visual-design/SKILL-CANONICAL.md`
- `.agent/skills/domain-craft/ui-design/ui-visual-design/references/craft-fundamentals.md`
- `packages/design/oak-design-system/dtcg/component.json` (structural `btn` tokens — no colour)
- `packages/design/oak-design-system/studio-source/components/OakButton/oakbutton.html` (compiled component demo, confirms `variant="primary"` usage)
- `packages/design/oak-design-system/components.css` (grepped for `.oak-btn`/`btn-primary`; found `.oak-btn` background rule references `var(--bg-btn-primary)`)
- `packages/design/oak-design-system/colors_and_type.css` (grepped for `--bg-btn-primary` and the underlying primitives `--oak-black`, `--oak-white`, `--oak-black-true`; found the token is defined as `light-dark(var(--oak-black), var(--oak-white))` by default and overridden to `var(--oak-black-true)` under `[data-theme='high-contrast']`)
- `packages/design/oak-design-system/dtcg/semantic.light.json`, `semantic.dark.json`, `semantic.high-contrast.json`, `semantic.colour-safe.json` (grepped for `btn-primary` to confirm which theme files declare an override; colour-safe declares none)
## Reasoning
The skill is explicit that this entry decides layout/hierarchy/interaction judgment, not token values — "picking tokens... design-system-usage owns that" — and separately warns against inventing visual values and against encoding meaning in a single hue since the system requires holding across light, dark, high-contrast, and colour-safe themes. So a literal single hex answer would already violate the skill's own theming section even before checking the source. I read the design system source directly (read-only, as instructed) rather than guessing, and found the primary button background is implemented as the CSS custom property `--bg-btn-primary`, defined via `light-dark()` (resolving to `#222222` in light, `#ffffff` in dark) with a `#000000` override for high-contrast and no separate colour-safe override. Since the user asked for "just the value," I gave the concrete resolved hexes per theme rather than lecturing at length, but I could not honestly collapse it to one number without contradicting what the design system itself declares, so I named the token/class to use in code and offered to narrow to one theme's value if they truly need a single hardcoded number.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!