Colors 1.2.2

Apply text colors with .velin-text-* utilities mapped to VelinStyle's semantic color tokens. Deutsch: Farben

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Color text and backgrounds with semantic utility classes mapped to --velin-color-*.
Use on-* / muted variants for secondary copy.

When not

Do not invent palette step utilities that are not listed in generated docs.

Theme Colors

.velin-text-primary

.velin-text-secondary

.velin-text-success

.velin-text-danger

.velin-text-warning

.velin-text-info

.velin-text-muted

.velin-text-white

<p class="velin-text-primary">Primary text</p>
<p class="velin-text-secondary">Secondary text</p>
<p class="velin-text-success">Success text</p>
<p class="velin-text-danger">Danger text</p>
<p class="velin-text-warning">Warning text</p>
<p class="velin-text-info">Info text</p>
<p class="velin-text-muted">Muted text</p>
<p class="velin-text-white">White text</p>

Body & Emphasis

Contextual text colors for body copy and emphasis:

<p class="velin-text-body">Default body color</p>
<p class="velin-text-body-emphasis">Higher contrast emphasis</p>
<p class="velin-text-body-secondary">Subdued body text</p>
<p class="velin-text-body-tertiary">Tertiary body text</p>

Default body color

Higher contrast emphasis

Subdued body text

Tertiary body text

Text Opacity

Pair with .velin-text-opacity-{value} to reduce text opacity:

<p class="velin-text-primary velin-text-opacity-75">75%</p>
<p class="velin-text-primary velin-text-opacity-50">50%</p>
<p class="velin-text-primary velin-text-opacity-25">25%</p>

75%

50%

25%