Two font families form the Enso typographic system: Adelle Sans (humanist sans-serif, primary) and DejaVu Sans Mono (monospace, code & labels). Font weights in use: SemiBold (600) for headings and body, Book (400) for mono and small text.
Lorem ipsum dolor sit amet, cursus, mi quis viverra ornare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Lorem ipsum dolor sit amet, cursus, mi quis viverra ornare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Enso uses a theming system with three themes: Light (default),
Dark, and Brand. Each theme defines semantic
tokens for background, text, border, and button states.
Apply themes by adding class="theme-dark" or class="theme-brand" to a container.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare
Spacing, border radius, and border width tokens that govern layout and component dimensions.
Enso-profilen er bygget opp på seks grafiske former. De kan brukes til alt fra illustrasjoner til oppbygging av nettsider. Formene er alltid plassert på en fluktende rekke — like kanter legges aldri ved siden av hverandre.
30px
Komposisjon — like kanter legges ikke inntil hverandre
Formene i alle merkefarger
The Enso wordmark is an SVG set at 88 × 30 px.
Use fill to adapt the logo color to its background.
Always maintain a minimum clear-space of 22 px on all sides.
Light background · #fff6f6
Dark background · #6d4646
Brand background · #ffe0b7
favicon.png · 32 × 32 px
Use as <link rel="icon" href="favicon.png">
The minimum clear space around the logo is equal to the height of the letter "E" — approximately 22 px. Never crowd the logo with text, UI elements, or other images.
The enso.no navigation bar uses DejaVu Sans Mono Book (400) in
all-caps for nav links, colored --rose-700. The bar is
75 px tall with a transparent / light background. Links use generous
horizontal padding (~27 px) and no underline by default.
Enso uses four distinct link treatments. Navigation links are all-caps mono. Inline body links use Adelle Sans SemiBold and show an underline on hover. CTA links add a trailing arrow. Footer links use low-opacity light text on dark.
See our services and expertise for how we can help your brand.
Enso predominantly uses 1:1 square images with
object-fit: cover. Images are sourced from a CDN as AVIF/WebP.
All images should have descriptive alt text and use
loading="lazy" for off-screen images.
Dark color overlay at ~40% opacity · text anchored bottom-left · object-fit: cover
Bildetekst · DejaVu Sans Mono Book 14px · --mauve-400
object-fit: cover — never stretchloading="lazy" on all below-fold imagesRecurring UI patterns: the article/case card with square image, category tags, and the tag chip component.
Three core layout patterns used across enso.no: a full-width hero,
a 50/50 text-image split, and an equal-column grid for articles and cases.
All use --site-margin: 40px horizontal padding and
--site-max-width: 1440px max-width.
Vi er et designbyrå som hjelper organisasjoner med å skape bedre digitale opplevelser.
Les mer om oss →At ≤ 991 px the layout switches to a single-column mobile view. The nav becomes fixed at 60 px tall, desktop links are hidden, and a hamburger toggle reveals a full-width dropdown with right-aligned links. All extracted from enso.no at iPhone 13 viewport (390 × 844).
Page content
Body copy in DejaVu Sans Mono, 16px, 400 weight
Download SKILL.md and place it at
.claude/skills/enso-design/SKILL.md in your project.
Claude Code will automatically apply Enso brand styles
when building or reviewing UI.
Or copy directly into your project with curl:
curl -o SKILL.md https://style.enso.no/SKILL.md