Foundation

Typography

Semantic type-role classes, text tone utilities, generated type tokens, and the kuiText directive.

Import

The CSS classes ship through the main stylesheet. Import the directive only when templates should bind variant or tone.

"styles": [
  "node_modules/@kikita-labs/ui/styles/kikita-ui.css",
  "src/styles.scss"
]

Usage

Decorate native text elements. Typography classes and kuiText change presentation without replacing semantic HTML.

Project profile

Workspace settings

Manage members, billing, and integrations.

Last updated 2 minutes ago

Slug is already used by another workspace.

Current slug: workspace.slug

<section aria-labelledby="project-title">
  <p class="kui-overline kui-text-primary">Project profile</p>
  <h2 id="project-title" class="kui-heading-lg kui-text-default">Workspace settings</h2>
  <p class="kui-body kui-text-muted">Manage members, billing, and integrations.</p>
  <small class="kui-caption kui-text-muted">Last updated 2 minutes ago</small>
  <p class="kui-body-sm kui-text-danger">Slug is already used by another workspace.</p>
  <p class="kui-body-sm">
    Current slug: <code class="kui-code">workspace.slug</code>
  </p>
</section>

Type roles

Choose the role that matches the text's purpose, then keep the native element semantic. Each role resets margin to 0; control vertical spacing explicitly with gap or layout primitives instead of relying on the host tag's default margin.

NameTypeDefaultDescription
.kui-displayh1 — Rare docs or specification page title.
.kui-heading-lgh1 | h2 — Main page or top-level section title.
.kui-heading-mdh2 | h3 — Panel, dialog, or drawer title.
.kui-heading-smh3 | h4 — Compact section, card, or table group title.
.kui-titleh4 | h5 | span — Small emphasized UI title.
.kui-body-lgp — Relaxed paragraph text where space allows.
.kui-bodyp — Default product UI body text.
.kui-body-smp | span — Dense descriptions and table adjunct text.
.kui-captionsmall | span — Hints, metadata, helper text, and timestamps.
.kui-overlinespan — Optional uppercase group label. Use sparingly.
.kui-codecode | span — Inline monospace code and token text.

Tone utilities

Tone utilities only set color. Pair status color with clear visible text when the state matters.

NameTypeDefaultDescription
.kui-text-defaultdefault — Normal foreground text color.
.kui-text-mutedmuted — Secondary copy, descriptions, and metadata.
.kui-text-disableddisabled — Unavailable copy paired with a disabled control or state.
.kui-text-primaryprimary — Brand or primary action emphasis.
.kui-text-successsuccess — Positive status text paired with visible status copy.
.kui-text-warningwarning — Caution status text paired with visible status copy.
.kui-text-dangerdanger — Error or destructive status text paired with visible status copy.

Directive API

The kuiText directive is convenience sugar over the same public class contract.

NameTypeDefaultDescription
kuiTextattribute directive-Applies a semantic type role and text tone to a native text element.
variantKuiTextVariant | undefinedundefinedSemantic typography role applied by the directive. Falls back to defaults.typography.variant, then body.
toneKuiTextTone | undefinedundefinedSemantic text color tone applied by the directive. Falls back to defaults.typography.tone, then default.
KuiTextVariant'display' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'title' | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'overline' | 'code'-Public type for the directive variant input.
KuiTextTone'default' | 'muted' | 'disabled' | 'primary' | 'success' | 'warning' | 'danger'-Public type for the directive tone input.

Provider defaults

Set defaults.typography once for the application or for a subtree. Each option resolves as local input > defaults.typography.<option> > built-in default.

import { provideKikitaUi } from '@kikita-labs/ui';

export const appConfig: ApplicationConfig = {
  providers: [
    provideKikitaUi({
      defaults: {
        typography: {
          /* options below */
        },
      },
    }),
  ],
};

defaults.typography does not reach kuiLink, which composes kuiText but owns its own text colour.

NameTypeDefaultDescription
variant'display' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'title' | 'body-lg' | 'body' | 'body-sm' | 'caption' | 'overline' | 'code' — Semantic typography role.
tone'default' | 'muted' | 'disabled' | 'primary' | 'success' | 'warning' | 'danger' — Semantic text colour tone.

Tokens

Each role exposes generated size, line-height, and weight tokens for theme-aware text scales.

--kui-type-heading-md-size
--kui-type-heading-md-line-height
--kui-type-heading-md-weight

Accessibility

Typography should strengthen native semantics rather than replace them.

  • Keep heading order meaningful; visual classes do not change document structure.
  • Use native small and code elements where those semantics apply.
  • Let long text wrap unless a local row layout owns truncation and exposes the full value.
  • Do not rely on color alone for success, warning, danger, or disabled states.