# Axo Design System The entry point for building or reproducing Axo UI. Generated from the live design system — component manifest, compiled brand tokens and measured values — so it cannot drift from what the components actually do. Brand: **axo-finans**. Switch with `?brand=`; all 9 are listed under Theming. ## Read this first @axo/ui-core is a private workspace package and is not published to npm. Inside the monorepo, import it directly. Outside, reproduce from the scaffold below and hand the canonical JSX to a developer. That single constraint decides how to use everything below: 1. **Inside the Axo monorepo** — import the real component from `@axo/ui-core/components/` (the subpath: the package barrel deliberately does not re-export components). Never reproduce anything. 2. **Outside it** — reproduce the appearance from the measured values here, and **always** hand back the canonical component reference alongside it, so a developer can swap your reproduction for the real component instead of reverse-engineering it. ## Rules - **Do not invent props.** Every component's verified props are at `/components/.md`. An empty prop list means docgen failed upstream — that is UNKNOWN, not "takes no props". Do not infer props from examples and present them as verified. - **Do not guess token values.** They are literals here and in `/tokens/axo-finans.json`. Never convert them to another colour space. - **Theming is an attribute, not a prop.** `data-theme=""` on a wrapper. If you are passing a brand into a component, you have taken a wrong turn. - **Mind the deprecated size scale.** `xs`/`s`/`m`/`l`/`xl` is current; `small`/`medium`/`large` is deprecated and renders differently — and is still some components' default. Say which you used. - **Two fonts, both must be loaded.** Poppins for headings, Source Sans Pro for body. The token layer names them but does not ship the faces; a reproduction that skips `@font-face` silently falls back and stops matching. ## Theming Apply with `` — one attribute, everything inside resolves. | brand | tokens | |---|---| | `axo-finans` *(shown)* | [`/tokens/axo-finans.css`](/tokens/axo-finans.css) · [`.json`](/tokens/axo-finans.json) | | `axo-group` | [`/tokens/axo-group.css`](/tokens/axo-group.css) · [`.json`](/tokens/axo-group.json) | | `centum` | [`/tokens/centum.css`](/tokens/centum.css) · [`.json`](/tokens/centum.json) | | `elskling` | [`/tokens/elskling.css`](/tokens/elskling.css) · [`.json`](/tokens/elskling.json) | | `freedom-finans` | [`/tokens/freedom-finans.css`](/tokens/freedom-finans.css) · [`.json`](/tokens/freedom-finans.json) | | `lendme` | [`/tokens/lendme.css`](/tokens/lendme.css) · [`.json`](/tokens/lendme.json) | | `uloan` | [`/tokens/uloan.css`](/tokens/uloan.css) · [`.json`](/tokens/uloan.json) | | `uscore-light` | [`/tokens/uscore-light.css`](/tokens/uscore-light.css) · [`.json`](/tokens/uscore-light.json) | | `zmarta` | [`/tokens/zmarta.css`](/tokens/zmarta.css) · [`.json`](/tokens/zmarta.json) | Sub-brands compose **on top of** a base theme rather than replacing it — the insurance surface is a base brand plus `state="success"` on actions, not a tenth theme. Do not invent a sub-brand token file. ## Tokens — axo-finans Resolved literals. `865` properties in total — the semantic tiers a screen is composed from are below; the rest are in [`/tokens/axo-finans.json`](/tokens/axo-finans.json). **Actions (buttons, links)** | token | value | |---|---| | `--action-color-background-ghost` | `#ffffff00` | | `--action-color-background-ghost-hover` | `#f9f9fa` | | `--action-color-background-link-hover` | `#e8e8fc` | | `--action-color-background-primary` | `#ffc107` | | `--action-color-background-primary-hover` | `#d19d00` | | `--action-color-background-secondary` | `#fff2cc` | | `--action-color-background-secondary-hover` | `#ffe79e` | | `--action-color-background-tertiary` | `#ffffff00` | | `--action-color-background-tertiary-hover` | `#f9f9fa` | | `--action-color-border-ghost` | `#ffffff00` | | `--action-color-border-ghost-hover` | `#ffffff00` | | `--action-color-border-primary` | `#ffc107` | | `--action-color-border-primary-hover` | `#d19d00` | | `--action-color-border-secondary` | `#ffffff00` | **Content surfaces and text** | token | value | |---|---| | `--content-color-background-drawer-cookie-invert` | `#f9f9fa` | | `--content-color-background-drawer-dark` | `#65707b` | | `--content-color-background-drawer-darker` | `#4c545c` | | `--content-color-background-section-highlight-neutral` | `#e6e8ea` | | `--content-color-background-section-highlight-none` | `#f9f9fa` | | `--content-color-background-section-highlight-primary` | `#fff2cc` | | `--content-color-background-section-highlight-secondary` | `#fadbd1` | | `--content-color-background-section-highlight-tertiary` | `#e6e8ea` | | `--content-color-background-section-neutral` | `#f9f9fa` | | `--content-color-background-section-none` | `#ffffff` | | `--content-color-background-section-primary` | `#fffdf7` | | `--content-color-background-section-secondary` | `#fff5f2` | | `--content-color-background-section-tertiary` | `#f9f9fa` | | `--content-color-background-statement-neutral` | `#f9f9fa` | **Brand primary** | token | value | |---|---| | `--color-primary-dark` | `#bd3e14` | | `--color-primary-darkest` | `#8f2f0f` | | `--color-primary-default` | `#e7511e` | | `--color-primary-light` | `#fff5f2` | **Neutrals** | token | value | |---|---| | `--color-neutral-dark` | `#65707b` | | `--color-neutral-darker` | `#4c545c` | | `--color-neutral-darkest` | `#33383d` | | `--color-neutral-default` | `#b4bac1` | | `--color-neutral-light` | `#f9f9fa` | | `--color-neutral-medium` | `#f9f9fa` | ## Type scale Composite `font` shorthands — apply the whole value, do not decompose it. | token | value | |---|---| | `--font-body-lg` | `normal 400 1.125rem / 1.5 "Source Sans Pro"` | | `--font-body-lg-bold-button` | `normal 700 1.125rem / 1.333 "Source Sans Pro"` | | `--font-body-lg-link` | `normal 400 1.125rem / 1.5 "Source Sans Pro"` | | `--font-body-lg-semibold` | `normal 600 1.125rem / 1.5 "Source Sans Pro"` | | `--font-body-md` | `normal 400 1rem / 1.5 "Source Sans Pro"` | | `--font-body-md-bold-button` | `normal 700 1rem / 1.5 "Source Sans Pro"` | | `--font-body-md-link` | `normal 400 1rem / 1.5 "Source Sans Pro"` | | `--font-body-md-semibold` | `normal 600 1rem / 1.5 "Source Sans Pro"` | | `--font-body-s` | `normal 400 0.875rem / 1.5 "Source Sans Pro"` | | `--font-body-s-link` | `normal 400 0.875rem / 1.5 "Source Sans Pro"` | | `--font-body-s-semibold` | `normal 600 0.875rem / 1.5 "Source Sans Pro"` | | `--font-body-xlg` | `normal 400 1.25rem / 1.5 "Source Sans Pro"` | | `--font-body-xlg-bold-button` | `normal 700 1.25rem / 1.2 "Source Sans Pro"` | | `--font-body-xlg-semibold` | `normal 600 1.25rem / 1.5 "Source Sans Pro"` | | `--font-body-xs` | `normal 400 0.75rem / 1.5 "Source Sans Pro"` | | `--font-body-xs-semibold` | `normal 600 0.75rem / 1.5 "Source Sans Pro"` | | `--font-body-xxlg` | `normal 400 1.5rem / 1.5 "Source Sans Pro"` | | `--font-body-xxlg-bold` | `normal 700 1.5rem / 1.5 "Source Sans Pro"` | | `--font-body-xxlg-semibold` | `normal 600 1.5rem / 1.5 "Source Sans Pro"` | | `--font-heading-hero-lg` | `normal 700 3.75rem / 1.2 "Poppins"` | | `--font-heading-hero-md` | `normal 700 3rem / 1.208 "Poppins"` | | `--font-heading-hero-s` | `normal 700 2.5rem / 1.2 "Poppins"` | | `--font-heading-lg` | `normal 700 1.875rem / 1.267 "Poppins"` | | `--font-heading-md` | `normal 700 1.5rem / 1.208 "Poppins"` | ## Components 234 components. Props resolved for 187. Only `packages/*` is published here; `libs/**` is deprecated and deliberately excluded, so anything you find below is safe to build on. ### Core — start here These carry curated selection guidance and the known traps. | component | import | docs | |---|---|---| | **Accordion** | `@axo/ui-core/components/Accordion` | [`/components/accordion.md`](/components/accordion.md) | | **Badge** | `@axo/ui-core/components/Badge` | [`/components/badge.md`](/components/badge.md) | | **Button** | `@axo/ui-core/components/Button` | [`/components/button.md`](/components/button.md) | | **Card** | `@axo/ui-core/components/Card` | [`/components/card.md`](/components/card.md) | | **Checkbox** | `@axo/ui-core/components/input/Checkbox` | [`/components/checkbox.md`](/components/checkbox.md) | | **Choicebox** | `@axo/ui-core/components/input/Choicebox` | [`/components/choicebox.md`](/components/choicebox.md) | | **Combobox** | `@axo/ui-core/components/input/Combobox` | [`/components/combobox.md`](/components/combobox.md) | | **CurrencyInput** | `@axo/ui-core/components/input/CurrencyInput` | [`/components/currencyinput.md`](/components/currencyinput.md) | | **EmailInput** | `@axo/ui-core/components/input/EmailInput` | [`/components/emailinput.md`](/components/emailinput.md) | | **Form** | `@axo/ui-core/components/form/Form` | [`/components/form.md`](/components/form.md) | | **FormControl** | `@axo/ui-core/components/form/FormControl` | [`/components/formcontrol.md`](/components/formcontrol.md) | | **FormControlGroup** | `@axo/ui-core/components/form/FormControlGroup` | [`/components/formcontrolgroup.md`](/components/formcontrolgroup.md) | | **Heading** | `@axo/ui-core/components/typography` | [`/components/heading.md`](/components/heading.md) | | **Icon** | `@axo/ui-core/components/Icon` | [`/components/icon.md`](/components/icon.md) | | **Modal** | `@axo/ui-core/components/Modal` | [`/components/modal.md`](/components/modal.md) | | **PhoneInput** | `@axo/ui-core/components/input/PhoneInput` | [`/components/phoneinput.md`](/components/phoneinput.md) | | **Radio** | `@axo/ui-core/components/input/Radio` | [`/components/radio.md`](/components/radio.md) | | **Select** | `@axo/ui-core/components/input/Select-v2` | [`/components/select.md`](/components/select.md) | | **Select** | `@axo/ui-core/components/input/Select` | [`/components/select.md`](/components/select.md) | | **Separator** | `@axo/ui-core/components/Separator` | [`/components/separator.md`](/components/separator.md) | | **Skeleton** | `@axo/ui-core/components/Skeleton` | [`/components/skeleton.md`](/components/skeleton.md) | | **Slider** | `@axo/ui-core/components/input/Slider` | [`/components/slider.md`](/components/slider.md) | | **Stack** | `@axo/ui-core/components/layout/item` | [`/components/stack.md`](/components/stack.md) | | **Switch** | `@axo/ui-core/components/input/Switch` | [`/components/switch.md`](/components/switch.md) | | **Tabs** | `@axo/ui-core/components/Tabs` | [`/components/tabs.md`](/components/tabs.md) | | **Text** | `@axo/ui-core/components/typography` | [`/components/text.md`](/components/text.md) | | **Textarea** | `@axo/ui-core/components/input/Textarea` | [`/components/textarea.md`](/components/textarea.md) | | **TextInput** | `@axo/ui-core/components/input/TextInput` | [`/components/textinput.md`](/components/textinput.md) | | **Toast** | `@axo/ui-core/components/Toast` | [`/components/toast.md`](/components/toast.md) | | **Tooltip** | `@axo/ui-core/components/Tooltip` | [`/components/tooltip.md`](/components/tooltip.md) | ### Everything else (204) Documented from source, without curated guidance. Fetch the component page before using one. `AcceptedOfferIpiModal` · `AccordionItem` · `AccountNumber` · `AdvisoryMessage` · `AiGeneratedMark` · `AmountSelector` · `AnimateNumber` · `ArticleAside` · `ArticleAuthor` · `ArticleBody` · `ArticleCard` · `ArticleCardList` · `ArticleListOverview` · `ArticleMeta` · `ArticleTOC` · `AutoAcceptCard` · `BackToOverview` · `Bank` · `BaseConsent` · `BillogramLoading` · `Body` · `Body` · `Body` · `Body` · `Body` · `Body` · `BodyCta` · `BodyImage` · `BodyParagraphs` · `BodyTable` · `BookingSuccess` · `Brand` · `BrandInfo` · `BrandInsurance` · `ButtonDock` · `ButtonGrid` · `ButtonSet` · `BuyScreen` · `CallBookingBannerView` · `CardGenericSkeleton` · `CardGroup` · `Cards` · `ComponentPlaceholder` · `ConfirmationForm` · `ConsentView` · `ContactModal` · `ContentLayout` · `Cover` · `CreditCard` · `CreditCard` · `CreditCardOffer` · `CreditCardOffer` · `CreditCardOffersList` · `CreditScoreExplainer` · `Cta` · `CustomerStory` · `CyclingText` · `DataFetchingView` · `DateCalendar` · `DaySelector` · `DebtOverview` · `DebtRegistryConsentPromptView` · `Disclaimer` · `DraftModeToggle` · `DurationWarnings` · `ExternalLinksSection` · `Faq` · `FieldStoryHost` · `FileUploader` · `Footer` · `FooterLayout` · `FormAsideSkeleton` · `FormControlCaption` · `FormControlLabel` · `FormControlValidation` · `FormSkeleton` · `GlowBackground` · `Header` · `HeaderInfo` · `Hero` · `Hero` · `Hero` · `HeroAxo` · `HeroCta` · `HeroUscore` · `HighCostInformationBanner` · `HighlightInfo` · `HighlightsCompact` · `HighlightsDefault` · `IconAnimated` · `InfoCard` · `InfoPageBodySection` · `InputAffix` · `InputControl` · `InputLabel` · `InputStateIndicator` · `InsuranceCard` · `InsuranceCard` · `InsuranceCard` · `InsuranceWidget` · `Intro2607` · `Journey` · `LanguageSwitch` · `LoanAmountSlider` · `LoanApplicationStatus` · `LoanCalculator` · `LoanCalculatorSection` · `LoanCost` · `LoanDurationStepper` · `LoanOffer` · `LoanProductAside` · `LoanQuoteFooter` · `LoansModalUI` · `LoginModal` · `LoginView` · `LoginView` · `LoginView` · `Mediator` · `Message` · `ModalHeader` · `NotFound` · `OfferAnnotation` · `OfferBadge` · `OfferCard` · `OfferCard` · `OfferCardSkeleton` · `OfferCreditLineMessage` · `OfferInformation` · `OfferList` · `OfferSelectedGuide` · `OffersStatus` · `OfferStateInformation` · `OpenPositions` · `OverviewLoadingSkeleton` · `PageCopyright` · `PageFooterLayout` · `PageHeaderLayout` · `PageHeaderLayout` · `PageHeaderLayout` · `PageHeaderLayout` · `PageHeaderLayout` · `PageLayout` · `PageMenu` · `PageMenu` · `PageMenu` · `PartnerBrand` · `Partners` · `PartnersLogosOnly` · `PaymentMandateScreen` · `PaymentProvider` · `PersonAuthStep` · `PhoneField` · `PolicyViewUI` · `PoweredBy` · `PreForm` · `ProductIcon` · `ProductInsurance` · `ProductRecommendationCard` · `ProductStatusCard` · `ProductTilesSection` · `ProgressBarStatus` · `ProgressBarWithDescription` · `ProgressIndicator` · `ProgressStepper` · `ProgressTag` · `PurchaseSummaryContent` · `PuzzelChatWidget` · `RecommendationBar` · `RecommendationCopyReview—Iteration2(proposal)` · `RefinanceAmount` · `RefinanceSaving` · `RefinanceSavings` · `RejectionCard` · `ReviewForm` · `SavingsSummary` · `ScoreGauge` · `ScrollActionBar` · `SecciDownload` · `SectionLayout` · `SelectItem` · `SelectTrigger` · `SkeletonImage` · `SocialPresence` · `Spinner` · `Statement` · `SuccessBadge` · `SuccessView` · `SummaryView` · `TabbedContent` · `Table` · `TermsNotice` · `TestimonialDefault` · `Testimonials` · `TimeSlotPicker` · `TrustpilotReviewItem` · `TrustPilotWidget` · `USPs` · `USPsList` · `Video` · `WelcomeHeader` · `Widget` · `WidgetsLayoutContent` · `Wrapped` · `Wrapped` ## Reproducing a component `/components/.md?brand=axo-finans` gives you, in this order: the canonical `@axo/ui-core` import and exact JSX, the source path, a link to it rendered, the verified props, and the **measured** values per variant/size/state — geometry and computed styles recorded from the real component in a browser, not derived from tokens (component-tier values such as `--button-*` do not exist in the token payload at all; they only exist once the component renders). Full matrices: `/computed/..json`. A reproduction is a copy: it will not receive token changes, and it carries appearance only — not behaviour, focus management or accessibility wiring. Keep the canonical reference attached to it. --- Machine index: [`/manifests/components.json`](/manifests/components.json) · MCP: `POST /mcp` · Entry point: [`/llms.txt`](/llms.txt)