Base CSS layer for Swiss UI design system. Provides reset, base element styles, typography utilities, and layout primitives built on top of @swiss-ui/tokens.
npm install @swiss-ui/core @swiss-ui/tokens@import "@swiss-ui/tokens/css";
@import "@swiss-ui/core";/* Only reset */
@import "@swiss-ui/tokens/css";
@import "@swiss-ui/core/reset";
/* Reset + base element styles */
@import "@swiss-ui/tokens/css";
@import "@swiss-ui/core/reset";
@import "@swiss-ui/core/base";
/* Only layout utilities */
@import "@swiss-ui/tokens/css";
@import "@swiss-ui/core/layout";Dark mode works automatically through @swiss-ui/tokens. Add data-theme="dark" to any ancestor element:
<html data-theme="dark">
<!-- all children inherit dark theme tokens -->
</html>| Layer | File | Description |
|---|---|---|
| Reset | reset.css |
Modern CSS reset based on Andy Bell's reset |
| Base | base.css |
Native HTML element styles without classes |
| Typography | typography.css |
Utility classes for text styles |
| Layout | layout.css |
Container, grid, stack, and cluster primitives |
| Class | Size | Weight | Usage |
|---|---|---|---|
.swiss-heading-1 |
48px | Bold | Page titles |
.swiss-heading-2 |
36px | Bold | Section headings |
.swiss-heading-3 |
30px | Bold | Subsection headings |
.swiss-heading-4 |
24px | Medium | Card headings |
.swiss-heading-5 |
20px | Medium | List headings |
.swiss-heading-6 |
18px | Medium | Minor headings |
.swiss-body-lg |
18px | Regular | Lead paragraphs |
.swiss-body-md |
16px | Regular | Default body text |
.swiss-body-sm |
14px | Regular | Secondary text |
.swiss-caption |
12px | Regular | Image captions, footnotes |
.swiss-label |
14px | Medium | Form labels, tags |
.swiss-overline |
12px | Medium | Category labels (uppercase) |
.swiss-code |
14px | Regular | Inline code snippets |
| Class | Description |
|---|---|
.swiss-container |
Centered max-width wrapper with responsive padding |
.swiss-grid |
12-column CSS Grid with token-based gap |
.swiss-col-{1-12} |
Column span within .swiss-grid |
.swiss-stack |
Flex column with vertical gap |
.swiss-cluster |
Flex row wrap with gap |
<div class="swiss-container">
<div class="swiss-grid">
<aside class="swiss-col-3">
<nav>Sidebar navigation</nav>
</aside>
<main class="swiss-col-9">
<h1 class="swiss-heading-1">Article title</h1>
<p class="swiss-body-lg">Lead paragraph text.</p>
<p class="swiss-body-md">Body content.</p>
</main>
</div>
</div><div class="swiss-stack">
<h2 class="swiss-heading-2">Section title</h2>
<p class="swiss-body-md">Description paragraph.</p>
<div class="swiss-cluster">
<span class="swiss-label">Tag one</span>
<span class="swiss-label">Tag two</span>
<span class="swiss-label">Tag three</span>
</div>
</div>Breakpoints match the values from @swiss-ui/tokens:
| Name | Width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
On screens below 640px, .swiss-grid collapses to a single column and all .swiss-col-* spans are overridden.
AGPL-3.0-only