# Entur Linje Design System — Full Reference

> Complete documentation for AI agents. Covers installation, components, tokens, accessibility, and brand identity.

> Full docs site: https://linje.entur.no | GitHub: https://github.com/entur/design-system

---

## Getting Started

# Getting Started with Entur Linje

Full docs: https://linje.entur.no/kom-i-gang/for-utviklere/komponentbibliotek

## Install packages

Packages are installed individually from npm. Use only what you need:

```bash
yarn add @entur/button @entur/tokens
# or
npm install @entur/button @entur/tokens
```

## Import CSS (required)

Components need their CSS to render correctly. Import globally in `App.tsx`, `index.js`, or a global stylesheet. **The order is critical** — token CSS must come first, then component CSS in the exact order below. Wrong order causes style conflicts and visual regressions.

### CSS (in `.css` or `.tsx` files)

```css
/* 1. Base tokens — always first */
@import '@entur/tokens/dist/base.css';

/* 2. Component styles — in this exact order */
@import '@entur/a11y/dist/styles.css';
@import '@entur/grid/dist/styles.css';
@import '@entur/icons/dist/styles.css';
@import '@entur/tab/dist/styles.css';
@import '@entur/typography/dist/styles.css';
@import '@entur/layout/dist/styles.css';
@import '@entur/loader/dist/styles.css';
@import '@entur/expand/dist/styles.css';
@import '@entur/button/dist/styles.css';
@import '@entur/alert/dist/styles.css';
@import '@entur/menu/dist/styles.css';
@import '@entur/fileupload/dist/styles.css';
@import '@entur/modal/dist/styles.css';
@import '@entur/tooltip/dist/styles.css';
@import '@entur/form/dist/styles.css';
@import '@entur/chip/dist/styles.css';
@import '@entur/datepicker/dist/styles.css';
@import '@entur/travel/dist/styles.css';
@import '@entur/table/dist/styles.css';
@import '@entur/dropdown/dist/styles.css';
```

Other token files (`semantic.css`, `data.css`, `transport.css`) should be imported on demand in the files that use them — not globally.

### SCSS (in `.scss` files)

In SCSS, use `@use` with a namespace alias instead of `@import` (Sass `@import` is deprecated):

```scss
/* 1. Base tokens — always first */
@use '@entur/tokens/dist/base.scss' as eds;

/* 2. Component styles — in this exact order, each with a namespace */
@use '@entur/a11y/dist/styles.css' as a11y;
@use '@entur/grid/dist/styles.css' as grid;
@use '@entur/icons/dist/styles.css' as icons;
@use '@entur/tab/dist/styles.css' as tab;
@use '@entur/typography/dist/styles.css' as typography;
@use '@entur/layout/dist/styles.css' as layout;
@use '@entur/loader/dist/styles.css' as loader;
@use '@entur/expand/dist/styles.css' as expand;
@use '@entur/button/dist/styles.css' as button;
@use '@entur/alert/dist/styles.css' as alert;
@use '@entur/menu/dist/styles.css' as menu;
@use '@entur/fileupload/dist/styles.css' as fileupload;
@use '@entur/modal/dist/styles.css' as modal;
@use '@entur/tooltip/dist/styles.css' as tooltip;
@use '@entur/form/dist/styles.css' as form;
@use '@entur/chip/dist/styles.css' as chip;
@use '@entur/datepicker/dist/styles.css' as datepicker;
@use '@entur/travel/dist/styles.css' as travel;
@use '@entur/table/dist/styles.css' as table;
@use '@entur/dropdown/dist/styles.css' as dropdown;
```

Import only the component styles you actually use — but keep the order.

## Import components

All packages use named exports only — never default exports:

```tsx
import { PrimaryButton, SecondaryButton } from '@entur/button';
import { TextField, Checkbox } from '@entur/form';
import { Heading1, Paragraph } from '@entur/typography';
```

## TypeScript types

All packages ship with TypeScript types. Props types follow the pattern `ComponentNameProps`:

```tsx
import { TextField } from '@entur/form';
import type { TextFieldProps } from '@entur/form';
```

## Use tokens for styling

Avoid hardcoded colors and spacing. Use `@entur/tokens` instead:

```tsx
import { colors, space } from '@entur/tokens';
// or CSS variables: var(--fill-primary-default-light)
```

See `tokens-and-variables.md` for the full token reference.

## Polymorphic components

Many components accept an `as` prop for element composition:

```tsx
import { PrimaryButton } from '@entur/button';
<PrimaryButton as="a" href="/booking">
  Book now
</PrimaryButton>;
```

## Dark/light mode

Apply `data-color-mode="dark"` or `data-color-mode="light"` to a parent element. Token CSS variables respond automatically.

```html
<div data-color-mode="dark">
  <!-- tokens adapt to dark values here -->
</div>
```

## Accessibility note

`@entur/a11y` provides `SkipToContent` and `VisuallyHidden`. Always add `SkipToContent` at the top of pages and ensure `id="main-content"` exists on the main element. See `entur-accessibility` skill.

## Troubleshooting

### Styles look wrong after upgrading

If components look broken or misaligned after a version upgrade, check for **duplicate `@entur/*` packages**. Two versions of the same package in the dependency tree causes CSS and JS incompatibilities:

```bash
# Check for duplicates
yarn list --pattern "@entur" | grep -E "@entur/[a-z]+"
# or
npm ls @entur/tokens
```

If you see the same package at multiple versions, deduplicate to the latest:

```bash
yarn dedupe @entur/tokens
# dedupe all @entur packages
yarn dedupe --pattern "@entur"
# or with npm
npm dedupe
```

Then rebuild and verify styles load in the correct order.

### Missing styles / unstyled components

Ensure CSS is imported globally (not inside a component file) and in the correct order. See "Import CSS" section above. A missing CSS import for one package can break dependent packages lower in the order.

### CSS import order matters

The order listed above is not arbitrary — some component styles build on base styles from earlier packages (e.g. `@entur/form` depends on `@entur/icons` and `@entur/typography`). Importing in the wrong order causes visual regressions.

### Components look slightly different from the design

If a component's borders, spacing, or colors do not match a design mockup, do **not** add CSS overrides. The discrepancy is usually one of:

1. CSS imports are in the wrong order — fix the order (see above)
2. The design uses a different component variant — use the correct variant
3. The design has diverged from the design system — flag this in `#talk-designsystem`

Adding custom borders, shadows, text-decoration, or color overrides to `@entur/*` components causes maintenance issues and breaks dark mode. Use a wrapper element for layout adjustments; use tokens for custom (non-DS) elements.

## Questions?

Slack: #talk-designsystem

---

## Component Reference

# Entur Linje — Component Reference

Full API docs: https://linje.entur.no/komponenter

## Quick lookup — package → components

| Package             | Key exports                                                                                                                                                                                                                              |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `@entur/button`     | `PrimaryButton`, `SecondaryButton`, `TertiaryButton`, `NegativeButton`, `SuccessButton`, `IconButton`, `ButtonGroup`, `FloatingButton`, `SecondarySquareButton`, `SuccessSquareButton`, `TertiarySquareButton`                           |
| `@entur/typography` | `Heading1`–`Heading6`, `Paragraph`, `LeadParagraph`, `SubParagraph`, `SmallText`, `Label`, `SubLabel`, `Link`, `StrongText`, `EmphasizedText`, `Blockquote`, `CodeText`, `PreformattedText`, `ListItem`, `UnorderedList`, `NumberedList` |
| `@entur/form`       | `TextField`, `TextArea`, `Checkbox`, `Radio`, `RadioGroup`, `RadioPanel`, `CheckboxPanel`, `Switch`, `Fieldset`, `FeedbackText`, `InputGroupLabel`, `SegmentedControl`                                                                   |
| `@entur/alert`      | `BannerAlertBox`, `SmallAlertBox`, `ToastAlertBox`, `ExpandableAlertBox`, `CopyableText`, `ToastProvider`, `useToast`                                                                                                                    |
| `@entur/menu`       | `SideNavigation`, `SideNavigationItem`, `SideNavigationGroup`, `CollapsibleSideNavigation`, `TopNavigationItem`, `BreadcrumbNavigation`, `BreadcrumbItem`, `OverflowMenu`, `Pagination`, `Stepper`                                       |
| `@entur/layout`     | `Contrast`, `NavigationCard`, `BaseCard`, `MediaCard`, `Badge`, `BulletBadge`, `NotificationBadge`, `StatusBadge`, `Tag`                                                                                                                 |
| `@entur/grid`       | `GridContainer`, `GridItem`                                                                                                                                                                                                              |
| `@entur/modal`      | `Modal`, `ModalOverlay`, `ModalContent`, `Drawer`                                                                                                                                                                                        |
| `@entur/tooltip`    | `Tooltip`, `Popover`                                                                                                                                                                                                                     |
| `@entur/table`      | `Table`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `HeaderCell`, `DataCell`, `EditableCell`, `ExpandableRow`, `ExpandRowButton`, `useSortableTable`, `useTableKeyboardNavigation`                                             |
| `@entur/expand`     | `Accordion`, `AccordionItem`, `ExpandablePanel`, `ExpandableText`, `ExpandableTextButton`, `ExpandArrow`                                                                                                                                 |
| `@entur/tab`        | `Tabs`, `TabList`, `Tab`, `TabPanels`, `TabPanel`                                                                                                                                                                                        |
| `@entur/travel`     | `TravelHeader`, `TravelTag`, `LegLine`, `LegBone`, `TravelLeg`, `TravelSwitch`                                                                                                                                                           |
| `@entur/loader`     | `Loader`, `Spinner`, `LoadingDots`, `SkeletonRectangle`, `SkeletonCircle`, `SkeletonWrapper`                                                                                                                                             |
| `@entur/chip`       | `ChoiceChip`, `ChoiceChipGroup`, `FilterChip`, `ActionChip`, `TagChip`                                                                                                                                                                   |
| `@entur/dropdown`   | `Dropdown`, `SearchableDropdown`, `MultiSelect`, `NativeDropdown`                                                                                                                                                                        |
| `@entur/datepicker` | `DatePicker`, `TimePicker`                                                                                                                                                                                                               |
| `@entur/fileupload` | `FileUpload`                                                                                                                                                                                                                             |
| `@entur/a11y`       | `SkipToContent`, `VisuallyHidden`                                                                                                                                                                                                        |

Common patterns: all imports are named exports. Buttons are polymorphic (`as="a"`). TextField variants: `"success"` | `"information"` | `"warning"` | `"negative"` (omit for default). Alert variants: `"information"` | `"success"` | `"warning"` | `"negative"`. Transport modes: `"rail"` | `"bus"` | `"metro"` | `"tram"` | `"ferry"` | `"plane"` | `"bicycle"` | `"walk"` + others.

---

## Detailed usage examples

Read below only when you need code examples for a specific component category.

---

## Buttons

Package: `@entur/button`

Use the right variant for the action's importance. Avoid multiple primaries in the same view — they compete for attention.

```tsx
import { PrimaryButton, SecondaryButton, TertiaryButton, NegativeButton, SuccessButton, IconButton, ButtonGroup } from '@entur/button';

// Primary — main call to action
<PrimaryButton onClick={handleSubmit}>Kjøp billett</PrimaryButton>

// Secondary — alternative actions
<SecondaryButton onClick={handleCancel}>Avbryt</SecondaryButton>

// Tertiary — low-emphasis, often in dense UIs
<TertiaryButton>Les mer</TertiaryButton>

// Destructive action
<NegativeButton onClick={handleDelete}>Slett</NegativeButton>

// Icon-only button — always provide aria-label
<IconButton aria-label="Lukk"><CloseIcon /></IconButton>

// Group related buttons
<ButtonGroup>
  <PrimaryButton>Bekreft</PrimaryButton>
  <SecondaryButton>Avbryt</SecondaryButton>
</ButtonGroup>
```

Polymorphic — renders as `<a>` when needed:

```tsx
<PrimaryButton as="a" href="/reiseplanlegger">
  Planlegg reise
</PrimaryButton>
```

---

## Typography

Package: `@entur/typography`

Use semantic heading levels (`Heading1`–`Heading6`) for document structure, not for visual sizing. Pair with `Paragraph`, `LeadParagraph`, `SmallText`, and `Label` for body content.

```tsx
import { Heading1, Heading2, Paragraph, LeadParagraph, SmallText, Label, SubLabel, Link } from '@entur/typography';

<Heading1>Finn din neste reise</Heading1>
<LeadParagraph>Søk blant tusenvis av avganger i Norge.</LeadParagraph>
<Paragraph>Bruk reiseplanleggeren for å finne beste rute.</Paragraph>
<SmallText>* Avgangstider kan avvike</SmallText>
<Label>Velg dato</Label>
<Link href="/hjelp">Trenger du hjelp?</Link>
```

Entur font: **Nationale** (licensed). In production apps, use the token-based font stack from `@entur/tokens`.

---

## Forms

Package: `@entur/form`

All form components are accessible by default. Always pair inputs with visible labels.

```tsx
import { TextField, TextArea, Checkbox, Radio, RadioGroup, Switch, Fieldset } from '@entur/form';

// Text input
<TextField
  label="E-postadresse"
  value={email}
  onChange={e => setEmail(e.target.value)}
  placeholder="navn@eksempel.no"
/>

// With validation feedback
<TextField
  label="Mobilnummer"
  value={phone}
  onChange={e => setPhone(e.target.value)}
  variant="negative"
  feedback="Ugyldig mobilnummer"
/>

// Textarea
<TextArea label="Kommentar" rows={4} />

// Checkbox
<Checkbox checked={accepted} onChange={e => setAccepted(e.target.checked)}>
  Jeg godtar vilkårene
</Checkbox>

// Radio group
<RadioGroup label="Reisemåte">
  <Radio value="tog">Tog</Radio>
  <Radio value="buss">Buss</Radio>
</RadioGroup>

// Toggle
<Switch checked={notifications} onChange={e => setNotifications(e.target.checked)}>
  Varsler på e-post
</Switch>
```

TextField `variant` values: `"success"` | `"information"` | `"warning"` | `"negative"` (omit for default)

---

## Alerts

Package: `@entur/alert`

```tsx
import { BannerAlertBox, SmallAlertBox, ToastProvider, useToast } from '@entur/alert';

// Banner (page-level messages)
<BannerAlertBox variant="information" title="Planlagt vedlikehold">
  Tjenesten vil være nede 22. april kl. 02–04.
</BannerAlertBox>

// Inline/small alert
<SmallAlertBox variant="negative">Reisen er ikke lenger tilgjengelig.</SmallAlertBox>

// Toast notifications — wrap app in provider
<ToastProvider>
  <App />
</ToastProvider>

// Use toast in any component
const { addToast } = useToast();
addToast({ title: 'Lagret!', variant: 'success' });
```

Variants: `"information"` | `"success"` | `"warning"` | `"negative"`

---

## Navigation

Package: `@entur/menu`

```tsx
import { SideNavigation, SideNavigationItem, SideNavigationGroup, BreadcrumbNavigation, BreadcrumbItem, Pagination, Stepper } from '@entur/menu';

// Sidebar nav
<SideNavigation>
  <SideNavigationItem href="/hjem" active>Hjem</SideNavigationItem>
  <SideNavigationGroup title="Reiser">
    <SideNavigationItem href="/reiser">Mine reiser</SideNavigationItem>
    <SideNavigationItem href="/bestillinger">Bestillinger</SideNavigationItem>
  </SideNavigationGroup>
</SideNavigation>

// Breadcrumbs
<BreadcrumbNavigation>
  <BreadcrumbItem href="/">Hjem</BreadcrumbItem>
  <BreadcrumbItem href="/reiser">Reiser</BreadcrumbItem>
  <BreadcrumbItem>Detaljer</BreadcrumbItem>
</BreadcrumbNavigation>

// Pagination
<Pagination
  currentPage={3}
  pageCount={10}
  onPageChange={setPage}
/>

// Step indicator
<Stepper activeIndex={1} steps={['Velg reise', 'Passasjerer', 'Betaling', 'Bekreftelse']} />
```

---

## Layout & Cards

Package: `@entur/layout`

```tsx
import { Contrast, NavigationCard, Badge, StatusBadge, Tag } from '@entur/layout';
import { GridContainer, GridItem } from '@entur/grid';

// Contrast section (dark background using Entur brand colors)
<Contrast>
  <Heading1>Planlegg reisen din</Heading1>
</Contrast>

// Responsive grid
<GridContainer>
  <GridItem small={12} medium={6} large={4}>
    <NavigationCard title="Tog" href="/tog" />
  </GridItem>
</GridContainer>

// Badges
<Badge>3</Badge>
<StatusBadge variant="success">Aktiv</StatusBadge>

// Tag chips for labeling
<Tag>Regional</Tag>
```

---

## Overlays

Package: `@entur/modal`

```tsx
import { Modal, ModalContent, Drawer } from '@entur/modal';
import { Tooltip, Popover } from '@entur/tooltip';

// Modal dialog
<Modal open={isOpen} onDismiss={() => setOpen(false)}>
  <ModalContent title="Bekreft kjøp" size="small">
    Er du sikker på at du vil kjøpe billetten?
  </ModalContent>
</Modal>

// Drawer (slides from side)
<Drawer title="Filter" open={drawerOpen} onDismiss={() => setDrawerOpen(false)}>
  <p>Filterinnstillinger</p>
</Drawer>

// Tooltip
<Tooltip placement="top" content="Vis priser inkl. mva.">
  <InfoIcon />
</Tooltip>
```

---

## Data Display

Package: `@entur/table`, `@entur/expand`, `@entur/tab`

```tsx
import { Table, TableHead, TableBody, TableRow, HeaderCell, DataCell } from '@entur/table';
import { Accordion, AccordionItem } from '@entur/expand';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@entur/tab';

// Table
<Table>
  <TableHead>
    <TableRow>
      <HeaderCell>Avgang</HeaderCell>
      <HeaderCell>Ankomst</HeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <DataCell>Oslo S 08:00</DataCell>
      <DataCell>Bergen 13:30</DataCell>
    </TableRow>
  </TableBody>
</Table>

// Accordion
<Accordion>
  <AccordionItem title="Regler for bagasje">
    Du kan ta med inntil 23 kg innsjekket bagasje.
  </AccordionItem>
</Accordion>

// Tabs
<Tabs>
  <TabList>
    <Tab>Avganger</Tab>
    <Tab>Ankomster</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>…avgangsliste…</TabPanel>
    <TabPanel>…ankomstliste…</TabPanel>
  </TabPanels>
</Tabs>
```

---

## Travel-specific

Package: `@entur/travel`

Specialized components for public transport UIs. Use these for any travel-related UI to ensure consistency with Entur's travel products.

```tsx
import { TravelHeader, TravelTag, LegLine, LegBone, TravelLeg, TravelSwitch } from '@entur/travel';

// Transport mode tags (colored by mode)
<TravelTag transport="rail">Tog</TravelTag>
<TravelTag transport="bus">Buss</TravelTag>
<TravelTag transport="metro">T-bane</TravelTag>

// Journey leg visualization
<TravelLeg>
  <LegBone direction="vertical" pattern="line" color="var(--standard-train)" />
</TravelLeg>
```

Transport modes: `"rail"` | `"bus"` | `"metro"` | `"tram"` | `"ferry"` | `"plane"` | `"bicycle"` | `"walk"` | `"mobility"` | `"cableway"` | `"funicular"` | `"helicopter"` | `"taxi"`

---

## Date & Time

Package: `@entur/datepicker`

```tsx
import { DatePicker, TimePicker } from '@entur/datepicker';

// Date picker
<DatePicker label="Reisedato" onChange={setDate} />

// Time picker
<TimePicker label="Avgangstid" onChange={setTime} />
```

---

## File Upload

Package: `@entur/fileupload`

```tsx
import { FileUpload } from '@entur/fileupload';

const [files, setFiles] = useState<File[]>([]);

<FileUpload
  label="Last opp vedlegg"
  accept=".pdf,.jpg,.png"
  files={files}
  onDrop={newFiles => setFiles(prev => [...prev, ...newFiles])}
  onDelete={file => setFiles(prev => prev.filter(f => f !== file))}
/>;
```

---

## Utility

```tsx
// Loading states
import { Loader, Spinner, SkeletonRectangle } from '@entur/loader';

<Loader>Laster avganger…</Loader>
<Spinner />
<SkeletonRectangle width="100%" height={40} />

// Chips for selection/filtering
import { ChoiceChip, ChoiceChipGroup, FilterChip, ActionChip, TagChip } from '@entur/chip';

<ChoiceChipGroup name="transportmode" value={selected} onChange={setSelected}>
  <ChoiceChip value="tog">Tog</ChoiceChip>
  <ChoiceChip value="buss">Buss</ChoiceChip>
</ChoiceChipGroup>

// Dropdown/select
import { Dropdown, SearchableDropdown, MultiSelect } from '@entur/dropdown';

<Dropdown
  label="Fra"
  items={stations}
  selectedItem={selectedStation}
  onChange={setSelectedStation}
/>
```

---

## Design Tokens & CSS Variables

# Entur Tokens & CSS Variables

Full token docs: https://linje.entur.no/tokens

Package: `@entur/tokens`

## Quick lookup

**Layer priority**: base → semantic (fallback) → primitive (last resort). For data visualisation use data tokens. For transport colors prefer base (supports color mode), transport is fallback.

### Token file formats

Each token set (base, semantic, data, transport, primitive) ships in three formats:

| Format   | Import                                 | Notes                                                                                         |
| -------- | -------------------------------------- | --------------------------------------------------------------------------------------------- |
| **CSS**  | `@entur/tokens/dist/base.css`          | Global import recommended — define once, use everywhere via CSS custom properties             |
| **SCSS** | `@entur/tokens/dist/base.scss`         | Import inside the `.scss` file that uses it                                                   |
| **JS**   | `import { base } from '@entur/tokens'` | No automatic dark/light mode switching — must manually select `base.light.*` or `base.dark.*` |

**Global import**: only `base.css` should be imported globally (in your root stylesheet or `App.tsx`). It supports light/dark color mode via `data-color-mode` attribute.

**On-demand imports**: import other token files in the specific files that need them:

```css
@import '@entur/tokens/dist/semantic.css'; /* fallback if base doesn't fit — no color mode support */
@import '@entur/tokens/dist/data.css'; /* data visualisation (charts/graphs) — auto-resolves to dark values inside data-color-mode="dark" */
@import '@entur/tokens/dist/transport.css'; /* transport mode colors — no automatic color mode, use base for transport colors when possible */
@import '@entur/tokens/dist/primitive.css'; /* raw hex — last resort for web, ok for graphics */
```

**SCSS imports** (use `@use` with namespace, not `@import`):

```scss
@use '@entur/tokens/dist/base.scss' as eds;
@use '@entur/tokens/dist/data.scss' as data;
```

**JS imports**:

```ts
import { colors, space, borderWidths, fontWeights } from '@entur/tokens';
import { base, semantic, transport, data } from '@entur/tokens';

// JS does not auto-switch color mode — select explicitly:
const bg = base.light.frame.default; // light mode
const bgDark = base.dark.frame.default; // dark mode
```

**Most-used tokens**:
| Purpose | Token | Value |
|---|---|---|
| Page bg | `--fill-background-standard-light` | `#ffffff` |
| Lavender 90 bg | `--fill-background-contrast-light` | `#181c56` |
| Primary fill | `--fill-primary-default-light` | `#181c56` |
| Coral accent | `--shape-highlight` | `#ff5959` |
| Body text | `--text-dark` | `#08091c` |
| Secondary text | `--text-subdued` | `#626493` |
| Border | `--stroke-neutral` | `#e3e6e8` |
| Success | `--fill-success-deep` | `#1a8e60` |
| Error | `--fill-negative-deep` | `#d31b1b` |
| Focus ring | `--stroke-focus-standard` | (= `--stroke-accent`) |

Type definitions in `@entur/tokens/dist/generated-js-objects/`.

---

## Full token reference

Read below only when you need the complete token list for a specific category.

---

## Semantic tokens (fallback)

Import `semantic.css` — these map to primitives but do not support automatic light/dark color mode switching. Use base tokens when possible.

```css
@import '@entur/tokens/dist/semantic.css';
```

### Fill / Backgrounds

```css
/* Backgrounds */
--fill-background-standard-light    /* #ffffff — default page bg */
--fill-background-standard-dark     /* #08091c — dark mode page bg */
--fill-background-tint-light        /* #f6f6f9 — subtle tint */
--fill-background-tint-dark         /* #141527 */
--fill-background-contrast-light    /* #181c56 — Entur Lavender 90 header/hero */
--fill-background-contrast-dark     /* #212233 */
--fill-background-subdued-light     /* #d9dae8 */
--fill-background-overlay-solid     /* #393a49 — modal backdrops */
--fill-background-overlay-transparent /* rgba — lighter overlay */

/* Primary (Entur Lavender 90) */
--fill-primary-default-light        /* #181c56 */
--fill-primary-hover-light          /* #393d79 */
--fill-primary-active-light         /* #11143c */
--fill-primary-default-contrast     /* #aeb7e2 — on dark bg */
--fill-primary-hover-contrast       /* #c7cdeb */

/* Secondary */
--fill-secondary-hover-light        /* #d9ddf2 */
--fill-secondary-active-light       /* #aeb7e2 */

/* Selected state */
--fill-selected-default-light       /* #f6f6f9 */
--fill-selected-hover-light         /* #eaeaf1 */

/* Status fills */
--fill-success-tint                 /* #9cd9c2 */
--fill-success-muted                /* #d0f1e3 */
--fill-success-deep                 /* #1a8e60 */
--fill-warning-tint                 /* #ffeeb3 */
--fill-warning-muted                /* #fff4cd */
--fill-negative-tint                /* #ff9494 */
--fill-negative-muted               /* #ffcece */
--fill-negative-deep                /* #d31b1b */
--fill-information-tint             /* #acd7f1 */
--fill-information-muted            /* #e1eff8 */
```

### Shape (icons, illustrations, decorative fills)

```css
--shape-accent                      /* #181c56 — primary brand */
--shape-light                       /* #ffffff */
--shape-dark                        /* #08091c */
--shape-subdued                     /* #626493 */
--shape-highlight                   /* #ff5959 — coral accent */
--shape-success                     /* #1a8e60 */
--shape-negative                    /* #d31b1b */
--shape-warning                     /* #ffca28 */
--shape-information                 /* #067eb2 */
--shape-neutral                     /* #6e6f73 */
--shape-disabled                    /* #515254 */
```

### Stroke (borders, dividers)

```css
--stroke-accent                     /* #181c56 */
--stroke-contrast                   /* #aeb7e2 */
--stroke-highlight                  /* #ff5959 — coral */
--stroke-light                      /* #ffffff */
--stroke-dark                       /* #b3b4bd */
--stroke-neutral                    /* #e3e6e8 */
--stroke-subdued                    /* #8284ab */
--stroke-success                    /* #1a8e60 */
--stroke-negative                   /* #d31b1b */
--stroke-warning                    /* #e9b10c */
--stroke-information                /* #067eb2 */
--stroke-focus-standard: var(--stroke-accent)
--stroke-focus-contrast: var(--stroke-contrast)
```

### Text

```css
--text-accent                       /* #181c56 — primary text */
--text-dark                         /* #08091c */
--text-light                        /* #ffffff */
--text-subdued                      /* #626493 — secondary text */
--text-highlight                    /* #aeb7e2 — on dark bg */
--text-neutral                      /* #6e6f73 */
--text-disabled                     /* #515254 */
--text-negative                     /* #d31b1b */
--text-success                      /* #1a8e60 */
```

---

## Spacing tokens

```css
@import '@entur/tokens/dist/primitive.css';

/* Size scale (rem) */
--size-0:   0rem
--size-1:   0.0625rem   /* 1px */
--size-2:   0.125rem    /* 2px */
--size-3:   0.25rem     /* 4px */
--size-4:   0.375rem    /* 6px */
--size-5:   0.5rem      /* 8px */
--size-6:   0.75rem     /* 12px */
--size-7:   0.875rem    /* 14px */
--size-8:   1rem        /* 16px */
--size-9:   1.25rem     /* 20px */
--size-10:  1.5rem      /* 24px */
--size-11:  1.75rem     /* 28px */
--size-12:  2rem        /* 32px */
--size-13:  2.25rem     /* 36px */
--size-14:  2.5rem      /* 40px */
--size-16:  3rem        /* 48px */
--size-19:  4rem        /* 64px */
--size-21:  5rem        /* 80px */
--size-23:  6rem        /* 96px */
```

---

## Base color tokens (light/dark mode)

Import `base.css` — these respond to `data-color-mode` attribute.

```css
@import '@entur/tokens/dist/base.css';
```

```css
/* In [data-color-mode='light'] / :root */
--basecolors-frame-default          /* white bg */
--basecolors-frame-contrast         /* Lavender 90 bg (#181c56) */
--basecolors-frame-tint             /* subtle tint (#f6f6f9) */
--basecolors-frame-elevated         /* card/elevated surface */
--basecolors-shape-accent           /* primary icon/shape color */
--basecolors-shape-highlight        /* coral accent */
--basecolors-text-accent            /* primary text color */
--basecolors-text-subdued           /* secondary text */
--basecolors-stroke-default         /* border color */
--basecolors-stroke-focus-standard  /* keyboard focus ring */
```

Transport mode base tokens (also in base.css):

```css
--basecolors-shape-train-default    /* #00367f */
--basecolors-shape-train-contrast   /* #42a5f5 */
--basecolors-shape-bus-default      /* #c5044e */
--basecolors-shape-bus-contrast     /* #ff6392 */
--basecolors-shape-metro-default    /* #bf5826 */
--basecolors-shape-tram-default     /* #78469a */
--basecolors-shape-ferry-default    /* #0c6693 */
/* ...etc for all modes */
```

---

## Transport color tokens

For transport mode coloring. Import `transport.css`:

```css
@import '@entur/tokens/dist/transport.css';
```

Tokens follow the pattern: `--{variant}-{mode}` where variant is `standard`, `contrast`, or `dark`.

```css
/* Standard (use on light backgrounds, meets contrast) */
--standard-train: #00367f
--standard-bus: #c5044e
--standard-bus-regional: #427500
--standard-metro: #bf5826
--standard-tram: #78469a
--standard-ferry: #0c6693
--standard-carferry: #0c6693
--standard-plane: #800664
--standard-bicycle: #0d827e
--standard-citybike: #0d827e
--standard-mobility: #0d827e
--standard-cableway: #78469a
--standard-funicular: #78469a
--standard-helicopter: #800664
--standard-taxi: #3d3e40
--standard-walk: #8d8e9c
--standard-airportlinkbus: #800664
--standard-airportlinkrail: #800664

/* Contrast (use on dark/colored backgrounds) */
--contrast-train: #42a5f5
--contrast-bus: #ff6392
--contrast-bus-regional: #b8db48
--contrast-metro: #f08901
--contrast-tram: #b482fb
--contrast-ferry: #6fdfff
--contrast-plane: #fbafea
--contrast-bicycle: #00dbb6
--contrast-walk: #9ea0bd
--contrast-taxi: #ffe082
```

Transparent variants available for overlays, e.g. `--standard-bus-transparent: #c5044e26`.

---

## Data visualization tokens

For charts, graphs, and data displays. Import `data.css`. These respond to `data-color-mode`.

```css
@import '@entur/tokens/dist/data.css';
```

Use in priority order (weight more of the first colors):

```css
/* Light mode */
--standard-blue: #181c56      /* 1st — use most */
--standard-coral: #ff5959     /* 2nd */
--standard-jungle: #0ea2a8    /* 3rd */
--standard-azure: #2f98fa     /* 4th */
--standard-lavender: #8692ca  /* 5th */
--standard-peach: #ca825b     /* 6th */
--standard-spring: #57a257    /* 7th */
--standard-lilac: #8e57e3     /* 8th — use least */

/* Contrast variants (for dark backgrounds) */
--contrast-blue: #6c6eb7
--contrast-coral: #ff5959
--contrast-jungle: #0fc2b3
--contrast-azure: #64b2fb
--contrast-lavender: #aeb7e2
--contrast-peach: #ffbf9e
--contrast-spring: #7bc00b
--contrast-lilac: #ea8bea
```

All data colors meet WCAG 3:1 contrast for graphical elements and are tested for colorblind accessibility.

---

## Primitive palette (raw colors)

Direct hex values — no semantic meaning. Use as last resort. Import `primitive.css`.

Key Entur brand colors:

```css
/* Lavender (primary brand) */
--lavender-90: #181c56   /* primary Lavender 90 */
--lavender-80: #262f7d
--lavender-70: #3b46ab
--lavender-60: #5a68c4
--lavender-40: #aeb7e2   /* light lavender */

/* Blue */
--blue-90: #393d79
--blue-10: #f6f6f9       /* very light tint */

/* Coral (brand accent) */
--coral-40: #ff5959      /* primary coral */
--coral-30: #ff9494
--coral-60: #d31b1b      /* dark/error coral */

/* Ebony (dark mode) */
--ebony-100: #08091c     /* dark bg */
--ebony-90: #212233

/* Grey */
--grey-70: #6e6f73       /* body text */
--grey-30: #e3e6e8       /* borders */

/* Mint (success) */
--mint-60: #1a8e60
--mint-40: #5ac39a

/* Sky (information) */
--sky-50: #067eb2
--sky-30: #64b3e7

/* Canary (warning) */
--canary-60: #ffca28
--canary-40: #ffe082
```

---

## Colors

# Entur Color System

Full docs: https://linje.entur.no/identitet/verktoykassen/farger

## The core principle

Blue, white, and coral are Entur's main colors and should always be present. Coral is weighted low — it's a detail color used for accents, often just in the logo. Secondary colors add depth and variety but never dominate.

**Digital surfaces**: lean and clean. Blue and white dominate, coral reinforces the brand. The design serves the content — don't let color compete with information.

**Print**: more room to experiment. Core colors must still anchor the design. Typography can be used as a graphic element.

---

## Brand color palette

### Primary colors (always include these)

| Color           | Hex       | Usage                                      |
| --------------- | --------- | ------------------------------------------ |
| **Lavender 90** | `#181c56` | Primary backgrounds, headers, buttons      |
| **White**       | `#ffffff` | Page background, text on dark              |
| **Coral**       | `#ff5959` | Accent, highlights, call-to-action details |

### Secondary colors (decorative, add depth)

| Name        | Hex       | Notes                          |
| ----------- | --------- | ------------------------------ |
| Lavender 40 | `#aeb7e2` | Light lavender, good for tints |
| Blue 10     | `#f6f6f9` | Subtle page tint               |
| Blue 30     | `#d9dae8` | Subdued surfaces               |
| Mint 40     | `#5ac39a` | Success states                 |
| Sky 30      | `#64b3e7` | Information states             |
| Canary 40   | `#ffe082` | Warning states                 |

---

## Color weighting for digital

The balance matters — small shifts change the feel significantly:

1. **Blue dominant** — large areas (nav, hero, headers)
2. **White dominant** — content areas, cards, forms
3. **Coral minimal** — details, accents, focus points (never large fills)

Secondary colors support individual elements and create depth. They should never overpower blue or white.

---

## Light/dark mode

Base tokens and semantic tokens support both modes. Apply `data-color-mode="dark"` or `data-color-mode="light"` to a container:

```html
<div data-color-mode="dark">
  <!-- Lavender 90 background context — tokens auto-shift -->
</div>
```

Dark mode uses the **Ebony** palette as backgrounds:

- Dark page bg: `#08091c` (Ebony 100)
- Dark tint: `#141527` (Ebony 95)
- Dark contrast: `#212233` (Ebony 90)

---

## CSS tokens to use

Always use tokens over raw hex values. Prefer base tokens (`@entur/tokens/dist/base.css`) — they support light/dark mode automatically. Use semantic tokens (`@entur/tokens/dist/semantic.css`) as fallback when base tokens don't fit:

```css
/* Backgrounds */
var(--fill-background-standard-light)   /* white */
var(--fill-background-contrast-light)   /* #181c56 Lavender 90 */
var(--fill-background-tint-light)       /* #f6f6f9 */

/* Shapes / fills */
var(--shape-accent)                      /* primary Lavender 90 */
var(--shape-highlight)                   /* coral */

/* Text */
var(--text-accent)                       /* primary text */
var(--text-subdued)                      /* secondary text */
var(--text-light)                        /* white text on dark */

/* Strokes */
var(--stroke-accent)                     /* primary border */
var(--stroke-highlight)                  /* coral border */
var(--stroke-neutral)                    /* subtle divider */
```

---

## Status colors

For feedback states in UI:

```css
/* Success */
var(--fill-success-tint)    /* #9cd9c2 — bg */
var(--shape-success)        /* #1a8e60 — icon */
var(--text-success)         /* #1a8e60 — text */

/* Warning */
var(--fill-warning-tint)    /* #ffeeb3 */
var(--shape-warning)        /* #ffca28 */

/* Negative/error */
var(--fill-negative-tint)   /* #ff9494 */
var(--shape-negative)       /* #d31b1b */
var(--text-negative)        /* #d31b1b */

/* Information */
var(--fill-information-tint) /* #acd7f1 */
var(--shape-information)    /* #067eb2 */
```

---

## Accessibility — contrast requirements

- **Text on background**: minimum 4.5:1 (normal text), 3:1 (large text / 18px+ or 14px bold)
- **Graphical elements**: minimum 3:1

All Entur semantic tokens are designed to meet these ratios within their intended pairings. Don't pair tokens from opposite contexts (e.g. `--text-light` on a white background).

Use the contrast checker at https://linje.entur.no/universell-utforming/kontrastsjekker to verify custom combinations.

---

## Typography

# Entur Typography

Full docs: https://linje.entur.no/identitet/verktoykassen/typografi

## Primary typeface: Nationale

Nationale is Entur's brand typeface — a modern, geometric sans-serif with excellent legibility at all sizes. It works for both headings and body text.

**License**: Nationale is a licensed font.

- **Entur employees**: contact Markedsføring to get access to the font.
- **External collaborators**: purchase your own license at [playtype.com](https://playtype.com/index.php?q=font/nationale).

### In digital products

Use only **two weights** in digital interfaces:

- **Medium (500)** — body text, ingress, UI text
- **Demibold (600)** — headings, emphasis

Restraint in weight usage creates a cleaner hierarchy. Avoid mixing more than two weights in a single view unless using typography as a graphic element.

---

## Fallback font: Arial

Arial is the **support font** for all contexts where Nationale is not available (e.g. Office documents, emails, external communications). Most people should use Arial unless they have a Nationale license.

---

## Typography in development

Use `@entur/typography` React components. They apply the correct font, weight, and size based on semantic role.

```tsx
import { Heading1, Heading2, Paragraph, LeadParagraph, Label, SmallText, Link } from '@entur/typography';

<Heading1>Finn din neste reise</Heading1>
<LeadParagraph>Søk blant tusenvis av avganger over hele landet.</LeadParagraph>
<Paragraph>Reiseplanleggeren hjelper deg å finne beste rute.</Paragraph>
<Label>Avreisestad</Label>
<SmallText>* Avgangstider kan avvike fra planen</SmallText>
```

Components: `Heading1`–`Heading6`, `Paragraph`, `LeadParagraph`, `SmallText`, `Label`, `SubLabel`, `Link`, `StrongText`, `EmphasizedText`, `Blockquote`, `ListItem`, `UnorderedList`, `NumberedList`, `CodeText`, `PreformattedText`, `SubParagraph`

Full component docs: https://linje.entur.no/komponenter/ressurser/typography

---

## Typography as a graphic element

In brand contexts (print, presentations, hero sections), Nationale is also used as a pure graphic element. Large, bold type creates visual contrast and energy. This is distinct from UI typography and is appropriate only when using a licensed copy of Nationale and in marketing/identity contexts.

---

## Hierarchy guidelines

Good typographic hierarchy makes content scannable:

1. One dominant heading per section
2. Lead paragraph introduces the section if needed
3. Body text is the default — avoid unnecessary size variation
4. Labels and small text for metadata, captions, form labels
5. Use `StrongText` and `EmphasizedText` sparingly for inline emphasis

Don't create hierarchy through color alone — combine size, weight, and spacing.

---

## Font loading in apps

The `@entur/tokens` package provides the design tokens. Ensure token styles are imported globally before any component styles:

```css
@import '@entur/tokens/dist/semantic.css';
```

---

## Visual Identity

# Entur Visual Identity

Full identity docs: https://linje.entur.no/identitet

## Brand positioning

Entur is Norway's national public transport data platform. The visual identity reflects:

- **Clarity** — information is the hero; design doesn't compete with content
- **Contrast** — the tension between old and new Norway, urban and rural transit
- **Trust** — reliable, professional, accessible to all

---

## Core graphic elements

### Colors

The Lavender 90–white–coral triad is the visual foundation. See `colors.md` for full guidance.

### Typography

Nationale is the brand typeface. Clean weight hierarchy, minimal variation. See `typography.md`.

### Logo

- The Entur logotype is the primary brand mark
- In digital products, the logo appears on the Lavender 90 (`#181c56`) Contrast component or on white
- The animated logo (opening motion) is the hero of Entur's brand storytelling

---

## Layout principles for digital surfaces

- **Content first** — design frames content, doesn't decorate it
- **Blue and white structure** — use `Contrast` sections (Lavender 90 bg) for headers and hero areas; white for content
- **Coral as punctuation** — one coral element per view maximum (focus point, CTA, accent)
- **Generous white space** — Entur's digital surfaces are calm, not busy

```tsx
import { Contrast } from '@entur/layout';

// Lavender 90 header section
<Contrast>
  <Heading1>Planlegg reisen din</Heading1>
  <PrimaryButton>Søk etter avganger</PrimaryButton>
</Contrast>

// White content section below
<section>
  <Heading2>Populære ruter</Heading2>
  ...
</section>
```

---

## Animation

Entur uses animation as a storytelling device — not decoration. The animated logo sequence is the primary motion identity.

**For UI animations**:

- Use motion to communicate state changes, not to entertain
- Transitions should be fast (150–300ms) and purposeful
- Avoid animation that delays the user from their task
- Animated illustrations are available in the illustration library (requires Google Drive access via Entur)

Animation assets: available at Google Drive (internal access required — contact the design system team via #talk-designsystem on Slack).

---

## Illustrations

Entur has a custom illustration library developed with SDG. Illustrations can be used across all Entur surfaces.

**When to use**:

- Onboarding / empty states
- Marketing materials
- Explanatory content

**Not** for dense information interfaces — keep illustrations out of data-heavy views.

Illustration library access: requires Google Drive access (internal Entur use).

---

## Presentations and documents

For programmatic presentation generation (python-pptx), see `presentations-pptx.md` and `catalog.json` in this references directory.

### Templates

Three official formats are available — always start from one of these:

| Format               | Source                                                                                      | Use when                                     |
| -------------------- | ------------------------------------------------------------------------------------------- | -------------------------------------------- |
| PowerPoint (.pptx)   | https://linje.entur.no/identitet/maler/presentasjon                                         | Sharing with external parties, offline use   |
| Google Slides        | Available in the shared Entur Google Drive                                                  | Internal collaboration, real-time editing    |
| Figma design toolkit | https://www.figma.com/design/ChQfEl7lEhiyaLJSGfBuoG/Design-verkt%C3%B8ykasse?node-id=6-2136 | Designing new slide layouts or visual assets |

Never build slides from scratch. The templates have correct fonts, colors, logo placement, and slide masters.

---

### Slide layout system

The template provides these slide types — use each for its intended purpose:

**Cover / title slide** — Lavender 90 (`#181c56`) background, coral title text, white subtitle, Entur logo bottom-right. First slide only.

**Section divider** — Lavender 90 background, small coral label above a large white heading. Separates major sections.

**Content slide (white)** — White background, navy text. Small coral accent bar top-left corner. Entur logo bottom-right. Default for most content.

**Split slide** — Half Lavender 90 / half white. Title on the dark panel, content on the light panel (or vice versa). Good for two-column contrast.

**Photo slide** — Full-bleed photo with text overlay. Use sparingly for emotional impact.

**Agenda slide** — White background, minimal layout. Bullet list of agenda items.

---

### Visual rules

- **Coral accent bar** — appears in the top-left corner of white slides. Do not remove or reposition it; it's a fixed brand mark, not decorative.
- **Logo placement** — always bottom-right. White version on dark backgrounds, dark version on white backgrounds.
- **One coral element per slide** — if coral is already used for the accent bar, don't add coral text or shapes on the same slide.
- **Lavender 90 for structure, white for content** — section openers and cover use dark bg; working content uses white.
- **Typography** — Nationale for headings and emphasis. Arial as fallback if Nationale is unavailable (Nationale requires a license). Never mix decorative typefaces.
- **Text weight** — titles bold or semi-bold; body regular weight. Avoid italic except for fine print.

---

### Data visualization in presentations

On dark (Lavender 90) slides, use contrast data colors (see `data-visualization.md`):

- Donut/ring charts: Azure (`#64b2fb`) as primary fill, Lavender (`#aeb7e2`) for secondary/empty arc
- Text labels: white
- Background: Lavender 90 (`#181c56`)

On white slides, use standard data colors starting with Blue then Coral.

Always follow the full color order from `data-visualization.md` when adding multiple data series.

For the Google Slides data visualization resource (chart templates, donut charts, bar charts, KPI layouts):  
https://docs.google.com/presentation/d/1-iX6nB5aShZ-LByEn9UlN1bjxLWkxTtoE5pfsbypME4/edit

---

## What to avoid

- Purple gradients or trendy colors outside the palette
- Busy backgrounds competing with content
- Multiple coral elements on a single page
- Mixing the Entur palette with other brand palettes without clear separation
- Comic or playful illustration styles that conflict with Entur's professional tone

---

## Accessibility Patterns

# Entur Accessibility Patterns

Full docs: https://linje.entur.no/universell-utforming

## Package: @entur/a11y

```bash
yarn add @entur/a11y
```

```css
@import '@entur/a11y/dist/styles.css'; /* import first — before other @entur packages */
```

---

## SkipToContent

Allows keyboard users to skip past navigation and jump directly to main content. This is a WCAG 2.1 requirement (2.4.1 Bypass Blocks).

Place it as the **first focusable element** in the page. It's visually hidden until focused.

```tsx
import { SkipToContent } from '@entur/a11y';

// In your App or layout component — must be first in DOM
<SkipToContent>Hopp til hovedinnhold</SkipToContent>

<header>…nav…</header>

<main id="main-content">  {/* mainId prop default is "main-content" */}
  …
</main>
```

Props:

- `children` — the visible link text when focused (use Norwegian: "Hopp til hovedinnhold")
- `mainId` — ID of the main content element, defaults to `"main-content"`

Custom target ID:

```tsx
<SkipToContent mainId="content">Hopp til innhold</SkipToContent>
<main id="content">…</main>
```

---

## VisuallyHidden

Hides content visually while keeping it readable by screen readers. Use for supplementary context that sighted users get from visual layout but screen reader users need explicitly.

```tsx
import { VisuallyHidden } from '@entur/a11y';

// Add screen-reader-only context to an icon button
<button onClick={handleClose}>
  <CloseIcon aria-hidden="true" />
  <VisuallyHidden>Lukk dialog</VisuallyHidden>
</button>

// Clarify a standalone number
<span>
  3 <VisuallyHidden>uleste varsler</VisuallyHidden>
</span>

// Different element type
<VisuallyHidden as="p">
  Tabellen viser avganger sortert etter tid.
</VisuallyHidden>
```

Props:

- `as` — element type, defaults to `"span"`
- `children` — content for screen readers

---

## Form accessibility patterns

All `@entur/form` components handle labeling automatically. Always pass a `label` prop — never rely on `placeholder` alone:

```tsx
// Correct — label always visible
<TextField label="E-postadresse" placeholder="navn@eksempel.no" />

// Never do this — placeholder vanishes on input
<TextField placeholder="E-postadresse" /> // no label!
```

For custom validation, use the `feedback` and `variant` props:

```tsx
<TextField
  label="Mobilnummer"
  variant="negative"
  feedback="Ugyldig format. Bruk 8 siffer."
/>
```

The `feedback` prop renders inline validation text near the field, paired with visual `variant` styling.

For grouping related fields:

```tsx
import { Fieldset } from '@entur/form';

<Fieldset label="Reisedato">
  <DatePicker label="Fra" />
  <DatePicker label="Til" />
</Fieldset>;
```

---

## Semantic HTML patterns

Use structural HTML elements — screen readers navigate by landmarks:

```html
<header><!-- site header / top nav --></header>
<nav aria-label="Hovedmeny"><!-- navigation --></nav>
<main>
  <!-- primary content -->
  <section aria-labelledby="section-heading">
    <!-- thematic grouping -->
  </section>
  <aside><!-- supplementary content --></aside>
</main>
<footer><!-- page footer --></footer>
```

For interactive components not using native elements:

- Use ARIA roles: `role="dialog"`, `role="alert"`, `role="status"`, `role="tablist"`
- All interactive ARIA elements need keyboard support and focus management
- The `@entur/*` components handle this internally — use them rather than rolling your own

---

## Keyboard navigation

All `@entur/*` interactive components support full keyboard navigation out of the box:

- Tab to navigate, Enter/Space to activate
- Arrow keys for composite widgets (tabs, dropdowns, radio groups)
- Escape to close overlays

If building custom interactive elements:

- Ensure all functionality is reachable with Tab
- Visible focus ring is required (never `outline: none` without a replacement)
- Modal dialogs must trap focus inside while open

---

## Color contrast in code

Entur's semantic tokens are tested for correct contrast. When using raw hex values or custom styles:

- Text on background: 4.5:1 minimum (normal), 3:1 (large 18px+ or 14px bold)
- Graphical elements (icons, borders): 3:1 minimum

Contrast checker: https://linje.entur.no/universell-utforming/kontrastsjekker

---

## ARIA live regions

For dynamic content updates (alerts, toast notifications, results):

```tsx
// Use ToastProvider from @entur/alert for toast messages
// For custom live regions:
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// For urgent announcements (errors):
<div role="alert">
  {errorMessage}
</div>
```

---

## Images and icons

```tsx
// Informative image
<img src="…" alt="Togavgang fra Oslo S til Bergen, mandag 08:00" />

// Decorative image (hidden from screen readers)
<img src="…" alt="" role="presentation" />

// Informative icon — always label
<TrainIcon aria-label="Tog" />

// Decorative icon with adjacent text
<TrainIcon aria-hidden="true" />
<span>Tog</span>
```

---

## Page Index

All pages on linje.entur.no, grouped by category. Use these URLs to link to specific documentation.

## Resources

### Workshopmaler

- [Pre Mortem](https://linje.entur.no/ressurser/workshopmaler/pre-mortem): Et verktøy for å oppdage og håndtere risiko før man leverer et initiativ.
- [OODA-loop](https://linje.entur.no/ressurser/workshopmaler/ooda-loop): En modell for å ta raske og informerte beslutninger i komplekse situasjoner.
- [Retro](https://linje.entur.no/ressurser/workshopmaler/retro): En retro er et fast møte der teamet reflekterer over det som har fungert bra og hva som kan forbedres.
- [Brukerhistoriekart](https://linje.entur.no/ressurser/workshopmaler/brukerhistoriekart): En metode for å planlegge leveranser og prioritere funksjoner basert på brukerverdi.
- [Team Canvas](https://linje.entur.no/ressurser/workshopmaler/team-canvas): En metode å støtte et team i å snakke om samarbeid og i å sette et felles mål.
- [Aktørkart](https://linje.entur.no/ressurser/workshopmaler/aktorkart): En metode for å kartlegge aktører som blir berørt av et prosjekt
- [Tjenestekart](https://linje.entur.no/ressurser/workshopmaler/tjenestekart): En metode for å kartlegge hele tjenestereisen – fra brukerens handlinger til interne ledd.
- [Forretningsmodell](https://linje.entur.no/ressurser/workshopmaler/forretningsmodell): En metode for å sette opp en forretningsmodell for hva teamet/området/bedriften din skal gjøre i en matrise.
- [MoSCoW-analyse](https://linje.entur.no/ressurser/workshopmaler/moscow-analyse): En metode for å kartlegge aktører som blir berørt av et prosjekt
- [Intervjukort](https://linje.entur.no/ressurser/workshopmaler/intervjukort): Et verktøy for rask oppsummering av brukerinnsikt
- [Hypotesekort](https://linje.entur.no/ressurser/workshopmaler/hypotesekort): Et verktøy for å formulere, teste og måle hypoteser i produktutvikling.
- [Verdiforslag](https://linje.entur.no/ressurser/workshopmaler/verdiforslag): En metode for å avdekke kundebehov og utvikle produkter/tjenester som skaper verdi.
- [Brukerreisekart](https://linje.entur.no/ressurser/workshopmaler/brukerreisekart): Et verktøy for å formulere, teste og måle hypoteser i produktutvikling.

### Metoder

- [Relasjonssortering](https://linje.entur.no/ressurser/metoder/relasjonssortering): En metode for å organisere ideer og informasjon i grupper.
- [Hvordan kan vi?](https://linje.entur.no/ressurser/metoder/hvordan-kan-vi): En metode for å omformulere problemer til inspirerende spørsmål og muligheter.

### Insights

- [Designsysteminnsikt 2024](https://linje.entur.no/ressurser/innsikt/designsysteminnsikt-2024): Hvordan teamene opplever og bruker designsystemet i praksis

### Oversikt

- [Metoder og maler](https://linje.entur.no/ressurser): Entur Linje samler metoder og maler for enklere samarbeid og bedre produktutvikling.

## Brand Identity

### Verktøykassen

- [Foto](https://linje.entur.no/identitet/verktoykassen/foto): Dette er vår overordnet bildestil som skal kommunisere våre verdier og Enturs personlighet.
- [Ikoner](https://linje.entur.no/identitet/verktoykassen/ikoner): Gir visuell kontekst og forbedrer brukervennligheten
- [Co-branding](https://linje.entur.no/identitet/verktoykassen/co-branding): Her finner du info om hvordan du kan kombinere en partner sitt brand med Entur sitt.
- [EN … TUR](https://linje.entur.no/identitet/verktoykassen/en-tur): Vi åpner logoen for å gi plass til innholdet.
- [Grafiske elementer](https://linje.entur.no/identitet/verktoykassen/grafiske-elementer): Typografi, strek og mønster er de bærende grafiske elementene i identiteten.
- [Logo](https://linje.entur.no/identitet/verktoykassen/logo): Streken i logoen setter fokus på EN og det som gjør oss unike. Streken er et symbol på innholdet i sin mest minimalistiske form.

### Introduction

- [Stil og tone](https://linje.entur.no/identitet/introduksjon/stil-og-tone)
- [Våre verdier](https://linje.entur.no/identitet/introduksjon/vare-verdier)
- [Merkevareplattform](https://linje.entur.no/identitet/introduksjon/merkevareplattform): Vi ønsker at mål, visjon og verdier til Entur skal være synlige og tilstede i brukeropplevelsen til våre kunder.
- [Et gjenkjennelig uttrykk](https://linje.entur.no/identitet): En merkevare kommer først til live når den skaper meningsfulle og minneverdige opplevelser.

### Maler

- [E-post signatur](https://linje.entur.no/identitet/maler/e-post-signatur): Her ser du hvordan signaturer skal se ut i e-postutsendelser.
- [Word-maler](https://linje.entur.no/identitet/maler/word-maler): Her finner du Entur's dokumentmaler som skal brukes ved opprettelse av ny dokument som brevark, møtereferat, notat, rapport og rutine.
- [Visittkort ](https://linje.entur.no/identitet/maler/visittkort-): Her finner du malen som inneholder det du trenger for å lage nye visittkort.
- [Skjermbakgrunn](https://linje.entur.no/identitet/maler/skjermbakgrunn): Tilpass skrivebordsbakgrunnen (bakgrunnsbilde) med et bilde av Enturs visuelle profil.
- [Presentasjon](https://linje.entur.no/identitet/maler/presentasjon): Her finner du Entur's powerpointmal som skal brukes til presentasjoner i Entur.

### Verktoykassen

- [Animasjon](https://linje.entur.no/identitet/verktoykassen/animasjon): Animasjon brukes som et historiefortellende virkemiddel i identiteten. Vi åpner logoen, viser kontrastene i kollektiv-Norge og lar innholdet stå sentralt.
- [Datavisualisering](https://linje.entur.no/identitet/verktoykassen/datavisualisering): En introduksjon til fargepaletten som skal benyttes i datavisualisering.
- [Farger](https://linje.entur.no/identitet/verktoykassen/farger): Fargepaletten er et viktig grafisk virkemiddel i identiteten vår. Det er viktig at fargene brukes riktig og med omhu, for å oppnå et gjenkjennelig uttrykk.
- [Illustrasjoner](https://linje.entur.no/identitet/verktoykassen/illustrasjoner): Det er utviklet et eget illustrasjonsbibliotek for Entur i samarbeid med SDG. Illustrasjonene kan brukes på alle type flater i Entur.
- [Typografi](https://linje.entur.no/identitet/verktoykassen/typografi): Typografi er en essensiell del av Enturs identitet og brukergrensesnitt for sikre god lesbarhet og skape gode brukeropplevelser.

## Kom i gang

### Introduction

- [Introduksjon](https://linje.entur.no/kom-i-gang): Entur Linje er et system for å opprettholde visuell konsistens og kvalitet i Entur sine løsninger. Det inneholder alt som er felles på tvers av team og produkter og som gir verdi å dele i Entur.
- [Arbeidskultur](https://linje.entur.no/kom-i-gang/introduksjon/arbeidskultur): Entur består av mange team som utvikler løsninger for ulike typer kunder – og ikke minst for hverandre. Derfor er det viktig med retningslinjer for hvordan vi ønsker å jobbe.

### For designere

- [Designprosess](https://linje.entur.no/kom-i-gang/for-designere/designprosess): I denne guiden viser vi deg vår designprosess og hvordan vi jobber med følgende verktøy når vi designer til digitale flater.
- [Brukerhistorier](https://linje.entur.no/kom-i-gang/for-designere/brukerhistorier): Brukerhistorier er et format for å beskrive oppgaver som vektlegger oppgavens verdi og akseptkriterier. De vil gi designere, produkteiere, utviklere og testere en felles forståelse av oppgaven.

## Components

### Oversikt

- [Komponenter](https://linje.entur.no/komponenter): Entur Linje har et komplett komponentbibliotek som lar deg lage brukergrensesnitt på en rask og universelt utformet måte.

### Buttons

- [Icon button](https://linje.entur.no/komponenter/knapper/icon-button) (`@entur/button`): Ikonknapp er en knapp med ikon, og bør som hovedregel kombineres med tekst/label for å sikre universell utforming. Ikon-only skal kun brukes med aria-label og i tilfeller der ikonet er tydelig og allment forstått.
- [Button](https://linje.entur.no/komponenter/knapper/button) (`@entur/button`): Knapper lar brukerne gjøre handlinger og ta valg med et klikk.
- [Chip](https://linje.entur.no/komponenter/knapper/chip) (`@entur/chip`): Chips er små avrundede knapper som eksisterer i ulike typer; Action chips og Choice chips (med eller uten ikon), samt Filter chips og tags.
- [FloatingButton](https://linje.entur.no/komponenter/knapper/floatingbutton) (`@entur/button`): En flytende handlingsknapp (FAB) er en sirkulær form med et ikon i midten som flyter over brukergrensesnittet.
- [SquareButton](https://linje.entur.no/komponenter/knapper/squarebutton) (`@entur/button`): Kvadratiske knapper består av et ikon og et tilhørende label. Knappen kan benyttes til handlinger som Legg til, Last ned, Last opp osv.

### Ressurser

- [Typography](https://linje.entur.no/komponenter/ressurser/typography/beta) (`@entur/typography`): Komplett guide til Entur sine nye typografiske komponenter. Nå med et fleksibelt og fremtidsrettet API.
- [Grid](https://linje.entur.no/komponenter/ressurser/grid) (`@entur/grid`): Grid hjelper deg og plassere elementer med jevn rytme, og forenkler responsivitet på forskjellige flater.
- [Changelog](https://linje.entur.no/komponenter/ressurser/changelog): Vi gjør kontinuerlige forbedringer i EDS. Her vil du finne en oppsummering av hva som har blitt lansert oppført etter dataoen vi fullførte hver endring.
- [Typography](https://linje.entur.no/komponenter/ressurser/typography) (`@entur/typography`): Oversikt over Entur sine typografiske komponenter
- [Tilgjengelighet](https://linje.entur.no/komponenter/ressurser/tilgjengelighet) (`@entur/a11y`): Entur Linje er utviklet for å være universelt utformet. Det betyr at det skal kunne fungere for alle. Her finner du noen ekstra komponenter for å forenkle dette arbeidet i løsningene våre også.
- [Icons](https://linje.entur.no/komponenter/ressurser/icons) (`@entur/icons`): Ikoner gir visuell kontekst som blir brukt for å representere handlinger og forbedrer brukervennligheten.

### Feedback

- [Alert](https://linje.entur.no/komponenter/feedback/alert) (`@entur/alert`): Varsler brukes for å fange brukerens oppmerksomhet og inneholder korte viktige meldinger som de bør ta hensyn til.
- [Badge](https://linje.entur.no/komponenter/feedback/badge) (`@entur/layout`): Badge brukes for å indikere status eller informere om elementer som kan kreve brukerens oppmerksomhet og som de bør ta hensyn til.
- [Copyable text](https://linje.entur.no/komponenter/feedback/copyable-text) (`@entur/alert`): Copyable text er en knapp som kopierer innholdet dens til utklippstavlen.
- [Loader](https://linje.entur.no/komponenter/feedback/loader) (`@entur/loader`): Loader er en visuell tilbakemelding som indikerer at lasting av innhold og data er i prosess.
- [Popover](https://linje.entur.no/komponenter/feedback/popover) (`@entur/tooltip`): Popover er en flytende boks for å vise ekstra kontekstuell informasjon, interaksjoner eller innhold på flere linjer.
- [Skeleton](https://linje.entur.no/komponenter/feedback/skeleton) (`@entur/loader`): Skeletons er placeholdere som visuelt kommuniserer at deler av innholdet er i ferd med å laste inn og hvordan innholdsoppsettet vil se ut.
- [Tooltip](https://linje.entur.no/komponenter/feedback/tooltip) (`@entur/tooltip`): Tooltip brukes for å beskrive eller legge til tilleggsinformasjon til brukeren ved hover eller fokus på elementer.

### Layout & Surfaces

- [Card](https://linje.entur.no/komponenter/layout-og-flater/card) (`@entur/layout`): Cards er flater som viser innhold og handlinger om et emne som man ønsker å fremheve på en side.
- [Contrast](https://linje.entur.no/komponenter/layout-og-flater/contrast) (`@entur/layout`): Contrast er en invertert versjon av profilen vår og kan brukes for å skape et visuelt hierarki på siden.
- [Drawer](https://linje.entur.no/komponenter/layout-og-flater/drawer) (`@entur/modal`): Drawer er et panel som glir inn fra siden. Den skal benyttes til å gi tilleggsinformasjon som man trenger der og da, uten å avbryte flyten.
- [Expandable](https://linje.entur.no/komponenter/layout-og-flater/expandable) (`@entur/expand`): Expandables er komponenter for å kollapse og ekspandere innhold.
- [MediaCard](https://linje.entur.no/komponenter/layout-og-flater/mediacard) (`@entur/layout`): MediaCard er en skyggefull boks som gir et kort sammendrag av innnhold og som støtter video, bilde eller grafikk for å forsterke innholdet.
- [Modal](https://linje.entur.no/komponenter/layout-og-flater/modal) (`@entur/modal`): Modal benyttes ofte til spørsmål som brukeren må ta stilling til før han kan gå videre, de avbryter flyten men beholder konteksten delvis. De kan også vise tilleggsinfo som brukeren har etterspurt på en fokusert måte.
- [Tab](https://linje.entur.no/komponenter/layout-og-flater/tab) (`@entur/tab`): Tabs lar oss designe grupperte brukergrensesnitt på en enkel måte.
- [Table](https://linje.entur.no/komponenter/layout-og-flater/table) (`@entur/table`): Tabeller brukes for å vise frem strukturert data
- [Tag](https://linje.entur.no/komponenter/layout-og-flater/tag) (`@entur/layout`): Tags brukes for å kategorisere eller organisere elementer ved hjelp av nøkkelord som beskriver dem.

### Navigation

- [BreadcrumbNavigation](https://linje.entur.no/komponenter/navigasjon/breadcrumbnavigation) (`@entur/menu`): Brødsmulesti (breadcrumbs) er et navigasjonselement som viser hvor man er i navigasjonshierarkiet, og hvordan man navigerer seg tilbake.
- [OverflowMenu](https://linje.entur.no/komponenter/navigasjon/overflowmenu) (`@entur/menu`): Overflow menu består av en ikonknapp som åpner en liste med handlinger når man klikker på den.
- [Pagination](https://linje.entur.no/komponenter/navigasjon/pagination) (`@entur/menu`): Pagination brukes for å fordele innhold på over flere sider, for å unngå for mange elementer i én og samme visning.
- [Stepper](https://linje.entur.no/komponenter/navigasjon/stepper) (`@entur/menu`): En stepper tar deg stegvis gjennom et visst løp.
- [SideNavigation](https://linje.entur.no/komponenter/navigasjon/sidenavigation) (`@entur/menu`): Side navigation brukes som en global meny for å vise et navigasjons-hierarki med ett til to nivåer.
- [Top navigation](https://linje.entur.no/komponenter/navigasjon/top-navigation) (`@entur/menu`): Top navigation brukes som en global navigasjonsmeny som ligger horisontalt på toppen av en side eller applikasjon.

### Travel

- [TravelLeg](https://linje.entur.no/komponenter/reise/travelleg) (`@entur/travel`): Travel leg benyttes til å illustrere reisestrekningen mellom to destinasjoner, og benytter transportfargen og Enturs mønster til det aktuelle transportmidlet.
- [TravelSwitch](https://linje.entur.no/komponenter/reise/travelswitch) (`@entur/travel`): Travel Switch er en variant av Switch for å skru av/på modaliteter.
- [TravelHeader](https://linje.entur.no/komponenter/reise/travelheader) (`@entur/travel`): Travel header viser destinasjonene som man reiser fra og til på en visuell måte. Vi benytter den røde streken fra logoen for å understreke identiteten til Entur.
- [TravelTag](https://linje.entur.no/komponenter/reise/traveltag) (`@entur/travel`): TravelTag er en komponent for å vise noe om en reise

### Form Elements

- [CheckboxPanel](https://linje.entur.no/komponenter/skjemaelementer/checkboxpanel) (`@entur/form`): Checkbox panel fungerer som checkbox button, men med en større trykkflate og muligheter for å vise ekstra informasjon.
- [DatePicker](https://linje.entur.no/komponenter/skjemaelementer/datepicker) (`@entur/datepicker`): DatePicker, DateField, Calendar og NativeDatePicker er komponenter for å velge datoer.
- [Dropdown](https://linje.entur.no/komponenter/skjemaelementer/dropdown) (`@entur/dropdown`): Dropdown presenterer en liste over valg der brukeren kan velge ett av dem.
- [FileUpload](https://linje.entur.no/komponenter/skjemaelementer/fileupload) (`@entur/fileupload`): FileUpload en komponent for å ta imot filer fra brukeren.
- [MultiSelect](https://linje.entur.no/komponenter/skjemaelementer/multiselect) (`@entur/dropdown`): MultiSelect lar brukeren velge ett eller flere elementer fra en liste med valg
- [Radio button](https://linje.entur.no/komponenter/skjemaelementer/radio-button) (`@entur/form`): Radio buttons lar brukerne velge kun ett alternativ fra en liste over valg.
- [RadioPanel](https://linje.entur.no/komponenter/skjemaelementer/radiopanel) (`@entur/form`): Radio panel fungerer som radio button, men med en større trykkflate, og muligheter for å vise ekstra informasjon.
- [SegmentedControl](https://linje.entur.no/komponenter/skjemaelementer/segmentedcontrol) (`@entur/form`): SegmentedControl lar brukeren velge mellom nært beslektede alternativer som påvirker innhold eller visning. Den består av en gruppe knapper hvor nøyaktig ett alternativ kan være valgt om gangen.
- [Switch](https://linje.entur.no/komponenter/skjemaelementer/switch) (`@entur/form`): Switch fungerer som en fysisk bryter som lar brukerne slå på eller av en funksjon.
- [Checkbox](https://linje.entur.no/komponenter/skjemaelementer/checkbox) (`@entur/form`): Checkboxes lar brukerne velge ett eller flere alternativer fra en liste over valg.
- [TextArea](https://linje.entur.no/komponenter/skjemaelementer/textarea) (`@entur/form`): TextArea brukes når brukeren skal fylle ut lengre tekster, som et avsnitt eller to.
- [TextField](https://linje.entur.no/komponenter/skjemaelementer/textfield) (`@entur/form`): TextField en komponent for å ta imot tekst fra brukeren.
- [TimePicker](https://linje.entur.no/komponenter/skjemaelementer/timepicker) (`@entur/datepicker`): TimePicker er en komponent for å velge et tidspunkt.

## Mønster

### Mønster

- [Portal Sidebar B2B](https://linje.entur.no/monster/monster/portal-sidebar-b2b): Sidebaren gir brukeren oversikt over tilgjengelige sider og gjør det enkelt å navigere effektivt i komplekse B2B-produkter.
- [Topbar B2B](https://linje.entur.no/monster/monster/topbar-b2b/beta): Topbar står øverst i B2B-produktet for produktidentitet, navigasjon, søk og globale brukerhandlinger. Mønsteret er responsivt og tilpasser seg desktop, tablet og mobil.
- [Navbar B2B](https://linje.entur.no/monster/monster/navbar-b2b/beta): Navigasjonspanelet gir brukeren oversikt over tilgjengelige sider og gjør det enkelt å navigere effektivt i portaler og B2B-produkter. Panelet finnes i to varianter: sidebar (vertikal) og topbar-navigasjon (horisontal).

### Oversikt

- [Mønstre og maler](https://linje.entur.no/monster): Retningslinjer og ferdige oppsett for å bygge helhetlige løsninger med komponenter fra designsystemet.

### Maler

- [Portal B2B](https://linje.entur.no/monster/maler/portal-b2b/beta) (`@entur/layout`): Mal for B2B-portaler med valgfri statuslinje, sidefelt og hovedinnhold.

## Design Tokens

- [Tokens](https://linje.entur.no/tokens) (`@entur/tokens`): Designsystemet er et system for å opprettholde frontend kode og visuell konsistens. Det inneholder alt som er felles på tvers av team og produkter og som gir verdi å dele i Entur.

### Ovrige Tokens

- [Border](https://linje.entur.no/tokens/ovrige-tokens/border): Border-tokens brukes til å definere grensene til et element i CSS.
- [Breakpoints](https://linje.entur.no/tokens/ovrige-tokens/breakpoints): Breakpoints er de punktene der designet "bryter" eller tilpasses for å passe til ulike skjermstørrelser, fra små mobilenheter til store skjermer.
- [PX vs REM](https://linje.entur.no/tokens/ovrige-tokens/px-vs-rem): Pixel er faste størrelser som ikke endrer seg. Rem, derimot, tilpasser seg automatisk fontstørrelsen på root i HTML, og derfor er den ofte best for responsivt design.
- [Shadows](https://linje.entur.no/tokens/ovrige-tokens/shadows): Shadows brukes til å definere skyggeeffekter i CSS, som legger til dybde og dimensjon på elementer.
- [Spacing](https://linje.entur.no/tokens/ovrige-tokens/spacing): Spacing brukes konsekvent på margin og padding for å oppnå konsistens på tvers av komponenter og UI.
- [Timings](https://linje.entur.no/tokens/ovrige-tokens/timings): Timing-tokens brukes til å definere overgangseffekter (transitions) i CSS.
- [Z-index](https://linje.entur.no/tokens/ovrige-tokens/z-index): Z-index kontrollerer rekkefølgen der elementer overlapper hverandre, elementer med høyere z-indeks verdier blir plassert foran elementer med lavere z-indeks verdier.
- [Typografi](https://linje.entur.no/tokens/ovrige-tokens/typografi): Ved å definere tydelige tokens for font weights, størrelser og linjehøyder, blir det enklere å innføre konsistent typografi.

### Fargetokens

- [Dark mode](https://linje.entur.no/tokens/fargetokens/dark-mode): Fargetokens gjør det mulig å implementere en strukturert dark mode for en sømløs overgang mellom lys og mørk modus i både Figma og kode.
- [Generelt om fargetokens](https://linje.entur.no/tokens/fargetokens/generelt-om-fargetokens): Hvorfor har vi egentlig fargetokens? Er du usikker på hvordan komme i gang? Her kommer en kort introduksjon.
- [Oversikt](https://linje.entur.no/tokens/fargetokens/oversikt): Oversikt over Entur Linje sine fargetokens

### Storrelsetokens

- [Oversikt](https://linje.entur.no/tokens/storrelsetokens/oversikt): Oversikt over Entur Linje sine størrelsetokens

## Accessibility

### Hvem Designer Vi For

- [Hvem designer vi for?](https://linje.entur.no/universell-utforming/hvem-designer-vi-for): Vi ønsker å tilby en god brukeropplevelse for alle, også de som har en funksjonsnedsettelse.

- [Introduksjon](https://linje.entur.no/universell-utforming): Universell utforming (UU) bygger på tanken om at tjenester skal være tilgjengelige for alle, uavhengig av alder, funksjonsevne og utdanningsnivå.

### Kontrastsjekker

- [Kontrastsjekker](https://linje.entur.no/universell-utforming/kontrastsjekker): For å sikre god lesbarhet i våre applikasjoner er det viktig å opprettholde kontrastkrav for farger på nett.

### Nyttige Verktoy

- [Nyttige verktøy](https://linje.entur.no/universell-utforming/nyttige-verktoy): Her har vi samlet et knippe lenker for mer informasjon. Tilsynet for universell utforming av IKT har mange bra forklaringer, sjekklister og løsningsforslag.

### Testguide

- [Testguide](https://linje.entur.no/universell-utforming/testguide): UU-tilsynet har satt sammen en guide til hvordan man selv kan teste løsningen sin, som vi her gjengir i korte trekk.

## Getting Started

### For Designers

- [Brukergrupper](https://linje.entur.no/kom-i-gang/for-designere/brukergrupper): Enturs tjenester har to hovedbrukergrupper; reisetilbydere på den ene siden og de reisende på den andre. I mange tilfeller vil situasjon være en faktor som spisser behovsbeskrivelsen.
- [Brukertesting](https://linje.entur.no/kom-i-gang/for-designere/brukertesting): Hvordan skal man finne ut hva som virkelig betyr noe – og gjør en forskjell i ulike situasjoner - for de som anvender ens produkt?

### For Developers

- [Bidra med kode](https://linje.entur.no/kom-i-gang/for-utviklere/bidra-med-kode): Har du funnet en bug i designsystemet? Vil du legge til en ny feature eller fikse noe i dokumentasjonen? Eller kanskje bare utforske repoet? Da er dette guiden for deg.
- [Komponentbibliotek](https://linje.entur.no/kom-i-gang/for-utviklere/komponentbibliotek): Linje designsystem gjør det enklere for deg som utvikler å lage gode, universelt utformede brukeropplevelser som er like på tvers av appene våre. Denne guiden viser deg hvordan du kan starte å bruke det!

### Introduction

- [Designprinsipper](https://linje.entur.no/kom-i-gang/introduksjon/designprinsipper): De fem designprinsippene skal fungere som guidelines som vi skal rette oss etter når vi designer og utvikler de digitale tjenestene til Entur.

## Patterns

### Monster

- [Statusbeskjeder](https://linje.entur.no/monster/monster/statusbeskjeder): Statusbeskjeder informerer brukeren når noe går galt, så hvordan gjør vi det i Entur?