Merged in monorepo-step-1 (pull request #1080)

Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
2025-02-26 10:36:17 +00:00
parent 667cab6fb6
commit 80100e7631
2731 changed files with 30986 additions and 23708 deletions
--- a/packages/design-system/lib/components/Card/Card.stories.ts
+++ b/packages/design-system/lib/components/Card/Card.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Card } from './Card.tsx'
+
+const meta = {
+  title: 'Components/Layout/Card',
+  component: Card,
+  argTypes: {
+    intent: {
+      control: 'select',
+      options: ['basic', 'border'],
+    },
+  },
+  args: {
+    intent: 'basic',
+  },
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithBorder: Story = {
+  args: {
+    intent: 'border',
+  },
+}
--- a/packages/design-system/lib/components/Card/Card.tsx
+++ b/packages/design-system/lib/components/Card/Card.tsx
@@ -0,0 +1,26 @@
+import styles from './card.module.css'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+const card = cva(styles.card, {
+  variants: {
+    intent: {
+      basic: styles.basic,
+      border: styles.border,
+    },
+  },
+  // compoundVariants: [
+  //   { intent: "primary", size: "medium", className: styles.primaryMedium },
+  // ],
+  defaultVariants: {
+    intent: 'basic',
+  },
+})
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof card> {}
+
+export function Card({ className, intent }: CardProps) {
+  return <div className={card({ intent, className })}>Card</div>
+}
--- a/packages/design-system/lib/components/Card/card.module.css
+++ b/packages/design-system/lib/components/Card/card.module.css
@@ -0,0 +1,13 @@
+.card {
+  background: #fff;
+}
+
+.basic {
+  outline: solid 1px green;
+}
+
+.border {
+  border-style: solid;
+  border-width: 3px;
+  border-color: var(--color-brand-main-normal);
+}
--- a/packages/design-system/lib/components/Card/index.tsx
+++ b/packages/design-system/lib/components/Card/index.tsx
@@ -0,0 +1 @@
+export { Card } from './Card'
--- a/packages/design-system/lib/components/CurrentWeb/Button/Button.stories.tsx
+++ b/packages/design-system/lib/components/CurrentWeb/Button/Button.stories.tsx
@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Button } from './Button'
+import { TestIcon } from '../Icon/TestIcon'
+
+import '../../../style-current.css'
+
+const meta = {
+  title: 'Current web/Controls/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <div>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    intent: 'secondary',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'large',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'small',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    isDisabled: true,
+  },
+}
+
+export const LeadingIcon: Story = {
+  args: {
+    children: [<TestIcon color="var(--Base-Text-Inverted)" />, 'Button'],
+  },
+}
+
+export const TrailingIcon: Story = {
+  args: {
+    children: ['Button', <TestIcon color="var(--Base-Text-Inverted)" />],
+  },
+}
+
+export const WithIcons: Story = {
+  args: {
+    children: [
+      <TestIcon color="var(--Base-Text-Inverted)" />,
+      <TestIcon color="var(--Base-Text-Inverted)" />,
+      'Button',
+      <TestIcon color="var(--Base-Text-Inverted)" />,
+      <TestIcon color="var(--Base-Text-Inverted)" />,
+    ],
+  },
+}
--- a/packages/design-system/lib/components/CurrentWeb/Button/Button.tsx
+++ b/packages/design-system/lib/components/CurrentWeb/Button/Button.tsx
@@ -0,0 +1,50 @@
+'use client'
+
+import styles from './button.module.css'
+
+import { Button as ButtonComponent } from 'react-aria-components'
+import { cva } from 'class-variance-authority'
+
+import type { ButtonProps as ButtonComponentProps } from 'react-aria-components'
+import type { ComponentProps } from '../../../types'
+
+const config = {
+  variants: {
+    intent: {
+      primary: styles.primary,
+      secondary: styles.secondary,
+    },
+    size: {
+      small: styles.small,
+      normal: styles.normal,
+      large: styles.large,
+    },
+  },
+  defaultVariants: {
+    intent: 'primary',
+    size: 'normal',
+  },
+} as const
+
+const button = cva(styles.button, config)
+
+export type ButtonProps = ComponentProps<
+  ButtonComponentProps,
+  typeof button,
+  never,
+  'intent' | 'size'
+>
+
+export function Button({
+  children,
+  className,
+  intent = config.defaultVariants.intent,
+  size = config.defaultVariants.size,
+  ...props
+}: ButtonProps) {
+  return (
+    <ButtonComponent className={button({ className, intent, size })} {...props}>
+      {children}
+    </ButtonComponent>
+  )
+}
--- a/packages/design-system/lib/components/CurrentWeb/Button/button.module.css
+++ b/packages/design-system/lib/components/CurrentWeb/Button/button.module.css
@@ -0,0 +1,82 @@
+.button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 24px;
+  background: none;
+  color: var(--Base-Text-Inverted);
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background-color 300ms ease;
+  font-family: Helvetica;
+  font-weight: 400;
+}
+
+/* Primary styles */
+.primary {
+  background-color: var(--Primary-Fill-Strong-Default);
+  border: 2px solid transparent;
+  outline: 1px solid transparent;
+}
+
+.primary:hover {
+  background: var(--Primary-Fill-Strong-Hovered);
+}
+
+.primary:active,
+.primary:focus {
+  border: 2px solid var(--Base-Text-Inverted);
+  outline: 1px solid var(--Primary-Border-Strong);
+}
+
+/* Secondary styles */
+.secondary {
+  border: 1px solid var(--Base-Border-Normal);
+  background-color: var(--Base-Background-Normal);
+  color: var(--Primary-Text-Strong);
+}
+
+.secondary:hover {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  outline: 2px solid var(--Primary-Border-Hovered);
+  outline-offset: -1px;
+}
+
+.secondary:active,
+.secondary:focus {
+  border: 1px solid var(--Primary-Border-Strong);
+  outline: 1px solid var(--Base-Border-Normal);
+  outline-offset: -4px;
+}
+
+/* Disabled styles */
+.button:disabled {
+  background-color: var(--Base-Fill-Disabled);
+  color: var(--Base-Text-Disabled);
+  cursor: not-allowed;
+  border: none;
+  outline: none;
+}
+
+/* Sizes */
+.large {
+  font-size: var(--typography-body-regular-font-size);
+  line-height: var(--typography-body-regular-line-height);
+  letter-spacing: var(--typography-body-regular-letter-spacing);
+}
+
+.normal {
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.096px;
+}
+
+.small {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.096px;
+}
--- a/packages/design-system/lib/components/CurrentWeb/Button/index.tsx
+++ b/packages/design-system/lib/components/CurrentWeb/Button/index.tsx
@@ -0,0 +1 @@
+export { Button } from './Button'
--- a/packages/design-system/lib/components/CurrentWeb/Icon/TestIcon.tsx
+++ b/packages/design-system/lib/components/CurrentWeb/Icon/TestIcon.tsx
@@ -0,0 +1,29 @@
+export function TestIcon({ color = '#291710' }: { color?: string }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_69_3287"
+        style={{ maskType: 'alpha' }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_69_3287)">
+        <path
+          d="M11.075 12.95V15.9375C11.075 16.1958 11.1667 16.4167 11.35 16.6C11.5333 16.7833 11.7542 16.875 12.0125 16.875C12.2708 16.875 12.4917 16.7833 12.675 16.6C12.8583 16.4167 12.95 16.1958 12.95 15.9375V12.95H15.9375C16.1958 12.95 16.4167 12.8583 16.6 12.675C16.7833 12.4917 16.875 12.2708 16.875 12.0125C16.875 11.7542 16.7833 11.5333 16.6 11.35C16.4167 11.1667 16.1958 11.075 15.9375 11.075H12.95V8.0625C12.95 7.80417 12.8583 7.58333 12.675 7.4C12.4917 7.21667 12.2708 7.125 12.0125 7.125C11.7542 7.125 11.5333 7.21667 11.35 7.4C11.1667 7.58333 11.075 7.80417 11.075 8.0625V11.075H8.0625C7.80417 11.075 7.58333 11.1667 7.4 11.35C7.21667 11.5333 7.125 11.7542 7.125 12.0125C7.125 12.2708 7.21667 12.4917 7.4 12.675C7.58333 12.8583 7.80417 12.95 8.0625 12.95H11.075ZM12 21.75C10.6516 21.75 9.38434 21.4936 8.19838 20.9809C7.01239 20.4682 5.98075 19.7724 5.10345 18.8934C4.22615 18.0145 3.53125 16.9826 3.01875 15.7978C2.50625 14.613 2.25 13.3471 2.25 12C2.25 10.6516 2.50636 9.38434 3.01908 8.19838C3.53179 7.01239 4.22762 5.98075 5.10658 5.10345C5.98553 4.22615 7.01739 3.53125 8.20218 3.01875C9.38698 2.50625 10.6529 2.25 12 2.25C13.3484 2.25 14.6157 2.50636 15.8016 3.01908C16.9876 3.53179 18.0193 4.22762 18.8966 5.10658C19.7739 5.98553 20.4688 7.01739 20.9813 8.20217C21.4938 9.38697 21.75 10.6529 21.75 12C21.75 13.3484 21.4936 14.6157 20.9809 15.8016C20.4682 16.9876 19.7724 18.0193 18.8934 18.8966C18.0145 19.7739 16.9826 20.4688 15.7978 20.9813C14.613 21.4938 13.3471 21.75 12 21.75ZM12 19.875C14.1917 19.875 16.0521 19.1104 17.5813 17.5813C19.1104 16.0521 19.875 14.1917 19.875 12C19.875 9.80833 19.1104 7.94792 17.5813 6.41875C16.0521 4.88958 14.1917 4.125 12 4.125C9.80833 4.125 7.94792 4.88958 6.41875 6.41875C4.88958 7.94792 4.125 9.80833 4.125 12C4.125 14.1917 4.88958 16.0521 6.41875 17.5813C7.94792 19.1104 9.80833 19.875 12 19.875Z"
+          fill={color}
+        />
+      </g>
+    </svg>
+  )
+}
--- a/packages/design-system/lib/components/CurrentWeb/Icon/index.tsx
+++ b/packages/design-system/lib/components/CurrentWeb/Icon/index.tsx
@@ -0,0 +1 @@
+export { TestIcon } from './TestIcon'
--- a/packages/design-system/lib/current.ts
+++ b/packages/design-system/lib/current.ts
@@ -0,0 +1 @@
+export { Button } from './components/CurrentWeb/Button'
--- a/packages/design-system/lib/docs/colors.mdx
+++ b/packages/design-system/lib/docs/colors.mdx
@@ -0,0 +1,25 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  ColorPalette,
+  ColorItem,
+} from '@storybook/blocks'
+
+import * as colors from '../styles/colors'
+
+<Meta title="Design system/Colors" />
+
+<Title>Colors</Title>
+
+<ColorPalette>
+  {Object.keys(colors).map((key) => {
+    const skipKeys = ['colors', 'tokens', 'Old']
+      if (!skipKeys.includes(key)) {
+      return Object.keys(colors[key]).map((modeKey) => {
+          return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
+        })
+    }
+    return null
+  })}
+</ColorPalette>
--- a/packages/design-system/lib/docs/current-web/colors.mdx
+++ b/packages/design-system/lib/docs/current-web/colors.mdx
@@ -0,0 +1,27 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  ColorPalette,
+  ColorItem,
+} from '@storybook/blocks'
+
+import * as colors from '../../styles/colors'
+
+import '../../style-current.css'
+
+<Meta title="Current web/Colors" />
+
+<Title>Colors</Title>
+
+<ColorPalette>
+  {Object.keys(colors).map((key) => {
+    const skipKeys = ['colors', 'tokens', 'New']
+      if (!skipKeys.includes(key)) {
+      return Object.keys(colors[key]).map((modeKey) => {
+          return <ColorItem title={modeKey} colors={colors[key][modeKey]} />
+        })
+    }
+    return null
+  })}
+</ColorPalette>
--- a/packages/design-system/lib/docs/tokens.mdx
+++ b/packages/design-system/lib/docs/tokens.mdx
@@ -0,0 +1,84 @@
+import {
+  Meta,
+  Title,
+  Subtitle,
+  ColorPalette,
+  ColorItem,
+} from '@storybook/blocks'
+
+import { tokens as allTokens } from '../styles/colors'
+import {capitalizeFirstLetter} from '../utils'
+
+export const data = Object.entries(allTokens).reduce((acc, curr) => {
+    const [name, value] = curr
+    const nameParts = name.split('-')
+    if (nameParts.length == 2) {
+      if (!acc['color']) {
+        acc['color'] = {}
+      }
+      nameParts.unshift('color')
+    }
+
+    const title = nameParts[0].toLowerCase()
+    const subtitle = nameParts[1].toLowerCase()
+    const token = nameParts[2].toLowerCase()
+
+    if (!acc[title]) {
+      acc[title] = {}
+    }
+
+    if (!acc[title][subtitle]) {
+      acc[title][subtitle] = {}
+    }
+
+    acc[title][subtitle][token] = value
+
+    return acc
+  }, {})
+
+<Meta title="Design system/Tokens/Colors" />
+
+
+<div>
+{
+      Object.keys(data).map(t => {
+    if (t === 'color') {
+      return null
+    }
+    return (
+      <>
+        <Title>{capitalizeFirstLetter(t)}</Title>
+        {
+          Object.keys(data[t]).map(s => {
+            return (
+              <>
+                <Subtitle>{capitalizeFirstLetter(s)}</Subtitle>
+                {
+                  (typeof data[t][s] === 'string') ? null : (
+                    <ColorPalette>
+                    {
+                      Object.keys(data[t][s]).map(v => {
+                        return (
+                          <ColorItem
+                            key={v}
+                            title={capitalizeFirstLetter(v)}
+                            subtitle=""
+                            colors={{
+                              [`color.${t}.${s}.${v}`]: `var(--${data[t][s][v]})`
+                            }}
+                          />
+                        )
+                      })
+                    }
+                    </ColorPalette>
+                  )
+                }
+              </>
+            )
+          })
+        }
+      </>
+    )
+  })
+}
+</div>
--- a/packages/design-system/lib/generate.ts
+++ b/packages/design-system/lib/generate.ts
@@ -0,0 +1,318 @@
+import fs from 'node:fs'
+
+import { sortObjectByKey } from './utils.ts'
+
+type FigmaNumberVariable = {
+  name: string
+  type: 'number'
+  isAlias: boolean
+  value: number
+}
+
+type FigmaColorVariable =
+  | {
+      name: string
+      type: 'color'
+      isAlias: true
+      value: {
+        collection: string
+        name: string
+      }
+    }
+  | {
+      name: string
+      type: 'color'
+      isAlias: false
+      value: string
+    }
+
+type FigmaDropShadowEffect = {
+  type: 'DROP_SHADOW'
+  color: {
+    r: number
+    g: number
+    b: number
+    a: number
+  }
+  offset: {
+    x: number
+    y: number
+  }
+  radius: number
+  spread: number
+}
+
+type FigmaEffectVariable = {
+  name: string
+  type: 'effect'
+  isAlias: boolean
+  value: {
+    effects: Array<FigmaDropShadowEffect>
+  }
+}
+
+type FigmaTypographyValue = {
+  fontSize: number
+  fontFamily: string
+  fontWeight: 'Black' | 'Bold' | 'SemiBold' | 'Regular'
+  lineHeight: number
+  lineHeightUnit: 'PIXELS' | 'PERCENT'
+  letterSpacing: number
+  letterSpacingUnit: 'PIXELS' | 'PERCENT'
+  textCase: 'UPPER' | 'ORIGINAL'
+  textDecoration: 'NONE'
+}
+
+type FigmaTypographyVariable = {
+  name: string
+  type: 'typography'
+  isAlias: boolean
+  value: FigmaTypographyValue
+}
+
+type FigmaVariable =
+  | FigmaNumberVariable
+  | FigmaColorVariable
+  | FigmaEffectVariable
+  | FigmaTypographyVariable
+
+type FigmaMode = {
+  name: string
+  variables: FigmaVariable[]
+}
+
+type FigmaCollection = {
+  name: string
+  modes: FigmaMode[]
+}
+
+type FigmaVariableData = {
+  version: string
+  metadata: unknown
+  collections: FigmaCollection[]
+}
+
+function kebabify(str: string) {
+  return str.replaceAll('/', '-').replaceAll(' ', '-').replace(/\(|\)/g, '')
+}
+
+// This parses output JSON from https://github.com/mark-nicepants/variables2json-docs
+const json: FigmaVariableData = JSON.parse(
+  fs.readFileSync('./variables.json', { encoding: 'utf-8' })
+)
+
+const colorGroupsByMode: Record<
+  string,
+  Record<string, Record<string, string>>
+> = {}
+const allColorsByMode: Record<string, Record<string, string>> = {}
+const allTokens: Record<string, string> = {}
+const allTypographyTokens: Record<string, string | number> = {}
+const allNumberedTokens: Record<string, string> = {}
+
+json.collections.forEach((collection) => {
+  collection.modes.forEach((mode) => {
+    mode.variables.forEach((variable) => {
+      if (variable.type === 'color') {
+        if (variable.isAlias === true) {
+          // Token
+          const name = kebabify(variable.name)
+          const value = kebabify(variable.value.name)
+
+          allTokens[name] = value
+        } else {
+          const name = kebabify(variable.name)
+          const value = variable.value.replaceAll(' ', '').toLowerCase()
+
+          // Assign all colors per mode
+          const parsedModeName = mode.name
+            .split(' ')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('')
+
+          if (!allColorsByMode[parsedModeName]) {
+            allColorsByMode[parsedModeName] = {}
+          }
+          allColorsByMode[parsedModeName][name] = value
+
+          const parts = name.split('-')
+          const groupName = parts[0]
+          if (!colorGroupsByMode[parsedModeName]) {
+            colorGroupsByMode[parsedModeName] = {}
+          }
+          if (!colorGroupsByMode[parsedModeName][groupName]) {
+            colorGroupsByMode[parsedModeName][groupName] = {}
+          }
+
+          colorGroupsByMode[parsedModeName][groupName][name] = value
+        }
+      } else if (variable.type === 'typography') {
+        // Make variables for each value
+        const name = 'typography-' + kebabify(variable.name)
+
+        Object.keys(variable.value).forEach((valueKey) => {
+          const value = variable.value[valueKey as keyof FigmaTypographyValue]
+          const typeographyVal = `${name}-${valueKey}`
+
+          const unitValue =
+            variable.value[`${valueKey}Unit` as keyof FigmaTypographyValue]
+
+          if (unitValue) {
+            if (unitValue === 'PERCENT') {
+              allTypographyTokens[typeographyVal] = value + '%'
+              return
+            } else if (unitValue === 'PIXELS') {
+              allTypographyTokens[typeographyVal] = value + 'px'
+              return
+            }
+          }
+
+          // Skip making css variables for units, they are already handled
+          if (valueKey.includes('Unit')) {
+            return
+          }
+
+          if (valueKey === 'fontSize') {
+            allTypographyTokens[typeographyVal] = value + 'px'
+            return
+          }
+
+          allTypographyTokens[typeographyVal] = value
+        })
+      } else if (variable.type === 'number') {
+        if (collection.name === 'Text sizes') {
+          const modeName = kebabify(mode.name)
+          const name = `typography-${kebabify(variable.name)}-${modeName}-fontSize`
+          allTypographyTokens[name] = variable.value.toString() + 'px'
+          return
+        } else if (collection.name === 'Layout') {
+          const collectionName = kebabify(collection.name)
+          const modeName = kebabify(mode.name)
+
+          const name = `${collectionName}-${modeName}-${kebabify(variable.name)}`
+          allNumberedTokens[name] = variable.value + 'px'
+          return
+        } else if (collection.name === 'Spacing') {
+          const collectionName = kebabify(collection.name)
+
+          let unitName = variable.name
+
+          // Special namings for spacing
+          if (unitName === 'x025') {
+            unitName = 'x-quarter'
+          } else if (unitName === 'x05') {
+            unitName = 'x-half'
+          } else if (unitName === 'x15') {
+            unitName = 'x-one-and-half'
+          }
+
+          const name = `${collectionName}-${kebabify(unitName)}`
+          allNumberedTokens[name] = variable.value + 'px'
+          return
+        }
+        const collectionName = kebabify(collection.name)
+
+        const name = `${collectionName}-${kebabify(variable.name)}`
+        allNumberedTokens[name] = variable.value + 'px'
+      }
+    })
+  })
+})
+
+// Create ts file with all colors and color tokens for displaying swatches in Storybook
+const tsOutput = [
+  '/* This file is generated, do not edit manually! */',
+  `export const colors = ${JSON.stringify(allColorsByMode, null, 2)} as const`,
+  '',
+  `export const tokens = ${JSON.stringify(allTokens, null, 2)} as const`,
+  '',
+]
+for (const [modeName, values] of Object.entries(colorGroupsByMode)) {
+  tsOutput.push(`export const ${modeName} = { `)
+  for (const [name, value] of Object.entries(values)) {
+    tsOutput.push(`${name}: ${JSON.stringify(value, null, 2)},`)
+  }
+  tsOutput.push('} as const;')
+  tsOutput.push('')
+}
+fs.writeFileSync('./styles/colors.ts', tsOutput.join('\n'), {
+  encoding: 'utf-8',
+})
+
+// Write a css file for each mode available of core colors
+const cssOutput = [
+  '/* This file is generated, do not edit manually! */',
+  ':root {',
+]
+for (const [, values] of Object.entries(sortObjectByKey(allColorsByMode))) {
+  for (const [name, value] of Object.entries(sortObjectByKey(values))) {
+    cssOutput.push(`  --${name}: ${value};`)
+  }
+}
+cssOutput.push('}')
+cssOutput.push('') // New line at end of file
+fs.writeFileSync(`./styles/modes.css`, cssOutput.join('\n'), {
+  encoding: 'utf-8',
+})
+
+// All css files, regardless of mode, should have the same tokens. Generate one file for all tokens
+const cssTokensOutput = [
+  '/* This file is generated, do not edit manually! */',
+  ':root {',
+]
+for (const [token, value] of Object.entries(sortObjectByKey(allTokens))) {
+  cssTokensOutput.push(`  --${token}: var(--${value});`)
+}
+cssTokensOutput.push('}')
+cssTokensOutput.push('') // New line at end of file
+fs.writeFileSync(`./styles/tokens.css`, cssTokensOutput.join('\n'), {
+  encoding: 'utf-8',
+})
+
+// All css files, regardless of mode, should have the same typography tokens.
+const typographyOutput = [
+  '/* This file is generated, do not edit manually! */',
+  ':root {',
+]
+for (const [token, value] of Object.entries(
+  sortObjectByKey(allTypographyTokens)
+)) {
+  // TODO: handle fontSize for other consumers than CSS modules
+  // Css modules needs fontsizes to be written as numerical values appended with the unit
+  const isNumericalValue =
+    typeof value === 'number' ||
+    token.includes('fontSize') ||
+    token.includes('lineHeight') ||
+    token.includes('letterSpacing')
+
+  const valueOutput = isNumericalValue ? value : `'${value.toLowerCase()}'`
+
+  typographyOutput.push(`  --${token}: ${valueOutput};`)
+}
+typographyOutput.push('}')
+typographyOutput.push('') // New line at end of file
+fs.writeFileSync(`./styles/typography.css`, typographyOutput.join('\n'), {
+  encoding: 'utf-8',
+})
+
+// All css files, regardless of mode, should have the same typography tokens.
+const numberedTokensOutput = [
+  '/* This file is generated, do not edit manually! */',
+  ':root {',
+]
+for (const [token, value] of Object.entries(
+  sortObjectByKey(allNumberedTokens)
+)) {
+  const valueOutput = value
+
+  numberedTokensOutput.push(`  --${token}: ${valueOutput};`)
+}
+numberedTokensOutput.push('}')
+numberedTokensOutput.push('') // New line at end of file
+fs.writeFileSync(
+  `./styles/numberedTokens.css`,
+  numberedTokensOutput.join('\n'),
+  {
+    encoding: 'utf-8',
+  }
+)
--- a/packages/design-system/lib/new.ts
+++ b/packages/design-system/lib/new.ts
@@ -0,0 +1 @@
+export { Card } from './components/Card'
--- a/packages/design-system/lib/style-current.css
+++ b/packages/design-system/lib/style-current.css
@@ -0,0 +1,6 @@
+@import url('./styles/globals.css');
+@import url('./styles/typography.css');
+@import url('./styles/tokens.css');
+
+/* Stylesheet specific for theme */
+@import url('./styles/old.css');
--- a/packages/design-system/lib/style-new.css
+++ b/packages/design-system/lib/style-new.css
@@ -0,0 +1,8 @@
+@import url('./styles/globals.css');
+@import url('./styles/typography.css');
+@import url('./styles/tokens.css');
+@import url('./styles/numberedTokens.css');
+@import url('./styles/modes.css');
+
+/* Stylesheet specific for theme */
+@import url('./styles/new.css');
--- a/packages/design-system/lib/styles/colors.ts
+++ b/packages/design-system/lib/styles/colors.ts
@@ -0,0 +1,628 @@
+/* This file is generated, do not edit manually! */
+export const colors = {
+  Scandic: {
+    'Scandic-Brand-Scandic-Red': '#cd0921',
+    'Scandic-Brand-Burgundy': '#4d001b',
+    'Scandic-Brand-Pale-Peach': '#f7e1d5',
+    'Scandic-Brand-Dark-Green': '#093021',
+    'Scandic-Brand-Light-Green': '#d2edaf',
+    'Scandic-Brand-Dark-Grey': '#291710',
+    'Scandic-Brand-Warm-White': '#faf6f2',
+    'Scandic-Brand-Light-Blue': '#b5e0ff',
+    'Scandic-Brand-Dark-Blue': '#0d1440',
+    'Scandic-Brand-Pale-Yellow': '#fff0c2',
+    'Scandic-Red-00': '#ffebeb',
+    'Scandic-Red-10': '#f7c1c2',
+    'Scandic-Red-20': '#f79499',
+    'Scandic-Red-30': '#f26b74',
+    'Scandic-Red-40': '#ed4251',
+    'Scandic-Red-50': '#e32034',
+    'Scandic-Red-60': '#cd0921',
+    'Scandic-Red-70': '#ad0015',
+    'Scandic-Red-80': '#8d0011',
+    'Scandic-Red-90': '#6d000d',
+    'Scandic-Red-100': '#4d001b',
+    'Scandic-Peach-00': '#fff3ed',
+    'Scandic-Beige-00': '#faf6f2',
+    'Scandic-Beige-10': '#f2ece6',
+    'Scandic-Beige-20': '#e3d9d1',
+    'Scandic-Beige-30': '#d1c4ba',
+    'Scandic-Beige-40': '#b8a79a',
+    'Scandic-Beige-50': '#9c8a7e',
+    'Scandic-Beige-60': '#806e63',
+    'Scandic-Beige-70': '#6b584d',
+    'Scandic-Beige-80': '#533f35',
+    'Scandic-Beige-90': '#3e2b23',
+    'Scandic-Beige-100': '#291710',
+    'Scandic-Peach-10': '#f7e1d5',
+    'Scandic-Peach-20': '#f4d5c8',
+    'Scandic-Peach-30': '#f0c1b6',
+    'Scandic-Peach-40': '#e9aba3',
+    'Scandic-Peach-50': '#de9490',
+    'Scandic-Peach-60': '#cd797c',
+    'Scandic-Peach-70': '#b05b65',
+    'Scandic-Peach-80': '#8f4350',
+    'Scandic-Peach-90': '#642636',
+    'Scandic-Peach-100': '#4d0f25',
+    'Scandic-Green-00': '#f3fce8',
+    'Scandic-Green-10': '#e1f3ca',
+    'Scandic-Green-20': '#d2edaf',
+    'Scandic-Green-30': '#acdb8a',
+    'Scandic-Green-40': '#7cb865',
+    'Scandic-Green-50': '#539e49',
+    'Scandic-Green-60': '#348337',
+    'Scandic-Green-70': '#256931',
+    'Scandic-Green-80': '#164e29',
+    'Scandic-Green-90': '#093021',
+    'Scandic-Green-100': '#091f16',
+    'Scandic-Blue-00': '#e8f6ff',
+    'Scandic-Blue-10': '#cfebff',
+    'Scandic-Blue-20': '#b5e0ff',
+    'Scandic-Blue-30': '#93c9f5',
+    'Scandic-Blue-40': '#79aee7',
+    'Scandic-Blue-50': '#5b8fd4',
+    'Scandic-Blue-60': '#3f6dbd',
+    'Scandic-Blue-70': '#284ea0',
+    'Scandic-Blue-80': '#18347f',
+    'Scandic-Blue-90': '#0d1f5f',
+    'Scandic-Blue-100': '#0d1440',
+    'Scandic-Yellow-00': '#fff8e3',
+    'Scandic-Yellow-10': '#fff0c2',
+    'Scandic-Yellow-20': '#fade89',
+    'Scandic-Yellow-30': '#f7ce52',
+    'Scandic-Yellow-40': '#edb532',
+    'Scandic-Yellow-50': '#e59515',
+    'Scandic-Yellow-60': '#d17308',
+    'Scandic-Yellow-70': '#a85211',
+    'Scandic-Yellow-80': '#7d370f',
+    'Scandic-Yellow-90': '#4f2313',
+    'Scandic-Yellow-100': '#301508',
+    'Go-Brand-Lavender': '#dcd7ff',
+    'Go-Beige-00': '#faf8f2',
+    'Go-Beige-10': '#f0ede4',
+    'Go-Beige-20': '#e0dcce',
+    'Go-Beige-30': '#c8c4b6',
+    'Go-Beige-40': '#b0aca0',
+    'Go-Beige-50': '#918f83',
+    'Go-Beige-60': '#78766d',
+    'Go-Beige-70': '#63615a',
+    'Go-Beige-80': '#4f4d49',
+    'Go-Beige-90': '#373633',
+    'Go-Beige-100': '#1f1e1d',
+    'Go-Brand-Obsidian': '#2d163a',
+    'Go-Brand-Lemon': '#f5ff73',
+    'Go-Brand-Linen': '#e0dcce',
+    'Go-Brand-Chartreuse': '#85ff52',
+    'Go-Brand-Pine': '#21331f',
+    'Go-Brand-Aqua': '#73fcee',
+    'Go-Brand-Powder-rose': '#ecc8c9',
+    'Go-Brand-Coral': '#fa3737',
+    'UI-Grey-00': '#f9f6f4',
+    'UI-Opacity-White-100': '#ffffff',
+    'UI-Opacity-White-90': '#ffffffe6',
+    'UI-Opacity-White-80': '#ffffffcc',
+    'UI-Opacity-White-70': '#ffffffb3',
+    'UI-Opacity-White-60': '#ffffff99',
+    'UI-Opacity-White-50': '#ffffff80',
+    'UI-Opacity-White-40': '#ffffff66',
+    'UI-Opacity-White-30': '#ffffff4d',
+    'UI-Opacity-White-20': '#ffffff33',
+    'UI-Opacity-White-10': '#ffffff1a',
+    'UI-Opacity-White-0': '#ffffff00',
+    'UI-Opacity-Almost-Black-100': '#1f1c1b',
+    'UI-Opacity-Almost-Black-90': '#1f1c1be6',
+    'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
+    'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
+    'UI-Opacity-Almost-Black-60': '#1f1c1b99',
+    'UI-Opacity-Almost-Black-50': '#1f1c1b80',
+    'UI-Opacity-Almost-Black-40': '#1f1c1b66',
+    'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
+    'UI-Opacity-Almost-Black-20': '#1f1c1b33',
+    'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
+    'UI-Opacity-Almost-Black-0': '#1f1c1b00',
+    'UI-Grey-10': '#ebe8e6',
+    'UI-Grey-20': '#d6d2d0',
+    'UI-Grey-30': '#c2bdba',
+    'UI-Grey-40': '#a8a4a2',
+    'UI-Grey-50': '#8c8987',
+    'UI-Grey-60': '#787472',
+    'UI-Grey-70': '#635f5d',
+    'UI-Grey-80': '#57514e',
+    'UI-Grey-90': '#403937',
+    'UI-Grey-100': '#26201e',
+    'Go-Purple-00': '#f4f2ff',
+    'Go-Purple-10': '#dcd7ff',
+    'Go-Purple-20': '#cabffc',
+    'Go-Purple-30': '#baa7f7',
+    'Go-Purple-40': '#ab8ef0',
+    'Go-Purple-50': '#9c75e6',
+    'Go-Purple-60': '#8c5bd5',
+    'Go-Purple-70': '#733cb2',
+    'Go-Purple-80': '#5e2a8c',
+    'Go-Purple-90': '#451f61',
+    'Go-Purple-100': '#2d163a',
+    'Go-Yellow-00': '#fdffe8',
+    'Go-Yellow-10': '#faffc4',
+    'Go-Yellow-20': '#f8ff9c',
+    'Go-Yellow-30': '#f5ff73',
+    'Go-Yellow-40': '#edea39',
+    'Go-Yellow-50': '#dec614',
+    'Go-Yellow-60': '#ba8d07',
+    'Go-Yellow-70': '#966400',
+    'Go-Yellow-80': '#754403',
+    'Go-Yellow-90': '#572701',
+    'Go-Yellow-100': '#3b1300',
+    'Go-Green-00': '#edffe5',
+    'Go-Green-10': '#cdffb8',
+    'Go-Green-20': '#a7ff82',
+    'Go-Green-30': '#85ff52',
+    'Go-Green-40': '#66e03a',
+    'Go-Green-50': '#45b222',
+    'Go-Green-60': '#2e7f18',
+    'Go-Green-70': '#2a601e',
+    'Go-Green-80': '#26461f',
+    'Go-Green-90': '#21331f',
+    'Go-Green-100': '#162115',
+  },
+} as const
+
+export const tokens = {
+  'Base-Background-Primary-Normal': 'Scandic-Beige-00',
+  'Base-Background-Primary-Elevated': 'Scandic-Beige-00',
+  'Base-Surface-Primary-light-Normal': 'UI-Opacity-White-100',
+  'Base-Surface-Primary-dark-Normal': 'Scandic-Peach-10',
+  'Base-Surface-Secondary-light-Normal': 'Scandic-Beige-00',
+  'Base-Surface-Secondary-light-Hover': 'Scandic-Peach-10',
+  'Base-Surface-Secondary-light-Hover-alt': 'Scandic-Peach-20',
+  'Base-Surface-Primary-dark-Hover': 'Scandic-Peach-20',
+  'Base-Surface-Primary-light-Hover': 'UI-Grey-00',
+  'Base-Surface-Primary-light-Hover-alt': 'Scandic-Beige-10',
+  'Base-Surface-Subtle-Normal': 'Scandic-Beige-10',
+  'Base-Surface-Subtle-Hover': 'Scandic-Beige-20',
+  'Base-Text-High-contrast': 'Scandic-Red-100',
+  'Base-Icon-Low-contrast': 'Scandic-Peach-70',
+  'Base-Text-Medium-contrast': 'Scandic-Peach-80',
+  'Base-Text-Accent': 'Scandic-Red-60',
+  'Base-Text-Disabled': 'UI-Grey-40',
+  'Base-Text-Inverted': 'UI-Opacity-White-100',
+  'Base-Border-Normal': 'Scandic-Beige-40',
+  'Base-Border-Hover': 'Scandic-Peach-80',
+  'Base-Border-Subtle': 'Scandic-Beige-20',
+  'Base-Border-Inverted': 'UI-Opacity-White-100',
+  'Base-Button-Primary-Fill-Normal': 'Scandic-Red-60',
+  'Base-Interactive-Surface-Primary-normal': 'Scandic-Red-80',
+  'Base-Interactive-Surface-Secondary-normal': 'Scandic-Green-70',
+  'Base-Interactive-Surface-Tertiary-normal': 'Scandic-Blue-60',
+  'Base-Button-Primary-Fill-Hover': 'Scandic-Red-70',
+  'Base-Button-Primary-Fill-Disabled': 'UI-Grey-20',
+  'Base-Button-Primary-On-Fill-Normal': 'UI-Opacity-White-100',
+  'Base-Button-Primary-On-Fill-Hover': 'UI-Opacity-White-100',
+  'Base-Button-Primary-On-Fill-Disabled': 'UI-Grey-40',
+  'Base-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Base-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Base-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
+  'Base-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-80',
+  'Base-Button-Secondary-On-Fill-Disabled': 'UI-Grey-40',
+  'Base-Button-Secondary-Border-Normal': 'Scandic-Red-100',
+  'Base-Button-Secondary-Border-Hover': 'Scandic-Peach-80',
+  'Base-Button-Secondary-Border-Disabled': 'UI-Grey-30',
+  'Base-Button-Tertiary-Fill-Normal': 'Scandic-Red-100',
+  'Base-Button-Tertiary-Fill-Hover': 'Scandic-Red-90',
+  'Base-Button-Tertiary-Fill-Disabled': 'UI-Grey-20',
+  'Base-Button-Tertiary-On-Fill-Normal': 'UI-Opacity-White-100',
+  'Base-Button-Tertiary-On-Fill-Hover': 'UI-Opacity-White-100',
+  'Base-Button-Tertiary-On-Fill-Disabled': 'UI-Grey-40',
+  'Base-Button-Tertiary-Border-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Tertiary-Border-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Tertiary-Border-Disabled': 'UI-Opacity-White-0',
+  'Base-Button-Inverted-Fill-Normal': 'UI-Opacity-White-100',
+  'Base-Button-Inverted-Fill-Hover': 'Scandic-Beige-10',
+  'Base-Button-Inverted-Fill-Hover-alt': 'Scandic-Peach-10',
+  'Base-Button-Inverted-Fill-Disabled': 'UI-Grey-20',
+  'Base-Button-Inverted-On-Fill-Normal': 'Scandic-Red-100',
+  'Base-Button-Inverted-On-Fill-Hover': 'Scandic-Red-90',
+  'Base-Button-Inverted-On-Fill-Disabled': 'UI-Grey-40',
+  'Base-Button-Inverted-Border-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Inverted-Border-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Inverted-Border-Disabled': 'UI-Opacity-White-0',
+  'UI-Text-High-contrast': 'UI-Grey-100',
+  'UI-Input-Controls-Surface-Normal': 'UI-Opacity-White-100',
+  'UI-Semantic-Information': 'Scandic-Blue-70',
+  'UI-Semantic-Success': 'Scandic-Green-60',
+  'UI-Semantic-Warning': 'Scandic-Yellow-60',
+  'UI-Semantic-Error': 'Scandic-Red-70',
+  'UI-Input-Controls-Surface-Hover': 'Scandic-Beige-10',
+  'UI-Input-Controls-Surface-Disabled': 'UI-Grey-10',
+  'UI-Input-Controls-Fill-Normal': 'UI-Opacity-White-100',
+  'UI-Input-Controls-Fill-Selected': 'Scandic-Blue-80',
+  'UI-Input-Controls-Fill-Selected-hover': 'Scandic-Blue-70',
+  'UI-Input-Controls-Fill-Disabled': 'UI-Grey-60',
+  'UI-Input-Controls-On-Fill-Normal': 'UI-Opacity-White-100',
+  'UI-Input-Controls-Border-Normal': 'Scandic-Beige-50',
+  'UI-Input-Controls-Border-Hover': 'Scandic-Beige-70',
+  'UI-Input-Controls-Border-Focus': 'Scandic-Blue-80',
+  'UI-Input-Controls-Border-Disabled': 'UI-Grey-40',
+  'UI-Input-Controls-Border-Error': 'Scandic-Red-70',
+  'UI-Input-Controls-Border-KeyboardFocus': 'Scandic-Blue-50',
+  'UI-Text-Medium-contrast': 'UI-Grey-80',
+  'UI-Text-Active': 'Scandic-Blue-90',
+  'UI-Text-Error': 'Scandic-Red-70',
+  'UI-Text-Placeholder': 'UI-Grey-60',
+  'Primary-Light-Surface-Normal': 'Scandic-Peach-10',
+  'Primary-Light-Surface-Hover': 'Scandic-Peach-20',
+  'Primary-Light-On-Surface-Text': 'Scandic-Red-100',
+  'Primary-Light-On-Surface-Accent': 'Scandic-Red-60',
+  'Primary-Light-On-Surface-Divider': 'Scandic-Peach-30',
+  'Primary-Light-On-Surface-Divider-subtle': 'Scandic-Beige-10',
+  'Primary-Light-Button-Primary-Fill-Normal': 'Scandic-Red-100',
+  'Primary-Light-Button-Primary-Fill-Hover': 'Scandic-Red-80',
+  'Primary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
+  'Primary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
+  'Primary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
+  'Primary-Light-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
+  'Primary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Primary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
+  'Primary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
+  'Primary-Light-Button-Secondary-On-Fill-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Primary-Light-Button-Secondary-Border-Normal': 'Scandic-Red-100',
+  'Primary-Light-Button-Secondary-Border-Hover': 'Scandic-Red-80',
+  'Primary-Light-Button-Secondary-Border-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Primary-Dim-Surface-Normal': 'Scandic-Peach-30',
+  'Primary-Dim-Surface-Hover': 'Scandic-Peach-40',
+  'Primary-Dim-On-Surface-Text': 'Scandic-Red-100',
+  'Primary-Dim-On-Surface-Accent': 'Scandic-Peach-80',
+  'Primary-Dim-On-Surface-Divider': 'Scandic-Peach-40',
+  'Primary-Dim-Button-Primary-Fill-Normal': 'Scandic-Red-100',
+  'Primary-Dim-Button-Primary-Fill-Hover': 'Scandic-Red-80',
+  'Primary-Dim-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
+  'Primary-Dim-Button-Primary-On-Fill-Normal': 'Scandic-Peach-10',
+  'Primary-Dim-Button-Primary-On-Fill-Hover': 'Scandic-Peach-30',
+  'Primary-Dim-Button-Primary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
+  'Primary-Dim-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Primary-Dim-Button-Secondary-On-Fill-Normal': 'Scandic-Red-100',
+  'Primary-Dim-Button-Secondary-On-Fill-Hover': 'Scandic-Red-80',
+  'Primary-Dim-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-Almost-Black-20',
+  'Primary-Dim-Button-Secondary-Border-Normal': 'Scandic-Red-100',
+  'Primary-Dim-Button-Secondary-Border-Hover': 'Scandic-Red-80',
+  'Primary-Dim-Button-Secondary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
+  'Primary-Strong-Surface-Normal': 'Scandic-Red-60',
+  'Primary-Strong-Surface-Hover': 'Scandic-Red-70',
+  'Primary-Strong-On-Surface-Text': 'UI-Opacity-White-100',
+  'Primary-Strong-On-Surface-Accent': 'Scandic-Peach-10',
+  'Primary-Strong-On-Surface-Divider': 'Scandic-Red-70',
+  'Primary-Strong-Button-Primary-Fill-Normal': 'UI-Opacity-White-100',
+  'Primary-Strong-Button-Primary-Fill-Hover': 'Scandic-Red-00',
+  'Primary-Strong-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
+  'Primary-Strong-Button-Primary-On-Fill-Normal': 'Scandic-Red-70',
+  'Primary-Strong-Button-Primary-On-Fill-Hover': 'Scandic-Red-70',
+  'Primary-Strong-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Primary-Strong-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Primary-Strong-Button-Secondary-On-Fill-Normal': 'UI-Opacity-White-100',
+  'Primary-Strong-Button-Secondary-On-Fill-Hover': 'Scandic-Red-00',
+  'Primary-Strong-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Primary-Strong-Button-Secondary-Border-Normal': 'UI-Opacity-White-100',
+  'Primary-Strong-Button-Secondary-Border-Hover': 'Scandic-Peach-00',
+  'Primary-Strong-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
+  'Primary-Dark-Surface-Normal': 'Scandic-Red-100',
+  'Primary-Dark-Surface-Hover': 'Scandic-Red-90',
+  'Primary-Dark-On-Surface-Text': 'Scandic-Peach-10',
+  'Primary-Dark-On-Surface-Accent': 'Scandic-Peach-50',
+  'Primary-Dark-On-Surface-Divider': 'Scandic-Peach-80',
+  'Primary-Dark-Button-Primary-Fill-Normal': 'Scandic-Peach-10',
+  'Primary-Dark-Button-Primary-Fill-Hover': 'Scandic-Peach-20',
+  'Primary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-20',
+  'Primary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Red-100',
+  'Primary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Red-80',
+  'Primary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-30',
+  'Primary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Primary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Peach-10',
+  'Primary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Peach-30',
+  'Primary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-30',
+  'Primary-Dark-Button-Secondary-Border-Normal': 'Scandic-Peach-10',
+  'Primary-Dark-Button-Secondary-Border-Hover': 'Scandic-Peach-30',
+  'Primary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
+  'Secondary-Light-Surface-Normal': 'Scandic-Green-20',
+  'Secondary-Dark-Surface-Normal': 'Scandic-Green-90',
+  'Tertiary-Light-Surface-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Light-Surface-Hover': 'Scandic-Yellow-00',
+  'Tertiary-Light-On-Surface-Text': 'Scandic-Blue-100',
+  'Tertiary-Light-On-Surface-Accent': 'Scandic-Yellow-50',
+  'Tertiary-Light-On-Surface-Divider': 'Scandic-Yellow-20',
+  'Tertiary-Light-Button-Primary-Fill-Normal': 'Scandic-Blue-100',
+  'Tertiary-Light-Button-Primary-Fill-Hover': 'Scandic-Blue-90',
+  'Tertiary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
+  'Tertiary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Yellow-00',
+  'Tertiary-Light-Button-Primary-On-Fill-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Tertiary-Light-Button-Primary-Border-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Light-Button-Primary-Border-Hover': 'Scandic-Yellow-00',
+  'Tertiary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-Almost-Black-20',
+  'Tertiary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Tertiary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Tertiary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Tertiary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Blue-100',
+  'Tertiary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Blue-90',
+  'Tertiary-Light-Button-Secondary-On-Fill-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Tertiary-Light-Button-Secondary-Border-Normal': 'Scandic-Blue-100',
+  'Tertiary-Light-Button-Secondary-Border-Hover': 'Scandic-Blue-90',
+  'Tertiary-Light-Button-Secondary-Border-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Secondary-Dark-Surface-Hover': 'Scandic-Green-80',
+  'Secondary-Dark-On-Surface-Text': 'Scandic-Green-20',
+  'Secondary-Dark-On-Surface-Accent': 'Scandic-Green-40',
+  'Secondary-Dark-On-Surface-Divider': 'Scandic-Green-80',
+  'Secondary-Dark-Button-Primary-Fill-Normal': 'Scandic-Green-20',
+  'Secondary-Dark-Button-Primary-Fill-Hover': 'Scandic-Green-30',
+  'Secondary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
+  'Secondary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Green-90',
+  'Secondary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Green-80',
+  'Secondary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Secondary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Secondary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Green-20',
+  'Secondary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Green-30',
+  'Secondary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Secondary-Dark-Button-Secondary-Border-Normal': 'Scandic-Green-20',
+  'Secondary-Dark-Button-Secondary-Border-Hover': 'Scandic-Green-30',
+  'Secondary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
+  'Secondary-Light-Surface-Hover': 'Scandic-Green-20',
+  'Secondary-Light-On-Surface-Text': 'Scandic-Green-90',
+  'Secondary-Light-On-Surface-Accent': 'Scandic-Green-50',
+  'Secondary-Light-On-Surface-Divider': 'Scandic-Green-30',
+  'Secondary-Light-Button-Primary-Fill-Normal': 'Scandic-Green-90',
+  'Secondary-Light-Button-Primary-Fill-Hover': 'Scandic-Green-80',
+  'Secondary-Light-Button-Primary-Fill-Disabled': 'UI-Opacity-Almost-Black-10',
+  'Secondary-Light-Button-Primary-On-Fill-Normal': 'Scandic-Green-20',
+  'Secondary-Light-Button-Primary-On-Fill-Hover': 'Scandic-Green-30',
+  'Secondary-Light-Button-Primary-On-Fill-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Secondary-Light-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Secondary-Light-Button-Secondary-On-Fill-Normal': 'Scandic-Green-90',
+  'Secondary-Light-Button-Secondary-On-Fill-Hover': 'Scandic-Green-80',
+  'Secondary-Light-Button-Secondary-On-Fill-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Secondary-Light-Button-Secondary-Border-Normal': 'Scandic-Green-90',
+  'Secondary-Light-Button-Secondary-Border-Hover': 'Scandic-Green-80',
+  'Secondary-Light-Button-Secondary-Border-Disabled':
+    'UI-Opacity-Almost-Black-20',
+  'Tertiary-Dark-Surface-Normal': 'Scandic-Blue-100',
+  'Tertiary-Dark-Surface-Hover': 'Scandic-Blue-90',
+  'Tertiary-Dark-On-Surface-Text': 'Scandic-Yellow-10',
+  'Tertiary-Dark-On-Surface-Accent': 'Scandic-Blue-40',
+  'Tertiary-Dark-Button-Primary-Fill-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Dark-Button-Primary-Fill-Hover': 'Scandic-Yellow-20',
+  'Tertiary-Dark-Button-Primary-Fill-Disabled': 'UI-Opacity-White-10',
+  'Tertiary-Dark-Button-Primary-On-Fill-Normal': 'Scandic-Blue-100',
+  'Tertiary-Dark-Button-Primary-On-Fill-Hover': 'Scandic-Blue-80',
+  'Tertiary-Dark-Button-Primary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Tertiary-Dark-Button-Primary-Border-Normal': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Primary-Border-Hover': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Primary-Border-Disabled': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Secondary-Fill-Normal': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Secondary-Fill-Hover': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Secondary-Fill-Disabled': 'UI-Opacity-White-0',
+  'Tertiary-Dark-Button-Secondary-On-Fill-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Dark-Button-Secondary-On-Fill-Hover': 'Scandic-Yellow-20',
+  'Tertiary-Dark-Button-Secondary-On-Fill-Disabled': 'UI-Opacity-White-20',
+  'Tertiary-Dark-Button-Secondary-Border-Normal': 'Scandic-Yellow-10',
+  'Tertiary-Dark-Button-Secondary-Border-Hover': 'Scandic-Yellow-20',
+  'Tertiary-Dark-Button-Secondary-Border-Disabled': 'UI-Opacity-White-20',
+  'Tertiary-Dark-On-Surface-Divider': 'Scandic-Blue-80',
+  'Base-Button-Text-Fill-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Text-Fill-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Text-Fill-Disabled': 'UI-Opacity-White-0',
+  'Base-Button-Text-On-Fill-Normal': 'Scandic-Red-100',
+  'Base-Button-Text-On-Fill-Hover': 'Scandic-Peach-80',
+  'Base-Button-Text-On-Fill-Disabled': 'UI-Grey-40',
+  'Base-Button-Text-Border-Normal': 'UI-Opacity-White-0',
+  'Base-Button-Text-Border-Hover': 'UI-Opacity-White-0',
+  'Base-Button-Text-Border-Disabled': 'UI-Opacity-White-0',
+} as const
+
+export const Scandic = {
+  Scandic: {
+    'Scandic-Brand-Scandic-Red': '#cd0921',
+    'Scandic-Brand-Burgundy': '#4d001b',
+    'Scandic-Brand-Pale-Peach': '#f7e1d5',
+    'Scandic-Brand-Dark-Green': '#093021',
+    'Scandic-Brand-Light-Green': '#d2edaf',
+    'Scandic-Brand-Dark-Grey': '#291710',
+    'Scandic-Brand-Warm-White': '#faf6f2',
+    'Scandic-Brand-Light-Blue': '#b5e0ff',
+    'Scandic-Brand-Dark-Blue': '#0d1440',
+    'Scandic-Brand-Pale-Yellow': '#fff0c2',
+    'Scandic-Red-00': '#ffebeb',
+    'Scandic-Red-10': '#f7c1c2',
+    'Scandic-Red-20': '#f79499',
+    'Scandic-Red-30': '#f26b74',
+    'Scandic-Red-40': '#ed4251',
+    'Scandic-Red-50': '#e32034',
+    'Scandic-Red-60': '#cd0921',
+    'Scandic-Red-70': '#ad0015',
+    'Scandic-Red-80': '#8d0011',
+    'Scandic-Red-90': '#6d000d',
+    'Scandic-Red-100': '#4d001b',
+    'Scandic-Peach-00': '#fff3ed',
+    'Scandic-Beige-00': '#faf6f2',
+    'Scandic-Beige-10': '#f2ece6',
+    'Scandic-Beige-20': '#e3d9d1',
+    'Scandic-Beige-30': '#d1c4ba',
+    'Scandic-Beige-40': '#b8a79a',
+    'Scandic-Beige-50': '#9c8a7e',
+    'Scandic-Beige-60': '#806e63',
+    'Scandic-Beige-70': '#6b584d',
+    'Scandic-Beige-80': '#533f35',
+    'Scandic-Beige-90': '#3e2b23',
+    'Scandic-Beige-100': '#291710',
+    'Scandic-Peach-10': '#f7e1d5',
+    'Scandic-Peach-20': '#f4d5c8',
+    'Scandic-Peach-30': '#f0c1b6',
+    'Scandic-Peach-40': '#e9aba3',
+    'Scandic-Peach-50': '#de9490',
+    'Scandic-Peach-60': '#cd797c',
+    'Scandic-Peach-70': '#b05b65',
+    'Scandic-Peach-80': '#8f4350',
+    'Scandic-Peach-90': '#642636',
+    'Scandic-Peach-100': '#4d0f25',
+    'Scandic-Green-00': '#f3fce8',
+    'Scandic-Green-10': '#e1f3ca',
+    'Scandic-Green-20': '#d2edaf',
+    'Scandic-Green-30': '#acdb8a',
+    'Scandic-Green-40': '#7cb865',
+    'Scandic-Green-50': '#539e49',
+    'Scandic-Green-60': '#348337',
+    'Scandic-Green-70': '#256931',
+    'Scandic-Green-80': '#164e29',
+    'Scandic-Green-90': '#093021',
+    'Scandic-Green-100': '#091f16',
+    'Scandic-Blue-00': '#e8f6ff',
+    'Scandic-Blue-10': '#cfebff',
+    'Scandic-Blue-20': '#b5e0ff',
+    'Scandic-Blue-30': '#93c9f5',
+    'Scandic-Blue-40': '#79aee7',
+    'Scandic-Blue-50': '#5b8fd4',
+    'Scandic-Blue-60': '#3f6dbd',
+    'Scandic-Blue-70': '#284ea0',
+    'Scandic-Blue-80': '#18347f',
+    'Scandic-Blue-90': '#0d1f5f',
+    'Scandic-Blue-100': '#0d1440',
+    'Scandic-Yellow-00': '#fff8e3',
+    'Scandic-Yellow-10': '#fff0c2',
+    'Scandic-Yellow-20': '#fade89',
+    'Scandic-Yellow-30': '#f7ce52',
+    'Scandic-Yellow-40': '#edb532',
+    'Scandic-Yellow-50': '#e59515',
+    'Scandic-Yellow-60': '#d17308',
+    'Scandic-Yellow-70': '#a85211',
+    'Scandic-Yellow-80': '#7d370f',
+    'Scandic-Yellow-90': '#4f2313',
+    'Scandic-Yellow-100': '#301508',
+  },
+  Go: {
+    'Go-Brand-Lavender': '#dcd7ff',
+    'Go-Beige-00': '#faf8f2',
+    'Go-Beige-10': '#f0ede4',
+    'Go-Beige-20': '#e0dcce',
+    'Go-Beige-30': '#c8c4b6',
+    'Go-Beige-40': '#b0aca0',
+    'Go-Beige-50': '#918f83',
+    'Go-Beige-60': '#78766d',
+    'Go-Beige-70': '#63615a',
+    'Go-Beige-80': '#4f4d49',
+    'Go-Beige-90': '#373633',
+    'Go-Beige-100': '#1f1e1d',
+    'Go-Brand-Obsidian': '#2d163a',
+    'Go-Brand-Lemon': '#f5ff73',
+    'Go-Brand-Linen': '#e0dcce',
+    'Go-Brand-Chartreuse': '#85ff52',
+    'Go-Brand-Pine': '#21331f',
+    'Go-Brand-Aqua': '#73fcee',
+    'Go-Brand-Powder-rose': '#ecc8c9',
+    'Go-Brand-Coral': '#fa3737',
+    'Go-Purple-00': '#f4f2ff',
+    'Go-Purple-10': '#dcd7ff',
+    'Go-Purple-20': '#cabffc',
+    'Go-Purple-30': '#baa7f7',
+    'Go-Purple-40': '#ab8ef0',
+    'Go-Purple-50': '#9c75e6',
+    'Go-Purple-60': '#8c5bd5',
+    'Go-Purple-70': '#733cb2',
+    'Go-Purple-80': '#5e2a8c',
+    'Go-Purple-90': '#451f61',
+    'Go-Purple-100': '#2d163a',
+    'Go-Yellow-00': '#fdffe8',
+    'Go-Yellow-10': '#faffc4',
+    'Go-Yellow-20': '#f8ff9c',
+    'Go-Yellow-30': '#f5ff73',
+    'Go-Yellow-40': '#edea39',
+    'Go-Yellow-50': '#dec614',
+    'Go-Yellow-60': '#ba8d07',
+    'Go-Yellow-70': '#966400',
+    'Go-Yellow-80': '#754403',
+    'Go-Yellow-90': '#572701',
+    'Go-Yellow-100': '#3b1300',
+    'Go-Green-00': '#edffe5',
+    'Go-Green-10': '#cdffb8',
+    'Go-Green-20': '#a7ff82',
+    'Go-Green-30': '#85ff52',
+    'Go-Green-40': '#66e03a',
+    'Go-Green-50': '#45b222',
+    'Go-Green-60': '#2e7f18',
+    'Go-Green-70': '#2a601e',
+    'Go-Green-80': '#26461f',
+    'Go-Green-90': '#21331f',
+    'Go-Green-100': '#162115',
+  },
+  UI: {
+    'UI-Grey-00': '#f9f6f4',
+    'UI-Opacity-White-100': '#ffffff',
+    'UI-Opacity-White-90': '#ffffffe6',
+    'UI-Opacity-White-80': '#ffffffcc',
+    'UI-Opacity-White-70': '#ffffffb3',
+    'UI-Opacity-White-60': '#ffffff99',
+    'UI-Opacity-White-50': '#ffffff80',
+    'UI-Opacity-White-40': '#ffffff66',
+    'UI-Opacity-White-30': '#ffffff4d',
+    'UI-Opacity-White-20': '#ffffff33',
+    'UI-Opacity-White-10': '#ffffff1a',
+    'UI-Opacity-White-0': '#ffffff00',
+    'UI-Opacity-Almost-Black-100': '#1f1c1b',
+    'UI-Opacity-Almost-Black-90': '#1f1c1be6',
+    'UI-Opacity-Almost-Black-80': '#1f1c1bcc',
+    'UI-Opacity-Almost-Black-70': '#1f1c1bb3',
+    'UI-Opacity-Almost-Black-60': '#1f1c1b99',
+    'UI-Opacity-Almost-Black-50': '#1f1c1b80',
+    'UI-Opacity-Almost-Black-40': '#1f1c1b66',
+    'UI-Opacity-Almost-Black-30': '#1f1c1b4d',
+    'UI-Opacity-Almost-Black-20': '#1f1c1b33',
+    'UI-Opacity-Almost-Black-10': '#1f1c1b1a',
+    'UI-Opacity-Almost-Black-0': '#1f1c1b00',
+    'UI-Grey-10': '#ebe8e6',
+    'UI-Grey-20': '#d6d2d0',
+    'UI-Grey-30': '#c2bdba',
+    'UI-Grey-40': '#a8a4a2',
+    'UI-Grey-50': '#8c8987',
+    'UI-Grey-60': '#787472',
+    'UI-Grey-70': '#635f5d',
+    'UI-Grey-80': '#57514e',
+    'UI-Grey-90': '#403937',
+    'UI-Grey-100': '#26201e',
+  },
+} as const
--- a/packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
+++ b/packages/design-system/lib/styles/fonts/Helvetica/helvetica.ttf
--- a/packages/design-system/lib/styles/globals.css
+++ b/packages/design-system/lib/styles/globals.css
@@ -0,0 +1,5 @@
+@font-face {
+  font-family: 'Helvetica';
+  font-style: normal;
+  src: url('./fonts/Helvetica/helvetica.ttf') format('ttf');
+}
--- a/packages/design-system/lib/styles/modes.css
+++ b/packages/design-system/lib/styles/modes.css
@@ -0,0 +1,165 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --Go-Beige-00: #faf8f2;
+  --Go-Beige-10: #f0ede4;
+  --Go-Beige-20: #e0dcce;
+  --Go-Beige-30: #c8c4b6;
+  --Go-Beige-40: #b0aca0;
+  --Go-Beige-50: #918f83;
+  --Go-Beige-60: #78766d;
+  --Go-Beige-70: #63615a;
+  --Go-Beige-80: #4f4d49;
+  --Go-Beige-90: #373633;
+  --Go-Beige-100: #1f1e1d;
+  --Go-Brand-Aqua: #73fcee;
+  --Go-Brand-Chartreuse: #85ff52;
+  --Go-Brand-Coral: #fa3737;
+  --Go-Brand-Lavender: #dcd7ff;
+  --Go-Brand-Lemon: #f5ff73;
+  --Go-Brand-Linen: #e0dcce;
+  --Go-Brand-Obsidian: #2d163a;
+  --Go-Brand-Pine: #21331f;
+  --Go-Brand-Powder-rose: #ecc8c9;
+  --Go-Green-00: #edffe5;
+  --Go-Green-10: #cdffb8;
+  --Go-Green-20: #a7ff82;
+  --Go-Green-30: #85ff52;
+  --Go-Green-40: #66e03a;
+  --Go-Green-50: #45b222;
+  --Go-Green-60: #2e7f18;
+  --Go-Green-70: #2a601e;
+  --Go-Green-80: #26461f;
+  --Go-Green-90: #21331f;
+  --Go-Green-100: #162115;
+  --Go-Purple-00: #f4f2ff;
+  --Go-Purple-10: #dcd7ff;
+  --Go-Purple-20: #cabffc;
+  --Go-Purple-30: #baa7f7;
+  --Go-Purple-40: #ab8ef0;
+  --Go-Purple-50: #9c75e6;
+  --Go-Purple-60: #8c5bd5;
+  --Go-Purple-70: #733cb2;
+  --Go-Purple-80: #5e2a8c;
+  --Go-Purple-90: #451f61;
+  --Go-Purple-100: #2d163a;
+  --Go-Yellow-00: #fdffe8;
+  --Go-Yellow-10: #faffc4;
+  --Go-Yellow-20: #f8ff9c;
+  --Go-Yellow-30: #f5ff73;
+  --Go-Yellow-40: #edea39;
+  --Go-Yellow-50: #dec614;
+  --Go-Yellow-60: #ba8d07;
+  --Go-Yellow-70: #966400;
+  --Go-Yellow-80: #754403;
+  --Go-Yellow-90: #572701;
+  --Go-Yellow-100: #3b1300;
+  --Scandic-Beige-00: #faf6f2;
+  --Scandic-Beige-10: #f2ece6;
+  --Scandic-Beige-20: #e3d9d1;
+  --Scandic-Beige-30: #d1c4ba;
+  --Scandic-Beige-40: #b8a79a;
+  --Scandic-Beige-50: #9c8a7e;
+  --Scandic-Beige-60: #806e63;
+  --Scandic-Beige-70: #6b584d;
+  --Scandic-Beige-80: #533f35;
+  --Scandic-Beige-90: #3e2b23;
+  --Scandic-Beige-100: #291710;
+  --Scandic-Blue-00: #e8f6ff;
+  --Scandic-Blue-10: #cfebff;
+  --Scandic-Blue-20: #b5e0ff;
+  --Scandic-Blue-30: #93c9f5;
+  --Scandic-Blue-40: #79aee7;
+  --Scandic-Blue-50: #5b8fd4;
+  --Scandic-Blue-60: #3f6dbd;
+  --Scandic-Blue-70: #284ea0;
+  --Scandic-Blue-80: #18347f;
+  --Scandic-Blue-90: #0d1f5f;
+  --Scandic-Blue-100: #0d1440;
+  --Scandic-Brand-Burgundy: #4d001b;
+  --Scandic-Brand-Dark-Blue: #0d1440;
+  --Scandic-Brand-Dark-Green: #093021;
+  --Scandic-Brand-Dark-Grey: #291710;
+  --Scandic-Brand-Light-Blue: #b5e0ff;
+  --Scandic-Brand-Light-Green: #d2edaf;
+  --Scandic-Brand-Pale-Peach: #f7e1d5;
+  --Scandic-Brand-Pale-Yellow: #fff0c2;
+  --Scandic-Brand-Scandic-Red: #cd0921;
+  --Scandic-Brand-Warm-White: #faf6f2;
+  --Scandic-Green-00: #f3fce8;
+  --Scandic-Green-10: #e1f3ca;
+  --Scandic-Green-20: #d2edaf;
+  --Scandic-Green-30: #acdb8a;
+  --Scandic-Green-40: #7cb865;
+  --Scandic-Green-50: #539e49;
+  --Scandic-Green-60: #348337;
+  --Scandic-Green-70: #256931;
+  --Scandic-Green-80: #164e29;
+  --Scandic-Green-90: #093021;
+  --Scandic-Green-100: #091f16;
+  --Scandic-Peach-00: #fff3ed;
+  --Scandic-Peach-10: #f7e1d5;
+  --Scandic-Peach-20: #f4d5c8;
+  --Scandic-Peach-30: #f0c1b6;
+  --Scandic-Peach-40: #e9aba3;
+  --Scandic-Peach-50: #de9490;
+  --Scandic-Peach-60: #cd797c;
+  --Scandic-Peach-70: #b05b65;
+  --Scandic-Peach-80: #8f4350;
+  --Scandic-Peach-90: #642636;
+  --Scandic-Peach-100: #4d0f25;
+  --Scandic-Red-00: #ffebeb;
+  --Scandic-Red-10: #f7c1c2;
+  --Scandic-Red-20: #f79499;
+  --Scandic-Red-30: #f26b74;
+  --Scandic-Red-40: #ed4251;
+  --Scandic-Red-50: #e32034;
+  --Scandic-Red-60: #cd0921;
+  --Scandic-Red-70: #ad0015;
+  --Scandic-Red-80: #8d0011;
+  --Scandic-Red-90: #6d000d;
+  --Scandic-Red-100: #4d001b;
+  --Scandic-Yellow-00: #fff8e3;
+  --Scandic-Yellow-10: #fff0c2;
+  --Scandic-Yellow-20: #fade89;
+  --Scandic-Yellow-30: #f7ce52;
+  --Scandic-Yellow-40: #edb532;
+  --Scandic-Yellow-50: #e59515;
+  --Scandic-Yellow-60: #d17308;
+  --Scandic-Yellow-70: #a85211;
+  --Scandic-Yellow-80: #7d370f;
+  --Scandic-Yellow-90: #4f2313;
+  --Scandic-Yellow-100: #301508;
+  --UI-Grey-00: #f9f6f4;
+  --UI-Grey-10: #ebe8e6;
+  --UI-Grey-20: #d6d2d0;
+  --UI-Grey-30: #c2bdba;
+  --UI-Grey-40: #a8a4a2;
+  --UI-Grey-50: #8c8987;
+  --UI-Grey-60: #787472;
+  --UI-Grey-70: #635f5d;
+  --UI-Grey-80: #57514e;
+  --UI-Grey-90: #403937;
+  --UI-Grey-100: #26201e;
+  --UI-Opacity-Almost-Black-0: #1f1c1b00;
+  --UI-Opacity-Almost-Black-10: #1f1c1b1a;
+  --UI-Opacity-Almost-Black-20: #1f1c1b33;
+  --UI-Opacity-Almost-Black-30: #1f1c1b4d;
+  --UI-Opacity-Almost-Black-40: #1f1c1b66;
+  --UI-Opacity-Almost-Black-50: #1f1c1b80;
+  --UI-Opacity-Almost-Black-60: #1f1c1b99;
+  --UI-Opacity-Almost-Black-70: #1f1c1bb3;
+  --UI-Opacity-Almost-Black-80: #1f1c1bcc;
+  --UI-Opacity-Almost-Black-90: #1f1c1be6;
+  --UI-Opacity-Almost-Black-100: #1f1c1b;
+  --UI-Opacity-White-0: #ffffff00;
+  --UI-Opacity-White-10: #ffffff1a;
+  --UI-Opacity-White-20: #ffffff33;
+  --UI-Opacity-White-30: #ffffff4d;
+  --UI-Opacity-White-40: #ffffff66;
+  --UI-Opacity-White-50: #ffffff80;
+  --UI-Opacity-White-60: #ffffff99;
+  --UI-Opacity-White-70: #ffffffb3;
+  --UI-Opacity-White-80: #ffffffcc;
+  --UI-Opacity-White-90: #ffffffe6;
+  --UI-Opacity-White-100: #ffffff;
+}
--- a/packages/design-system/lib/styles/new.css
+++ b/packages/design-system/lib/styles/new.css
@@ -0,0 +1,134 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --Go-Beige-00: #faf8f2;
+  --Go-Beige-10: #f0ede4;
+  --Go-Beige-20: #e0dcce;
+  --Go-Beige-30: #c8c4b6;
+  --Go-Beige-40: #b0aca0;
+  --Go-Beige-50: #918f83;
+  --Go-Beige-60: #78766d;
+  --Go-Beige-70: #63615a;
+  --Go-Beige-80: #4f4d49;
+  --Go-Beige-90: #373633;
+  --Go-Beige-100: #1f1e1d;
+  --Go-Brand-Aqua: #73fcee;
+  --Go-Brand-Chartreuse: #85ff52;
+  --Go-Brand-Coral: #fa3737;
+  --Go-Brand-Lavender: #dcd7ff;
+  --Go-Brand-Lemon: #f5ff73;
+  --Go-Brand-Linen: #e0dcce;
+  --Go-Brand-Obsidian: #2d163a;
+  --Go-Brand-Pine: #21331f;
+  --Go-Brand-Powderrose: #ecc8c9;
+  --Go-Green-00: #edffe5;
+  --Go-Green-10: #cdffb8;
+  --Go-Green-20: #a7ff82;
+  --Go-Green-30: #85ff52;
+  --Go-Green-40: #66e03a;
+  --Go-Green-50: #45b222;
+  --Go-Green-60: #2e7f18;
+  --Go-Green-70: #2a601e;
+  --Go-Green-80: #26461f;
+  --Go-Green-90: #21331f;
+  --Go-Green-100: #162115;
+  --Go-Purple-00: #f4f2ff;
+  --Go-Purple-10: #dcd7ff;
+  --Go-Purple-20: #cabffc;
+  --Go-Purple-30: #baa7f7;
+  --Go-Purple-40: #ab8ef0;
+  --Go-Purple-50: #9c75e6;
+  --Go-Purple-60: #8c5bd5;
+  --Go-Purple-70: #733cb2;
+  --Go-Purple-80: #5e2a8c;
+  --Go-Purple-90: #451f61;
+  --Go-Purple-100: #2d163a;
+  --Go-Yellow-00: #fdffe8;
+  --Go-Yellow-10: #faffc4;
+  --Go-Yellow-20: #f8ff9c;
+  --Go-Yellow-30: #f5ff73;
+  --Go-Yellow-40: #edea39;
+  --Go-Yellow-50: #dec614;
+  --Go-Yellow-60: #ba8d07;
+  --Go-Yellow-70: #966400;
+  --Go-Yellow-80: #754403;
+  --Go-Yellow-90: #572701;
+  --Go-Yellow-100: #3b1300;
+  --Main-Blue-00: #eaf2fc;
+  --Main-Blue-10: #c7d9f5;
+  --Main-Blue-20: #a5c2ee;
+  --Main-Blue-30: #84ace7;
+  --Main-Blue-40: #6697df;
+  --Main-Blue-50: #4983d8;
+  --Main-Blue-60: #2e70d1;
+  --Main-Blue-70: #1555b4;
+  --Main-Blue-80: #023d96;
+  --Main-Blue-90: #002a69;
+  --Main-Blue-100: #001b42;
+  --Main-Brand-Burgundy: #4d001b;
+  --Main-Brand-DarkBlue: #0d1440;
+  --Main-Brand-DarkGreen: #093021;
+  --Main-Brand-DarkGrey: #291710;
+  --Main-Brand-LightBlue: #b5e0ff;
+  --Main-Brand-LightGreen: #d2edaf;
+  --Main-Brand-PalePeach: #f7e1d5;
+  --Main-Brand-PaleYellow: #fff0c2;
+  --Main-Brand-ScandicRed: #cd0921;
+  --Main-Brand-WarmWhite: #faf6f2;
+  --Main-Green-00: #e7f5e1;
+  --Main-Green-10: #badda8;
+  --Main-Green-20: #99ca7e;
+  --Main-Green-30: #7ab859;
+  --Main-Green-40: #5fa53a;
+  --Main-Green-50: #47931f;
+  --Main-Green-60: #33800a;
+  --Main-Green-70: #286806;
+  --Main-Green-80: #1e4f03;
+  --Main-Green-90: #143701;
+  --Main-Green-100: #0e2600;
+  --Main-Grey-00: #f9f6f4;
+  --Main-Grey-10: #ebe8e6;
+  --Main-Grey-20: #d6d2d0;
+  --Main-Grey-30: #c2bdba;
+  --Main-Grey-40: #a8a4a2;
+  --Main-Grey-50: #8c8987;
+  --Main-Grey-60: #787472;
+  --Main-Grey-70: #635f5d;
+  --Main-Grey-80: #57514e;
+  --Main-Grey-90: #403937;
+  --Main-Grey-100: #26201e;
+  --Main-Grey-Almostblack: #1f1c1b;
+  --Main-Grey-White: #ffffff;
+  --Main-Red-00: #ffebeb;
+  --Main-Red-10: #f7c1c2;
+  --Main-Red-20: #f79499;
+  --Main-Red-30: #f26b74;
+  --Main-Red-40: #ed4251;
+  --Main-Red-50: #e32034;
+  --Main-Red-60: #cd0921;
+  --Main-Red-70: #ad0015;
+  --Main-Red-80: #8d0011;
+  --Main-Red-90: #6d000d;
+  --Main-Red-100: #4d001b;
+  --Main-Scandic-00: #ffebeb;
+  --Main-Scandic-10: #f7c1c2;
+  --Main-Scandic-20: #f79499;
+  --Main-Scandic-30: #f26b74;
+  --Main-Scandic-40: #ed4251;
+  --Main-Scandic-50: #e32034;
+  --Main-Scandic-60: #cd0921;
+  --Main-Scandic-70: #ad0015;
+  --Main-Scandic-80: #8d0011;
+  --Main-Scandic-90: #6d000d;
+  --Main-Scandic-100: #4d001b;
+  --Main-Yellow-00: #fff8e3;
+  --Main-Yellow-10: #fff0c2;
+  --Main-Yellow-20: #fade89;
+  --Main-Yellow-30: #f7ce52;
+  --Main-Yellow-40: #edb532;
+  --Main-Yellow-50: #e59515;
+  --Main-Yellow-60: #d17308;
+  --Main-Yellow-70: #a85211;
+  --Main-Yellow-80: #7d370f;
+  --Main-Yellow-90: #4f2313;
+  --Main-Yellow-100: #301508;
+}
--- a/packages/design-system/lib/styles/numberedTokens.css
+++ b/packages/design-system/lib/styles/numberedTokens.css
@@ -0,0 +1,41 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --Corner-radius-Large: 12px;
+  --Corner-radius-Medium: 8px;
+  --Corner-radius-Rounded: 250px;
+  --Corner-radius-Small: 4px;
+  --Corner-radius-xLarge: 16px;
+  --Layout-Desktop-Breakpoints-max-width: 1920px;
+  --Layout-Desktop-Breakpoints-min-width: 1367px;
+  --Layout-Desktop-Columns-Column: 12px;
+  --Layout-Desktop-Gutter-max-width: 24px;
+  --Layout-Desktop-Gutter-min-width: 16px;
+  --Layout-Desktop-Margin-Margin-max: 72px;
+  --Layout-Desktop-Margin-Margin-min: 40px;
+  --Layout-Mobile-Breakpoints-max-width: 767px;
+  --Layout-Mobile-Breakpoints-min-width: 320px;
+  --Layout-Mobile-Columns-Column: 4px;
+  --Layout-Mobile-Gutter-max-width: 16px;
+  --Layout-Mobile-Gutter-min-width: 16px;
+  --Layout-Mobile-Margin-Margin-max: 16px;
+  --Layout-Mobile-Margin-Margin-min: 16px;
+  --Layout-Tablet-Breakpoints-max-width: 1366px;
+  --Layout-Tablet-Breakpoints-min-width: 768px;
+  --Layout-Tablet-Columns-Column: 8px;
+  --Layout-Tablet-Gutter-max-width: 16px;
+  --Layout-Tablet-Gutter-min-width: 16px;
+  --Layout-Tablet-Margin-Margin-max: 32px;
+  --Layout-Tablet-Margin-Margin-min: 24px;
+  --Spacing-x0: 0px;
+  --Spacing-x1: 8px;
+  --Spacing-x2: 16px;
+  --Spacing-x3: 24px;
+  --Spacing-x4: 32px;
+  --Spacing-x5: 40px;
+  --Spacing-x6: 48px;
+  --Spacing-x7: 56px;
+  --Spacing-x9: 72px;
+  --Spacing-x-half: 4px;
+  --Spacing-x-one-and-half: 12px;
+  --Spacing-x-quarter: 2px;
+}
--- a/packages/design-system/lib/styles/old.css
+++ b/packages/design-system/lib/styles/old.css
@@ -0,0 +1,134 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --Go-Beige-00: #faf8f2;
+  --Go-Beige-10: #f0ede4;
+  --Go-Beige-20: #e0dcce;
+  --Go-Beige-30: #c8c4b6;
+  --Go-Beige-40: #b0aca0;
+  --Go-Beige-50: #918f83;
+  --Go-Beige-60: #78766d;
+  --Go-Beige-70: #63615a;
+  --Go-Beige-80: #4f4d49;
+  --Go-Beige-90: #373633;
+  --Go-Beige-100: #1f1e1d;
+  --Go-Brand-Aqua: #73fcee;
+  --Go-Brand-Chartreuse: #85ff52;
+  --Go-Brand-Coral: #fa3737;
+  --Go-Brand-Lavender: #dcd7ff;
+  --Go-Brand-Lemon: #f5ff73;
+  --Go-Brand-Linen: #e0dcce;
+  --Go-Brand-Obsidian: #2d163a;
+  --Go-Brand-Pine: #21331f;
+  --Go-Brand-Powderrose: #ecc8c9;
+  --Go-Green-00: #edffe5;
+  --Go-Green-10: #cdffb8;
+  --Go-Green-20: #a7ff82;
+  --Go-Green-30: #85ff52;
+  --Go-Green-40: #66e03a;
+  --Go-Green-50: #45b222;
+  --Go-Green-60: #2e7f18;
+  --Go-Green-70: #2a601e;
+  --Go-Green-80: #26461f;
+  --Go-Green-90: #21331f;
+  --Go-Green-100: #162115;
+  --Go-Purple-00: #f4f2ff;
+  --Go-Purple-10: #dcd7ff;
+  --Go-Purple-20: #cabffc;
+  --Go-Purple-30: #baa7f7;
+  --Go-Purple-40: #ab8ef0;
+  --Go-Purple-50: #9c75e6;
+  --Go-Purple-60: #8c5bd5;
+  --Go-Purple-70: #733cb2;
+  --Go-Purple-80: #5e2a8c;
+  --Go-Purple-90: #451f61;
+  --Go-Purple-100: #2d163a;
+  --Go-Yellow-00: #fdffe8;
+  --Go-Yellow-10: #faffc4;
+  --Go-Yellow-20: #f8ff9c;
+  --Go-Yellow-30: #f5ff73;
+  --Go-Yellow-40: #edea39;
+  --Go-Yellow-50: #dec614;
+  --Go-Yellow-60: #ba8d07;
+  --Go-Yellow-70: #966400;
+  --Go-Yellow-80: #754403;
+  --Go-Yellow-90: #572701;
+  --Go-Yellow-100: #3b1300;
+  --Main-Blue-00: #eaf2fc;
+  --Main-Blue-10: #c7d9f5;
+  --Main-Blue-20: #a5c2ee;
+  --Main-Blue-30: #84ace7;
+  --Main-Blue-40: #6697df;
+  --Main-Blue-50: #4983d8;
+  --Main-Blue-60: #2e70d1;
+  --Main-Blue-70: #1555b4;
+  --Main-Blue-80: #023d96;
+  --Main-Blue-90: #002a69;
+  --Main-Blue-100: #001b42;
+  --Main-Brand-Burgundy: #4d001b;
+  --Main-Brand-DarkBlue: #0d1440;
+  --Main-Brand-DarkGreen: #093021;
+  --Main-Brand-DarkGrey: #291710;
+  --Main-Brand-LightBlue: #b5e0ff;
+  --Main-Brand-LightGreen: #d2edaf;
+  --Main-Brand-PalePeach: #f7e1d5;
+  --Main-Brand-PaleYellow: #fff0c2;
+  --Main-Brand-ScandicRed: #cd0921;
+  --Main-Brand-WarmWhite: #faf6f2;
+  --Main-Green-00: #e7f5e1;
+  --Main-Green-10: #badda8;
+  --Main-Green-20: #99ca7e;
+  --Main-Green-30: #7ab859;
+  --Main-Green-40: #5fa53a;
+  --Main-Green-50: #47931f;
+  --Main-Green-60: #33800a;
+  --Main-Green-70: #286806;
+  --Main-Green-80: #1e4f03;
+  --Main-Green-90: #143701;
+  --Main-Green-100: #0e2600;
+  --Main-Grey-00: #f2f2f2;
+  --Main-Grey-10: #e7e7e8;
+  --Main-Grey-20: #d8d8da;
+  --Main-Grey-30: #ceced2;
+  --Main-Grey-40: #c5c5ca;
+  --Main-Grey-50: #a7a7ad;
+  --Main-Grey-60: #7e7e84;
+  --Main-Grey-70: #535358;
+  --Main-Grey-80: #2f2f32;
+  --Main-Grey-90: #1b1b1c;
+  --Main-Grey-100: #111112;
+  --Main-Grey-Almostblack: #1f1c1b;
+  --Main-Grey-White: #ffffff;
+  --Main-Red-00: #ffebeb;
+  --Main-Red-10: #f7c1c2;
+  --Main-Red-20: #f79499;
+  --Main-Red-30: #f26b74;
+  --Main-Red-40: #ed4251;
+  --Main-Red-50: #e32034;
+  --Main-Red-60: #cd0921;
+  --Main-Red-70: #ad0015;
+  --Main-Red-80: #8d0011;
+  --Main-Red-90: #6d000d;
+  --Main-Red-100: #4d001b;
+  --Main-Scandic-00: #edf7f7;
+  --Main-Scandic-10: #c5e3e5;
+  --Main-Scandic-20: #97d3d9;
+  --Main-Scandic-30: #74cbd2;
+  --Main-Scandic-40: #53c3cc;
+  --Main-Scandic-50: #26a7b2;
+  --Main-Scandic-60: #00838e;
+  --Main-Scandic-70: #055b62;
+  --Main-Scandic-80: #08393d;
+  --Main-Scandic-90: #082022;
+  --Main-Scandic-100: #061112;
+  --Main-Yellow-00: #fff8e3;
+  --Main-Yellow-10: #fff0c2;
+  --Main-Yellow-20: #fade89;
+  --Main-Yellow-30: #f7ce52;
+  --Main-Yellow-40: #edb532;
+  --Main-Yellow-50: #e59515;
+  --Main-Yellow-60: #d17308;
+  --Main-Yellow-70: #a85211;
+  --Main-Yellow-80: #7d370f;
+  --Main-Yellow-90: #4f2313;
+  --Main-Yellow-100: #301508;
+}
--- a/packages/design-system/lib/styles/tokens.css
+++ b/packages/design-system/lib/styles/tokens.css
@@ -0,0 +1,318 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --Base-Background-Primary-Elevated: var(--Scandic-Beige-00);
+  --Base-Background-Primary-Normal: var(--Scandic-Beige-00);
+  --Base-Border-Hover: var(--Scandic-Peach-80);
+  --Base-Border-Inverted: var(--UI-Opacity-White-100);
+  --Base-Border-Normal: var(--Scandic-Beige-40);
+  --Base-Border-Subtle: var(--Scandic-Beige-20);
+  --Base-Button-Inverted-Border-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Inverted-Border-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Inverted-Border-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Inverted-Fill-Disabled: var(--UI-Grey-20);
+  --Base-Button-Inverted-Fill-Hover: var(--Scandic-Beige-10);
+  --Base-Button-Inverted-Fill-Hover-alt: var(--Scandic-Peach-10);
+  --Base-Button-Inverted-Fill-Normal: var(--UI-Opacity-White-100);
+  --Base-Button-Inverted-On-Fill-Disabled: var(--UI-Grey-40);
+  --Base-Button-Inverted-On-Fill-Hover: var(--Scandic-Red-90);
+  --Base-Button-Inverted-On-Fill-Normal: var(--Scandic-Red-100);
+  --Base-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Primary-Fill-Disabled: var(--UI-Grey-20);
+  --Base-Button-Primary-Fill-Hover: var(--Scandic-Red-70);
+  --Base-Button-Primary-Fill-Normal: var(--Scandic-Red-60);
+  --Base-Button-Primary-On-Fill-Disabled: var(--UI-Grey-40);
+  --Base-Button-Primary-On-Fill-Hover: var(--UI-Opacity-White-100);
+  --Base-Button-Primary-On-Fill-Normal: var(--UI-Opacity-White-100);
+  --Base-Button-Secondary-Border-Disabled: var(--UI-Grey-30);
+  --Base-Button-Secondary-Border-Hover: var(--Scandic-Peach-80);
+  --Base-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
+  --Base-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Secondary-On-Fill-Disabled: var(--UI-Grey-40);
+  --Base-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-80);
+  --Base-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
+  --Base-Button-Tertiary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Tertiary-Border-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Tertiary-Border-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Tertiary-Fill-Disabled: var(--UI-Grey-20);
+  --Base-Button-Tertiary-Fill-Hover: var(--Scandic-Red-90);
+  --Base-Button-Tertiary-Fill-Normal: var(--Scandic-Red-100);
+  --Base-Button-Tertiary-On-Fill-Disabled: var(--UI-Grey-40);
+  --Base-Button-Tertiary-On-Fill-Hover: var(--UI-Opacity-White-100);
+  --Base-Button-Tertiary-On-Fill-Normal: var(--UI-Opacity-White-100);
+  --Base-Button-Text-Border-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Text-Border-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Text-Border-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Text-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Base-Button-Text-Fill-Hover: var(--UI-Opacity-White-0);
+  --Base-Button-Text-Fill-Normal: var(--UI-Opacity-White-0);
+  --Base-Button-Text-On-Fill-Disabled: var(--UI-Grey-40);
+  --Base-Button-Text-On-Fill-Hover: var(--Scandic-Peach-80);
+  --Base-Button-Text-On-Fill-Normal: var(--Scandic-Red-100);
+  --Base-Icon-Low-contrast: var(--Scandic-Peach-70);
+  --Base-Interactive-Surface-Primary-normal: var(--Scandic-Red-80);
+  --Base-Interactive-Surface-Secondary-normal: var(--Scandic-Green-70);
+  --Base-Interactive-Surface-Tertiary-normal: var(--Scandic-Blue-60);
+  --Base-Surface-Primary-dark-Hover: var(--Scandic-Peach-20);
+  --Base-Surface-Primary-dark-Normal: var(--Scandic-Peach-10);
+  --Base-Surface-Primary-light-Hover: var(--UI-Grey-00);
+  --Base-Surface-Primary-light-Hover-alt: var(--Scandic-Beige-10);
+  --Base-Surface-Primary-light-Normal: var(--UI-Opacity-White-100);
+  --Base-Surface-Secondary-light-Hover: var(--Scandic-Peach-10);
+  --Base-Surface-Secondary-light-Hover-alt: var(--Scandic-Peach-20);
+  --Base-Surface-Secondary-light-Normal: var(--Scandic-Beige-00);
+  --Base-Surface-Subtle-Hover: var(--Scandic-Beige-20);
+  --Base-Surface-Subtle-Normal: var(--Scandic-Beige-10);
+  --Base-Text-Accent: var(--Scandic-Red-60);
+  --Base-Text-Disabled: var(--UI-Grey-40);
+  --Base-Text-High-contrast: var(--Scandic-Red-100);
+  --Base-Text-Inverted: var(--UI-Opacity-White-100);
+  --Base-Text-Medium-contrast: var(--Scandic-Peach-80);
+  --Primary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Primary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Peach-20);
+  --Primary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Peach-10);
+  --Primary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-30);
+  --Primary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Red-80);
+  --Primary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Red-100);
+  --Primary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
+  --Primary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Peach-30);
+  --Primary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Peach-10);
+  --Primary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Primary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-30);
+  --Primary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Peach-30);
+  --Primary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Peach-10);
+  --Primary-Dark-On-Surface-Accent: var(--Scandic-Peach-50);
+  --Primary-Dark-On-Surface-Divider: var(--Scandic-Peach-80);
+  --Primary-Dark-On-Surface-Text: var(--Scandic-Peach-10);
+  --Primary-Dark-Surface-Hover: var(--Scandic-Red-90);
+  --Primary-Dark-Surface-Normal: var(--Scandic-Red-100);
+  --Primary-Dim-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Primary-Fill-Disabled: var(--UI-Opacity-Almost-Black-10);
+  --Primary-Dim-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
+  --Primary-Dim-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
+  --Primary-Dim-Button-Primary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Dim-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
+  --Primary-Dim-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
+  --Primary-Dim-Button-Secondary-Border-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Dim-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
+  --Primary-Dim-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
+  --Primary-Dim-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Primary-Dim-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Dim-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
+  --Primary-Dim-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
+  --Primary-Dim-On-Surface-Accent: var(--Scandic-Peach-80);
+  --Primary-Dim-On-Surface-Divider: var(--Scandic-Peach-40);
+  --Primary-Dim-On-Surface-Text: var(--Scandic-Red-100);
+  --Primary-Dim-Surface-Hover: var(--Scandic-Peach-40);
+  --Primary-Dim-Surface-Normal: var(--Scandic-Peach-30);
+  --Primary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Primary-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-10
+  );
+  --Primary-Light-Button-Primary-Fill-Hover: var(--Scandic-Red-80);
+  --Primary-Light-Button-Primary-Fill-Normal: var(--Scandic-Red-100);
+  --Primary-Light-Button-Primary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Peach-30);
+  --Primary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Peach-10);
+  --Primary-Light-Button-Secondary-Border-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Light-Button-Secondary-Border-Hover: var(--Scandic-Red-80);
+  --Primary-Light-Button-Secondary-Border-Normal: var(--Scandic-Red-100);
+  --Primary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Primary-Light-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Primary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-80);
+  --Primary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Red-100);
+  --Primary-Light-On-Surface-Accent: var(--Scandic-Red-60);
+  --Primary-Light-On-Surface-Divider: var(--Scandic-Peach-30);
+  --Primary-Light-On-Surface-Divider-subtle: var(--Scandic-Beige-10);
+  --Primary-Light-On-Surface-Text: var(--Scandic-Red-100);
+  --Primary-Light-Surface-Hover: var(--Scandic-Peach-20);
+  --Primary-Light-Surface-Normal: var(--Scandic-Peach-10);
+  --Primary-Strong-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Primary-Strong-Button-Primary-Fill-Hover: var(--Scandic-Red-00);
+  --Primary-Strong-Button-Primary-Fill-Normal: var(--UI-Opacity-White-100);
+  --Primary-Strong-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Primary-Strong-Button-Primary-On-Fill-Hover: var(--Scandic-Red-70);
+  --Primary-Strong-Button-Primary-On-Fill-Normal: var(--Scandic-Red-70);
+  --Primary-Strong-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
+  --Primary-Strong-Button-Secondary-Border-Hover: var(--Scandic-Peach-00);
+  --Primary-Strong-Button-Secondary-Border-Normal: var(--UI-Opacity-White-100);
+  --Primary-Strong-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Primary-Strong-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-White-20
+  );
+  --Primary-Strong-Button-Secondary-On-Fill-Hover: var(--Scandic-Red-00);
+  --Primary-Strong-Button-Secondary-On-Fill-Normal: var(--UI-Opacity-White-100);
+  --Primary-Strong-On-Surface-Accent: var(--Scandic-Peach-10);
+  --Primary-Strong-On-Surface-Divider: var(--Scandic-Red-70);
+  --Primary-Strong-On-Surface-Text: var(--UI-Opacity-White-100);
+  --Primary-Strong-Surface-Hover: var(--Scandic-Red-70);
+  --Primary-Strong-Surface-Normal: var(--Scandic-Red-60);
+  --Secondary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
+  --Secondary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Green-30);
+  --Secondary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Green-20);
+  --Secondary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Secondary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Green-80);
+  --Secondary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Green-90);
+  --Secondary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
+  --Secondary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Green-30);
+  --Secondary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Green-20);
+  --Secondary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Secondary-Dark-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-White-20
+  );
+  --Secondary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-30);
+  --Secondary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-20);
+  --Secondary-Dark-On-Surface-Accent: var(--Scandic-Green-40);
+  --Secondary-Dark-On-Surface-Divider: var(--Scandic-Green-80);
+  --Secondary-Dark-On-Surface-Text: var(--Scandic-Green-20);
+  --Secondary-Dark-Surface-Hover: var(--Scandic-Green-80);
+  --Secondary-Dark-Surface-Normal: var(--Scandic-Green-90);
+  --Secondary-Light-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Primary-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-10
+  );
+  --Secondary-Light-Button-Primary-Fill-Hover: var(--Scandic-Green-80);
+  --Secondary-Light-Button-Primary-Fill-Normal: var(--Scandic-Green-90);
+  --Secondary-Light-Button-Primary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Secondary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Green-30);
+  --Secondary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Green-20);
+  --Secondary-Light-Button-Secondary-Border-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Secondary-Light-Button-Secondary-Border-Hover: var(--Scandic-Green-80);
+  --Secondary-Light-Button-Secondary-Border-Normal: var(--Scandic-Green-90);
+  --Secondary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Secondary-Light-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Secondary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Green-80);
+  --Secondary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Green-90);
+  --Secondary-Light-On-Surface-Accent: var(--Scandic-Green-50);
+  --Secondary-Light-On-Surface-Divider: var(--Scandic-Green-30);
+  --Secondary-Light-On-Surface-Text: var(--Scandic-Green-90);
+  --Secondary-Light-Surface-Hover: var(--Scandic-Green-20);
+  --Secondary-Light-Surface-Normal: var(--Scandic-Green-20);
+  --Tertiary-Dark-Button-Primary-Border-Disabled: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Primary-Border-Hover: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Primary-Border-Normal: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Primary-Fill-Disabled: var(--UI-Opacity-White-10);
+  --Tertiary-Dark-Button-Primary-Fill-Hover: var(--Scandic-Yellow-20);
+  --Tertiary-Dark-Button-Primary-Fill-Normal: var(--Scandic-Yellow-10);
+  --Tertiary-Dark-Button-Primary-On-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Tertiary-Dark-Button-Primary-On-Fill-Hover: var(--Scandic-Blue-80);
+  --Tertiary-Dark-Button-Primary-On-Fill-Normal: var(--Scandic-Blue-100);
+  --Tertiary-Dark-Button-Secondary-Border-Disabled: var(--UI-Opacity-White-20);
+  --Tertiary-Dark-Button-Secondary-Border-Hover: var(--Scandic-Yellow-20);
+  --Tertiary-Dark-Button-Secondary-Border-Normal: var(--Scandic-Yellow-10);
+  --Tertiary-Dark-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Tertiary-Dark-Button-Secondary-On-Fill-Disabled: var(--UI-Opacity-White-20);
+  --Tertiary-Dark-Button-Secondary-On-Fill-Hover: var(--Scandic-Yellow-20);
+  --Tertiary-Dark-Button-Secondary-On-Fill-Normal: var(--Scandic-Yellow-10);
+  --Tertiary-Dark-On-Surface-Accent: var(--Scandic-Blue-40);
+  --Tertiary-Dark-On-Surface-Divider: var(--Scandic-Blue-80);
+  --Tertiary-Dark-On-Surface-Text: var(--Scandic-Yellow-10);
+  --Tertiary-Dark-Surface-Hover: var(--Scandic-Blue-90);
+  --Tertiary-Dark-Surface-Normal: var(--Scandic-Blue-100);
+  --Tertiary-Light-Button-Primary-Border-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Tertiary-Light-Button-Primary-Border-Hover: var(--Scandic-Yellow-00);
+  --Tertiary-Light-Button-Primary-Border-Normal: var(--Scandic-Yellow-10);
+  --Tertiary-Light-Button-Primary-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-10
+  );
+  --Tertiary-Light-Button-Primary-Fill-Hover: var(--Scandic-Blue-90);
+  --Tertiary-Light-Button-Primary-Fill-Normal: var(--Scandic-Blue-100);
+  --Tertiary-Light-Button-Primary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Tertiary-Light-Button-Primary-On-Fill-Hover: var(--Scandic-Yellow-00);
+  --Tertiary-Light-Button-Primary-On-Fill-Normal: var(--Scandic-Yellow-10);
+  --Tertiary-Light-Button-Secondary-Border-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Tertiary-Light-Button-Secondary-Border-Hover: var(--Scandic-Blue-90);
+  --Tertiary-Light-Button-Secondary-Border-Normal: var(--Scandic-Blue-100);
+  --Tertiary-Light-Button-Secondary-Fill-Disabled: var(--UI-Opacity-White-0);
+  --Tertiary-Light-Button-Secondary-Fill-Hover: var(--UI-Opacity-White-0);
+  --Tertiary-Light-Button-Secondary-Fill-Normal: var(--UI-Opacity-White-0);
+  --Tertiary-Light-Button-Secondary-On-Fill-Disabled: var(
+    --UI-Opacity-Almost-Black-20
+  );
+  --Tertiary-Light-Button-Secondary-On-Fill-Hover: var(--Scandic-Blue-90);
+  --Tertiary-Light-Button-Secondary-On-Fill-Normal: var(--Scandic-Blue-100);
+  --Tertiary-Light-On-Surface-Accent: var(--Scandic-Yellow-50);
+  --Tertiary-Light-On-Surface-Divider: var(--Scandic-Yellow-20);
+  --Tertiary-Light-On-Surface-Text: var(--Scandic-Blue-100);
+  --Tertiary-Light-Surface-Hover: var(--Scandic-Yellow-00);
+  --Tertiary-Light-Surface-Normal: var(--Scandic-Yellow-10);
+  --UI-Input-Controls-Border-Disabled: var(--UI-Grey-40);
+  --UI-Input-Controls-Border-Error: var(--Scandic-Red-70);
+  --UI-Input-Controls-Border-Focus: var(--Scandic-Blue-80);
+  --UI-Input-Controls-Border-Hover: var(--Scandic-Beige-70);
+  --UI-Input-Controls-Border-KeyboardFocus: var(--Scandic-Blue-50);
+  --UI-Input-Controls-Border-Normal: var(--Scandic-Beige-50);
+  --UI-Input-Controls-Fill-Disabled: var(--UI-Grey-60);
+  --UI-Input-Controls-Fill-Normal: var(--UI-Opacity-White-100);
+  --UI-Input-Controls-Fill-Selected: var(--Scandic-Blue-80);
+  --UI-Input-Controls-Fill-Selected-hover: var(--Scandic-Blue-70);
+  --UI-Input-Controls-On-Fill-Normal: var(--UI-Opacity-White-100);
+  --UI-Input-Controls-Surface-Disabled: var(--UI-Grey-10);
+  --UI-Input-Controls-Surface-Hover: var(--Scandic-Beige-10);
+  --UI-Input-Controls-Surface-Normal: var(--UI-Opacity-White-100);
+  --UI-Semantic-Error: var(--Scandic-Red-70);
+  --UI-Semantic-Information: var(--Scandic-Blue-70);
+  --UI-Semantic-Success: var(--Scandic-Green-60);
+  --UI-Semantic-Warning: var(--Scandic-Yellow-60);
+  --UI-Text-Active: var(--Scandic-Blue-90);
+  --UI-Text-Error: var(--Scandic-Red-70);
+  --UI-Text-High-contrast: var(--UI-Grey-100);
+  --UI-Text-Medium-contrast: var(--UI-Grey-80);
+  --UI-Text-Placeholder: var(--UI-Grey-60);
+}
--- a/packages/design-system/lib/styles/typography.css
+++ b/packages/design-system/lib/styles/typography.css
@@ -0,0 +1,217 @@
+/* This file is generated, do not edit manually! */
+:root {
+  --typography-Body-Bold-Desktop-fontSize: 16px;
+  --typography-Body-Bold-fontFamily: 'fira sans';
+  --typography-Body-Bold-fontSize: 16px;
+  --typography-Body-Bold-fontWeight: 'medium';
+  --typography-Body-Bold-letterSpacing: 1.2000000476837158%;
+  --typography-Body-Bold-lineHeight: 150%;
+  --typography-Body-Bold-Mobile-fontSize: 16px;
+  --typography-Body-Bold-Tablet-estimate-fontSize: 16px;
+  --typography-Body-Bold-textCase: 'original';
+  --typography-Body-Bold-textDecoration: 'none';
+  --typography-Body-Inline-Desktop-fontSize: 16px;
+  --typography-Body-Inline-fontFamily: 'fira sans';
+  --typography-Body-Inline-fontSize: 16px;
+  --typography-Body-Inline-fontWeight: 'regular';
+  --typography-Body-Inline-letterSpacing: 1.2000000476837158%;
+  --typography-Body-Inline-lineHeight: 150%;
+  --typography-Body-Inline-Mobile-fontSize: 16px;
+  --typography-Body-Inline-Tablet-estimate-fontSize: 16px;
+  --typography-Body-Inline-textCase: 'original';
+  --typography-Body-Inline-textDecoration: 'underline';
+  --typography-Body-Link-Desktop-fontSize: 16px;
+  --typography-Body-Link-Mobile-fontSize: 16px;
+  --typography-Body-Link-Tablet-estimate-fontSize: 16px;
+  --typography-Body-Regular-Desktop-fontSize: 16px;
+  --typography-Body-Regular-fontFamily: 'fira sans';
+  --typography-Body-Regular-fontSize: 16px;
+  --typography-Body-Regular-fontWeight: 'regular';
+  --typography-Body-Regular-letterSpacing: 1.2000000476837158%;
+  --typography-Body-Regular-lineHeight: 150%;
+  --typography-Body-Regular-Mobile-fontSize: 16px;
+  --typography-Body-Regular-Tablet-estimate-fontSize: 16px;
+  --typography-Body-Regular-textCase: 'original';
+  --typography-Body-Regular-textDecoration: 'none';
+  --typography-Body-Underline-fontFamily: 'fira sans';
+  --typography-Body-Underline-fontSize: 16px;
+  --typography-Body-Underline-fontWeight: 'medium';
+  --typography-Body-Underline-letterSpacing: 1.2000000476837158%;
+  --typography-Body-Underline-lineHeight: 150%;
+  --typography-Body-Underline-textCase: 'original';
+  --typography-Body-Underline-textDecoration: 'underline';
+  --typography-Caption-Bold-Desktop-fontSize: 14px;
+  --typography-Caption-Bold-fontFamily: 'fira sans';
+  --typography-Caption-Bold-fontSize: 14px;
+  --typography-Caption-Bold-fontWeight: 'medium';
+  --typography-Caption-Bold-letterSpacing: 1.399999976158142%;
+  --typography-Caption-Bold-lineHeight: 139.9999976158142%;
+  --typography-Caption-Bold-Mobile-fontSize: 14px;
+  --typography-Caption-Bold-Tablet-estimate-fontSize: 14px;
+  --typography-Caption-Bold-textCase: 'original';
+  --typography-Caption-Bold-textDecoration: 'none';
+  --typography-Caption-Inline-Desktop-fontSize: 14px;
+  --typography-Caption-Inline-fontFamily: 'fira sans';
+  --typography-Caption-Inline-fontSize: 14px;
+  --typography-Caption-Inline-fontWeight: 'regular';
+  --typography-Caption-Inline-letterSpacing: 1.399999976158142%;
+  --typography-Caption-Inline-lineHeight: 139.9999976158142%;
+  --typography-Caption-Inline-Mobile-fontSize: 14px;
+  --typography-Caption-Inline-Tablet-estimate-fontSize: 14px;
+  --typography-Caption-Inline-textCase: 'original';
+  --typography-Caption-Inline-textDecoration: 'underline';
+  --typography-Caption-Labels-fontFamily: 'brandon text';
+  --typography-Caption-Labels-fontSize: 14px;
+  --typography-Caption-Labels-fontWeight: 'bold';
+  --typography-Caption-Labels-letterSpacing: 1.399999976158142%;
+  --typography-Caption-Labels-lineHeight: 150%;
+  --typography-Caption-Labels-textCase: 'upper';
+  --typography-Caption-Labels-textDecoration: 'none';
+  --typography-Caption-Link-Desktop-fontSize: 14px;
+  --typography-Caption-Link-Mobile-fontSize: 14px;
+  --typography-Caption-Link-Tablet-estimate-fontSize: 14px;
+  --typography-Caption-Regular-Desktop-fontSize: 14px;
+  --typography-Caption-Regular-fontFamily: 'fira sans';
+  --typography-Caption-Regular-fontSize: 14px;
+  --typography-Caption-Regular-fontWeight: 'regular';
+  --typography-Caption-Regular-letterSpacing: 1.399999976158142%;
+  --typography-Caption-Regular-lineHeight: 139.9999976158142%;
+  --typography-Caption-Regular-Mobile-fontSize: 14px;
+  --typography-Caption-Regular-Tablet-estimate-fontSize: 14px;
+  --typography-Caption-Regular-textCase: 'original';
+  --typography-Caption-Regular-textDecoration: 'none';
+  --typography-Caption-Underline-fontFamily: 'fira sans';
+  --typography-Caption-Underline-fontSize: 14px;
+  --typography-Caption-Underline-fontWeight: 'medium';
+  --typography-Caption-Underline-letterSpacing: 1.399999976158142%;
+  --typography-Caption-Underline-lineHeight: 139.9999976158142%;
+  --typography-Caption-Underline-textCase: 'original';
+  --typography-Caption-Underline-textDecoration: 'underline';
+  --typography-Foot-note-Bold-Desktop-fontSize: 12px;
+  --typography-Foot-note-Bold-Mobile-fontSize: 12px;
+  --typography-Foot-note-Bold-Tablet-estimate-fontSize: 12px;
+  --typography-Foot-note-Regular-Desktop-fontSize: 12px;
+  --typography-Foot-note-Regular-Mobile-fontSize: 12px;
+  --typography-Foot-note-Regular-Tablet-estimate-fontSize: 12px;
+  --typography-Footnote-Bold-fontFamily: 'fira sans';
+  --typography-Footnote-Bold-fontSize: 12px;
+  --typography-Footnote-Bold-fontWeight: 'medium';
+  --typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
+  --typography-Footnote-Bold-lineHeight: 150%;
+  --typography-Footnote-Bold-textCase: 'original';
+  --typography-Footnote-Bold-textDecoration: 'none';
+  --typography-Footnote-Labels-fontFamily: 'brandon text';
+  --typography-Footnote-Labels-fontSize: 12px;
+  --typography-Footnote-Labels-fontWeight: 'bold';
+  --typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
+  --typography-Footnote-Labels-lineHeight: 150%;
+  --typography-Footnote-Labels-textCase: 'upper';
+  --typography-Footnote-Labels-textDecoration: 'none';
+  --typography-Footnote-Regular-fontFamily: 'fira sans';
+  --typography-Footnote-Regular-fontSize: 12px;
+  --typography-Footnote-Regular-fontWeight: 'regular';
+  --typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
+  --typography-Footnote-Regular-lineHeight: 150%;
+  --typography-Footnote-Regular-textCase: 'original';
+  --typography-Footnote-Regular-textDecoration: 'none';
+  --typography-Preamble-Desktop-fontSize: 20px;
+  --typography-Preamble-fontFamily: 'fira sans';
+  --typography-Preamble-fontSize: 20px;
+  --typography-Preamble-fontWeight: 'regular';
+  --typography-Preamble-letterSpacing: 1%;
+  --typography-Preamble-lineHeight: 139.9999976158142%;
+  --typography-Preamble-Mobile-fontSize: 18px;
+  --typography-Preamble-Tablet-estimate-fontSize: 19px;
+  --typography-Preamble-textCase: 'original';
+  --typography-Preamble-textDecoration: 'none';
+  --typography-Script-1-Desktop-fontSize: 32px;
+  --typography-Script-1-fontFamily: 'biro script plus';
+  --typography-Script-1-fontSize: 32px;
+  --typography-Script-1-fontWeight: 'regular';
+  --typography-Script-1-letterSpacing: 2%;
+  --typography-Script-1-lineHeight: 110.00000238418579%;
+  --typography-Script-1-Mobile-fontSize: 24px;
+  --typography-Script-1-Tablet-estimate-fontSize: 29px;
+  --typography-Script-1-textCase: 'original';
+  --typography-Script-1-textDecoration: 'none';
+  --typography-Script-2-Desktop-fontSize: 24px;
+  --typography-Script-2-fontFamily: 'biro script plus';
+  --typography-Script-2-fontSize: 24px;
+  --typography-Script-2-fontWeight: 'regular';
+  --typography-Script-2-letterSpacing: 2%;
+  --typography-Script-2-lineHeight: 110.00000238418579%;
+  --typography-Script-2-Mobile-fontSize: 20px;
+  --typography-Script-2-Tablet-estimate-fontSize: 22px;
+  --typography-Script-2-textCase: 'original';
+  --typography-Script-2-textDecoration: 'none';
+  --typography-Subtitle-1-Desktop-fontSize: 24px;
+  --typography-Subtitle-1-fontFamily: 'fira sans';
+  --typography-Subtitle-1-fontSize: 24px;
+  --typography-Subtitle-1-fontWeight: 'medium';
+  --typography-Subtitle-1-letterSpacing: 1%;
+  --typography-Subtitle-1-lineHeight: 120.00000476837158%;
+  --typography-Subtitle-1-Mobile-fontSize: 20px;
+  --typography-Subtitle-1-Tablet-estimate-fontSize: 22px;
+  --typography-Subtitle-1-textCase: 'original';
+  --typography-Subtitle-1-textDecoration: 'none';
+  --typography-Subtitle-2-Desktop-fontSize: 20px;
+  --typography-Subtitle-2-fontFamily: 'fira sans';
+  --typography-Subtitle-2-fontSize: 20px;
+  --typography-Subtitle-2-fontWeight: 'medium';
+  --typography-Subtitle-2-letterSpacing: 1%;
+  --typography-Subtitle-2-lineHeight: 120.00000476837158%;
+  --typography-Subtitle-2-Mobile-fontSize: 18px;
+  --typography-Subtitle-2-Tablet-estimate-fontSize: 19px;
+  --typography-Subtitle-2-textCase: 'original';
+  --typography-Subtitle-2-textDecoration: 'none';
+  --typography-Title-1-Desktop-fontSize: 64px;
+  --typography-Title-1-fontFamily: 'brandon text';
+  --typography-Title-1-fontSize: 64px;
+  --typography-Title-1-fontWeight: 'black';
+  --typography-Title-1-letterSpacing: 0.25%;
+  --typography-Title-1-lineHeight: 110.00000238418579%;
+  --typography-Title-1-Mobile-fontSize: 48px;
+  --typography-Title-1-Tablet-estimate-fontSize: 60px;
+  --typography-Title-1-textCase: 'upper';
+  --typography-Title-1-textDecoration: 'none';
+  --typography-Title-2-Desktop-fontSize: 48px;
+  --typography-Title-2-fontFamily: 'brandon text';
+  --typography-Title-2-fontSize: 48px;
+  --typography-Title-2-fontWeight: 'black';
+  --typography-Title-2-letterSpacing: 0.25%;
+  --typography-Title-2-lineHeight: 110.00000238418579%;
+  --typography-Title-2-Mobile-fontSize: 36px;
+  --typography-Title-2-Tablet-estimate-fontSize: 44px;
+  --typography-Title-2-textCase: 'upper';
+  --typography-Title-2-textDecoration: 'none';
+  --typography-Title-3-Desktop-fontSize: 36px;
+  --typography-Title-3-fontFamily: 'brandon text';
+  --typography-Title-3-fontSize: 36px;
+  --typography-Title-3-fontWeight: 'black';
+  --typography-Title-3-letterSpacing: 0.25%;
+  --typography-Title-3-lineHeight: 110.00000238418579%;
+  --typography-Title-3-Mobile-fontSize: 30px;
+  --typography-Title-3-Tablet-estimate-fontSize: 34px;
+  --typography-Title-3-textCase: 'upper';
+  --typography-Title-3-textDecoration: 'none';
+  --typography-Title-4-Desktop-fontSize: 28px;
+  --typography-Title-4-fontFamily: 'brandon text';
+  --typography-Title-4-fontSize: 28px;
+  --typography-Title-4-fontWeight: 'bold';
+  --typography-Title-4-letterSpacing: 0.25%;
+  --typography-Title-4-lineHeight: 110.00000238418579%;
+  --typography-Title-4-Mobile-fontSize: 24px;
+  --typography-Title-4-Tablet-estimate-fontSize: 26px;
+  --typography-Title-4-textCase: 'original';
+  --typography-Title-4-textDecoration: 'none';
+  --typography-Title-5-Desktop-fontSize: 24px;
+  --typography-Title-5-fontFamily: 'brandon text';
+  --typography-Title-5-fontSize: 24px;
+  --typography-Title-5-fontWeight: 'black';
+  --typography-Title-5-letterSpacing: 0.25%;
+  --typography-Title-5-lineHeight: 110.00000238418579%;
+  --typography-Title-5-Mobile-fontSize: 20px;
+  --typography-Title-5-Tablet-estimate-fontSize: 21px;
+  --typography-Title-5-textCase: 'upper';
+  --typography-Title-5-textDecoration: 'none';
+}
--- a/packages/design-system/lib/types/index.ts
+++ b/packages/design-system/lib/types/index.ts
@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority'
+
+// This will exclude null as values for the given keys
+export type NoNullVariant<Variant, Keys extends keyof Variant> = Omit<
+  Variant,
+  Keys
+> & {
+  [Property in Keys]: Exclude<Variant[Property], null>
+}
+
+// This is NoNullVariant but also requiring given keys in the variant
+// It will exclude null and require the given keys
+export type RequireVariant<Variant, Keys extends keyof Variant> = Omit<
+  Variant,
+  Keys
+> &
+  Required<{
+    [Property in Keys]: Exclude<Variant[Property], null>
+  }>
+
+export type ComponentProps<
+  BaseProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Variants extends (...args: any) => any,
+  RequiredKeys extends keyof VariantProps<Variants> = never,
+  NoNullKeys extends Exclude<
+    keyof VariantProps<Variants>,
+    RequiredKeys
+  > = never,
+> = BaseProps &
+  RequireVariant<VariantProps<Variants>, RequiredKeys> &
+  NoNullVariant<VariantProps<Variants>, NoNullKeys>
--- a/packages/design-system/lib/utils.test.ts
+++ b/packages/design-system/lib/utils.test.ts
@@ -0,0 +1,61 @@
+import { describe, test, expect } from 'vitest'
+
+import { capitalizeFirstLetter, sortObjectByKey } from './utils'
+
+describe('sortObjectByKey', () => {
+  test('sorts object keys alphabetically', () => {
+    const obj = { b: 2, a: 1, c: 3 }
+    const sortedObj = sortObjectByKey(obj)
+    expect(sortedObj).toEqual({ a: 1, b: 2, c: 3 })
+  })
+
+  test('handles empty object', () => {
+    const obj = {}
+    const sortedObj = sortObjectByKey(obj)
+    expect(sortedObj).toEqual({})
+  })
+
+  test('keeps object keys in original order if already sorted', () => {
+    const obj = { a: 1, b: 2, c: 3 }
+    const sortedObj = sortObjectByKey(obj)
+    expect(sortedObj).toEqual({ a: 1, b: 2, c: 3 })
+  })
+
+  test('sorts object keys in reverse alphabetical order', () => {
+    const obj = { z: 1, b: 2, a: 3 }
+    const sortedObj = sortObjectByKey(obj)
+    expect(sortedObj).toEqual({ a: 3, b: 2, z: 1 })
+  })
+
+  test('sorts object keys in natural order', () => {
+    const sortedObj1 = sortObjectByKey({
+      'ScandicRed-100': 1,
+      'ScandicRed-20': 1,
+      'ScandicRed-40': 1,
+      'ScandicRed-10': 1,
+      'Grey-80': 1,
+    })
+
+    expect(Object.keys(sortedObj1)).toEqual([
+      'Grey-80',
+      'ScandicRed-10',
+      'ScandicRed-20',
+      'ScandicRed-40',
+      'ScandicRed-100',
+    ])
+  })
+})
+
+describe('capitalizeFirstLetter function', () => {
+  test('capitalizes the first letter of a string', () => {
+    expect(capitalizeFirstLetter('hello')).toBe('Hello')
+  })
+
+  test('does not change an empty string', () => {
+    expect(capitalizeFirstLetter('')).toBe('')
+  })
+
+  test('does not change a string already starting with an uppercase letter', () => {
+    expect(capitalizeFirstLetter('World')).toBe('World')
+  })
+})
--- a/packages/design-system/lib/utils.ts
+++ b/packages/design-system/lib/utils.ts
@@ -0,0 +1,19 @@
+import { orderBy } from 'natural-orderby'
+
+export function sortObjectByKey<T = unknown>(
+  obj: Record<string, T>,
+): Record<string, T> {
+  const sortedKeys = orderBy(Object.keys(obj))
+
+  const sortedObj: Record<string, T> = {}
+
+  sortedKeys.forEach((key) => {
+    sortedObj[key] = obj[key]
+  })
+
+  return sortedObj
+}
+
+export function capitalizeFirstLetter(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
--- a/packages/design-system/lib/variables.json
+++ b/packages/design-system/lib/variables.json
--- a/packages/design-system/lib/vite-env.d.ts
+++ b/packages/design-system/lib/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
				`@@ -0,0 +1 @@`
				`export { Button } from './components/CurrentWeb/Button'`