# Punkt CSS

> Using Punkt CSS (@oslokommune/punkt-css) in projects. Covers setup, layout, typography, colors, grid, spacing, and utility classes for building websites and applications with the Oslo kommune design system. Use when building pages or layouts with Punkt CSS classes.

- Skill: `oslokommune/punkt-css` (Agent Skill, multi-file: 10 files)
- Install (CLI): `npx skillmds@latest add oslokommune/punkt-css`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oslokommune/punkt-css/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: oslokommune (https://skillmd.com/u/oslokommune)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oslokommune/punkt-css

---


# Punkt CSS

Skill for using Punkt CSS (`@oslokommune/punkt-css`) in projects. Covers setup, layout, typography, colors, grid, spacing, and utility classes for building websites and applications with the Oslo kommune design system.

**Key principle:** Focus on CSS classes and CSS custom properties. SCSS mixins and variables are noted where relevant but require the SCSS embedding method.

## Sections

1. [Getting Started](getting-started.md)
2. [Typography & Layout](typography-and-layout.md)
3. [Colors](colors.md)
4. [Grid System](grid-system.md)
5. [Spacing](spacing.md)
6. [Breakpoints](breakpoints.md)
7. [Visibility & Accessibility](visibility-and-accessibility.md)
8. [Helper Classes](helper-classes.md)
9. [Dark Mode](dark-mode.md)