Stats
Actions
Tags
From uds-orchestrator
Multi-brand style guide for the IONOS Universal Design System. Use whenever the user asks about brand colors, typography, design language, visual identity, color palette, or brand elements for any of the 8 UDS brands — even if code isn't mentioned. Triggers on: "brand colors", "brand font", "brand style", "design guidelines", "color palette", "illustration style", "creative direction", "brand identity", "which colors should I use", "brand typography", "IONOS blue", "Overpass", "Open Sans", "Poppins", "Nunito Sans", "Lato", "Inter", "strato colors", "fasthosts brand", "homepl style". For component usage and CSS token code patterns, see uds-usage-best-practices.
How this skill is triggered — by the user, by Claude, or both
Slash command
/uds-orchestrator:uds-style-guideThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The UDS supports 8 brands. Each brand has its own color palette, typeface, and personality — but all share the same underlying design principles: **purposeful color**, **typographic clarity**, and **restraint over decoration**.
The UDS supports 8 brands. Each brand has its own color palette, typeface, and personality — but all share the same underlying design principles: purposeful color, typographic clarity, and restraint over decoration.
Identify the target brand first, then go to the matching rule file:
| Brand | Font | Rule File | Status |
|---|---|---|---|
| ionos | Overpass / Open Sans | rules/ionos-color-palette.md, rules/ionos-typography.md, rules/ionos-assets.md | Full |
| strato | Nunito Sans | rules/strato.md | Stub |
| fasthosts | Poppins | rules/fasthosts.md | Stub |
| homepl | Lato | rules/homepl.md | Stub |
| strefa | Lato | rules/strefa.md | Stub |
| udag | Nunito Sans | rules/udag.md | Stub |
| world4you | Nunito Sans | rules/world4you.md | Stub |
| arsys | Inter | rules/arsys.md | Stub |
"Full" = Figma-sourced colors + typography + principles documented.
"Stub" = font known; colors and detailed guidelines need Figma data to complete. For stub brands, read rules/shared-identity-principles.md for universal principles and note that brand-specific color data is not yet available.
rules/shared-identity-principles.md — Principles that apply to all brands. Read this first regardless of target brand.rules/ionos-ai-features.md — IONOS AI feature color language (blue→magenta gradient, AI tokens, Button ai concept). Read when building any AI affordance.The three primary IONOS colors:
The three primary IONOS colors (the Figma token column is reference notation only — not a CSS variable):
| Color | HEX | Figma token (reference) | Role |
|---|---|---|---|
| IONOS Blue | #003D8F | brand/ionos-blue-600 | Logo, primary anchor |
| Sky | #11C7E6 | brand/ionos-sky-300 | CTA, attention, energy |
| Dark Midnight | #001B41 | brand/ionos-blue-800 | Primary text on screen |
IONOS typefaces: Overpass for headlines, Open Sans for everything else.
AI features use the signature blue→magenta gradient — <Button concept="ai">, or in code the --surface-semantic-ai token. See rules/ionos-ai-features.md. Reserve it for AI affordances only.
Token path notation — Figma paths are NOT CSS variables. This guide writes brand colours as Figma hierarchy paths (
brand/ionos-blue-600). There is no matching CSS custom property for the brand colour scale — neithervar(--brand/ionos-blue-600)(the/is a CSS parse error) norvar(--brand-ionos-blue-600)resolves; both silently drop the declaration and leave the element unstyled. In code: use the literal hex above for a specific brand colour, or use@ionos-web-design-system/coresemantic tokens for UI roles —var(--surface-base)/var(--text-base),var(--surface-base-invert)/var(--text-base-invert),var(--surface-subtlest),var(--surface-semantic-ai)/var(--text-semantic-ai)— always pairing a--surface-*with its matching--text-*. Seeuds-usage-best-practices.
Each brand ships its own CSS file. Import only the active brand:
/* Single brand */
@import '@ionos-web-design-system/core/brands/ionos';
/* Development: load all brands for switching */
@import '@ionos-web-design-system/core/brands/*';
Activate a brand via HTML attribute:
<html data-brand="ionos">
For technical implementation (React components, Tailwind variants, token names in code), see uds-usage-best-practices. This skill covers visual identity: which colors, which fonts, and why.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub ionos-web-design-system/uds-orchestrator --plugin uds-orchestrator