NORSE ANKER
APR. 2026 – PRESENT
APR. 2026 – PRESENT
NORSE ANKER
APR. 2026 – PRESENT
Anker Design System
Norse Tech, Norse Atlantic Airways, Norway
Anker Design System
Norse Tech, Norse Atlantic Airways, Norway
Anker Design System
Norse Tech, Norse Atlantic Airways, Norway
EN
Norse Anker is a token-based design system for Norse Atlantic Airways. It unifies color, typography, layout, and components across the Booking Web, Mobile App, and Crew App, with accessibility built in from the start.
NO
Norse Anker er et token-basert designsystem for Norse Atlantic Airways. Det samler farger, typografi, layout og komponenter på tvers av bookingnettsiden, mobilappen og Crew-appen, med universell utforming innebygd fra starten.
Role
At Norse Tech, I led the redesign of Norse's design system foundation. I defined a scalable token structure, built reusable Figma components, and set up developer-ready documentation. I also introduced AI-assisted workflows with Claude Design and Claude Code to speed up prototyping and collaboration.
EN
Norse Anker is a token-based design system for Norse Atlantic Airways. It unifies color, typography, layout, and components across the Booking Web, Mobile App, and Crew App, with accessibility built in from the start.
NO
Norse Anker er et token-basert designsystem for Norse Atlantic Airways. Det samler farger, typografi, layout og komponenter på tvers av bookingnettsiden, mobilappen og Crew-appen, med universell utforming innebygd fra starten.
Role
At Norse Tech, I led the redesign of Norse's design system foundation. I defined a scalable token structure, built reusable Figma components, and set up developer-ready documentation. I also introduced AI-assisted workflows with Claude Design and Claude Code to speed up prototyping and collaboration.
EN
Norse Anker is a token-based design system for Norse Atlantic Airways. It unifies color, typography, layout, and components across the Booking Web, Mobile App, and Crew App, with accessibility built in from the start.
NO
Norse Anker er et token-basert designsystem for Norse Atlantic Airways. Det samler farger, typografi, layout og komponenter på tvers av bookingnettsiden, mobilappen og Crew-appen, med universell utforming innebygd fra starten.
Role
At Norse Tech, I led the redesign of Norse's design system foundation. I defined a scalable token structure, built reusable Figma components, and set up developer-ready documentation. I also introduced AI-assisted workflows with Claude Design and Claude Code to speed up prototyping and collaboration.
Project Goal
Project Goal
Building a Design System That Can Scale
Building a Design System That Can Scale
The previous system covered only a few visual rules, so each team filled the gaps on its own. The goal was to build one accessible foundation that all three products could share.
The previous system covered only a few visual rules, so each team filled the gaps on its own. The goal was to build one accessible foundation that all three products could share.
Project Goal
Building a Design System That Can Scale
The previous system covered only a few visual rules, so each team filled the gaps on its own. The goal was to build one accessible foundation that all three products could share.
Focus | Accessible foundation · Reusable components · System governance
Focus | Accessible foundation · Reusable components · System governance
Color Tokens
Color Tokens
Color tokens follow four naming axes: property, role, modifier, and state. Brand colors come from the cabin itself: Navy for Premium, Baby Blue for Economy.
Color tokens follow four naming axes: property, role, modifier, and state. Brand colors come from the cabin itself: Navy for Premium, Baby Blue for Economy.
Accessible by Default
Accessible by Default
Every foreground and background pair meets WCAG 2.1 AA. Hover, pressed, and disabled states are built into each color scale, so components stay accessible without extra work.
Every foreground and background pair meets WCAG 2.1 AA. Hover, pressed, and disabled states are built into each color scale, so components stay accessible without extra work.
Documentation | Foundation guidelines
Documentation | Foundation guidelines
Documentation | Color usage and accessibility guidelines
Documentation | Color usage and accessibility guidelines
Font Pairing & Scale
Font Pairing & Scale
Poppins for headings keeps the brand's character, and heading sizes adapt to each breakpoint. Inter for body fits more text in less space, with 16px body and a 12px minimum caption.
Poppins for headings keeps the brand's character, and heading sizes adapt to each breakpoint. Inter for body fits more text in less space, with 16px body and a 12px minimum caption.
Three Weights, Clear Hierarchy
Three Weights, Clear Hierarchy
Only three weights: Semibold, Medium, and Regular. Body and captions use Regular and Medium for emphasis, while headings and numbers use Medium or Semibold to make the hierarchy clear.
Only three weights: Semibold, Medium, and Regular. Body and captions use Regular and Medium for emphasis, while headings and numbers use Medium or Semibold to make the hierarchy clear.
Documentation | Typography and Layout Foundation
Documentation | Typography and Layout Foundation
In Practice
Applying & Scaling the Design Foundation
Anker is now rolling out feature by feature across Norse's products. Teams spend less time building new components and more time reusing and optimizing them for each device. With clean tokens and properties, Figma MCP and Code Connect help developers match the design closely.
Norse Web | Homepage Redesign
In Practice
Applying & Scaling the Design Foundation
Anker is now rolling out feature by feature across Norse's products. Teams spend less time building new components and more time reusing and optimizing them for each device. With clean tokens and properties, Figma MCP and Code Connect help developers match the design closely.
Norse Web | Homepage Redesign
