What is ui-theme-designer-design-tokens?

A reference for SAP Design System design tokens, which are named values controlling interface details such as colors and spacing. It covers themes and how token values are used by SAP UI technologies.

Use it when working with SAP Fiori themes, UI5 controls, UI5 Web Components, or their LESS and CSS theme files.

It helps answer which themes and token values apply, how themes inherit from one another, and which tokens a component uses.

ui-theme-designer-design-tokens — Skill for Claude Code by SAP

About the project

UI Theme Designer Plugins for Coding Agents is a collection of add-ons that give AI coding agents guidance about SAP UI Theme Designer, a tool for configuring user-interface themes, along with the SAP Design System and SAP Fiori design tokens. They help people using agents such as Claude Code understand theming concepts and identify parameters used by UI components. The catalogue entries are the project's own plugins for this workflow.

SAP/ui-theme-designer-plugins-for-coding-agents · 2 stars · on GitHub

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add SAP/ui-theme-designer-plugins-for-coding-agents --skill ui-theme-designer-design-tokens

Clone the repo

git clone --depth 1 https://github.com/SAP/ui-theme-designer-plugins-for-coding-agents

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens/github.svg)](https://agentmods.dev/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens)

Your own site

<a href="https://agentmods.dev/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens"><img src="https://agentmods.dev/badge/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens"><img src="https://agentmods.dev/badge/skills/sap/ui-theme-designer-plugins-for-coding-agents/ui-theme-designer-design-tokens.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 112 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,801 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00112	$0.01801
Opus 5	$0.00056	$0.00901
Sonnet 5	$0.00022	$0.00360
Haiku 4.5	$0.00011	$0.00180

Measured 10d ago against content hash 2260413d170f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

ui-theme-designer-design-tokens scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/ui-theme-designer/skills/ui-theme-designer-design-tokens/SKILL.md · 74 lines

How it starts

The opening of the file, as written. The whole thing — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Design Tokens

With $THIS being the folder that contains this SKILL.md:

Prerequisite

$THIS/node_modules/ exists and is not older than 7 days; if not: cd $THIS && npm ci

Context

Design Tokens are defined in LESS files of the theming-base-content, and consumed in LESS and CSS files of different frameworks (= UI technologies). In $THIS/node_modules/ you find the following:

UI5: (with $LIBRARY being e.g. sap.ui.core, and $THEME being e.g. sap_horizon)
- $THIS/node_modules/@openui5/$LIBRARY/src/${LIBRARY/./\//}/**/themes/base contains the baseTheme of the different libraries
- $THIS/node_modules/@openui5/themelib_$THEME/src/${LIBRARY/./\//}/themes/ contains the $THEME of the different libraries
UI5 Web Components: (with $THEME being e.g. sap_horizon, and $COMPONENT being e.g. Button)
- $THIS/node_modules/@ui5/*/src/themes/$COMPONENT.css contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in base/ (see below)
- $THIS/node_modules/@ui5/*/src/themes/base/$COMPONENT-parameters.css contains CSS custom property definitions for components; never report those UI5 Web Components-specific internal CSS custom properties.
- $THIS/node_modules/@ui5/*/src/themes/$THEME/$COMPONENT-parameters.css contains theme-dependent values for the custom property definitions from base/ (see above)
Fundamental Styles:
- $THIS/node_modules/fundamental-styles/dist/*.css contains theme-independent component skeleton CSS, using parameters from theming-base-content as CSS custom properties, as well as CSS custom properties defined in theming/ (see below)
- $THIS/node_modules/fundamental-styles/dist/theming/$THEME.css contains theme-dependent values for the custom property definitions used in dist/*.css (see above); never report those Fundamental Styles-specific internal CSS custom properties
- $THIS/node_modules/@fundamental-styles/common-css/dist/*.css theme-independent helper CSS, using parameters from theming-base-content as CSS custom properties
Base: (with $LIBRARY being e.g. baseLib, and $THEME being e.g. sap_horizon)
- $THIS/node_modules/@sap-theming/theming-base-content/content is a theme repository as described in https://raw.githubusercontent.com/SAP-docs/btp-ui-theme-designer/main/docs/cf/About-Themes/overview-of-sap-theming-content-91ebfe2.md, containing Base/; used by all frameworks
- $THIS/node_modules/@sap-theming/theming-base-content/content/Base/.theming contains metadata about the Base framework
- $THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/.theming contains metadata about libraries
- $THIS/node_modules/@sap-theming/theming-base-content/content/Base/$LIBRARY/$THEME/.theming contains metadata about themes
- Metadata includes
  - sEntity: "Framework", "Library" or "Theme"
  - sType (for themes): "STANDARD" (= single theme) or "SET" (= no CSS, just references to different themes of sType=STANDARD)
  - aFiles: LESS source files
  - aBuildFiles: CSS files built from aFiles
  - *sBase{Library,Theme,File}Id: ID of the most important library/theme/file
  - oExtends: the $FRAMEWORK[.$LIBRARY[.$THEME[.$FILE]]] "object path" of the parent entity
  - sSourcePathPattern: pattern to resolve object paths to file paths
  - (optional) bIgnore=true: entity is ignored from theming

Read the full file on GitHub · 74 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

10d ago First seen · 74 lines · 112 tokens per session scan A 2260413d170f

Subscribe to this mod's changes

ui-theme-designer-design-tokens is a skill published in the GitHub repository SAP/ui-theme-designer-plugins-for-coding-agents (2 stars, last pushed 20d ago), licensed Apache-2.0. It adds 112 tokens to every session and 1,801 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Claude Code Design and UX design-tokens fiori sap ui-theme-designer

designlang-tokens

Use when styling UI for cal.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

Manavarya09/design-extract · 30 tokens

ss-studio

Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…

bitjaru/styleseed · 75 tokens

ui-theme-designer-design-tokens