skills.rest
navikt
naviktOFFICIAL
Explore all skills by this author →
WebsiteGitHub

normalize

Align product UI typography, colors, spacing, and components to design tokens.

1|1|Updated Feb 2, 2026
Search Tags:#typography#ui#consistency#accessibility#tokens#design-system#normalize
One-click install
npx skills add https://github.com/navikt/watson-sak-frontend --skill normalize-navikt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/navikt/watson-sak-frontend/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/navikt/watson-sak-frontend --skill normalize-navikt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design across features to ensure visual consistency with the design system, reducing drift from custom styling.

Core Features & Use Cases

  • Align typography, colors, spacing, and components to design tokens.
  • Replace bespoke UI patterns with standard design-system patterns.
  • Use case: when adding a new page or feature, run normalization to bring it into line with the system.

Quick Start

Run normalization on the target feature to align its UI with the design system.

Frequently Asked Questions about normalize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align my product UI with a design system to prevent visual drift?▼

To align your product UI with a design system and prevent visual drift, run a normalization process that enforces token-based styling for typography, color, and spacing across all pages and components.

What is design system normalization and when do I need it?▼

Design system normalization is the process of replacing bespoke UI patterns with standard design-system components and tokens. You need it when adding new features to ensure consistent visuals and maintain system integrity.

How do I replace bespoke UI patterns with standard design tokens?▼

You replace bespoke UI patterns by enforcing token-based styling across typography, colors, and spacing. This normalization discourages one-off patterns and provides guardrails to maintain accessibility and system integrity.

Does UI normalization support accessibility requirements?▼

Yes, UI normalization supports accessibility requirements by enforcing design system consistency. It aligns component usage and visual tokens to ensure that pages and routes meet accessibility standards while preventing custom styling drift.

What's the best way to standardize typography and spacing across new application features?▼

The best way to standardize typography and spacing across new features is to run a normalization check against your design system. This enforces token-based styling and discourages one-off patterns to maintain visual consistency.

Why does my UI styling drift from design system tokens when adding new pages?▼

Your UI styling drifts from design system tokens when one-off patterns and custom styling are introduced. Normalization prevents this by replacing bespoke patterns with standard design-system components and enforcing guardrails.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

normalize

Normalize feature styles to conform to design system tokens.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
adamaltmejdadamaltmejd
2

reg-webapp-design-reviewer

Capture and inspect rendered screenshots for visual and accessibility regression testing.

Community
Advanced
moughamirmoughamir

tailwindcss-plugins

Configure Tailwind CSS official plugins and create custom utilities via the plugin API.

Community
Intermediate