@larsen-utvikling/create-next-app - a Next.js starter with a real design system

Why

Every project started with the same thirty minutes

Not hard work. Just the same work, slightly worse each time, because it was being re-derived from memory.

Delete the demo page and its CSSA welcome page that demonstrates the tokens
Copy spacing values from the last projectEight steps on a 4px base, decided
Pick colours, then pick them again for darkBoth modes generated from one HEX
Remember which easing curve you settled onFour curves, named for what moves
Rewrite AGENTS.md from memoryWritten, and matching the palette you chose
Add Tailwind, then fight itVanilla CSS custom properties

The flow

Seven questions. Every one has a flag.

Press enter through all of them for a considered default, or pass flags and skip the terminal entirely.

01
What is your app named?
- my-applowercase, digits, . _ -
Becomes both the folder and the name in package.json. Checked against this package's own rule - lowercase letters, digits, '.', '_', '-', max 214 characters - and refuses a directory that already has files in it.
pass the name as an argument
02
Generate a custom 12-step palette from a single HEX?
- Noship the Larsen Utvikling theme
- Yesgenerate from your brand color
Say no and you get a considered Tintful theme generated from Larsen blue. Say yes and four follow-up questions shape the palette.
--hex <color> · --default-palette for the default
- └
  Enter your HEX color
  - #4DA0FFwith or without the #
  One color in. A 12-step accent scale, a 12-step gray scale, semantic colors and both modes out.
  --hex 4DA0FF
- └
  Choose framework/style
  - shadcn/uinative Tintful shadcn tokens
  - Radix Themes custom-palette tokensnative Radix Themes custom-palette tokens
  - Canonicalnative Tintful ramps and semantic roles
  Decides which token names exist - and the generated docs and starter CSS are rewritten to match.
  --preset shadcn | radix | canonical
- └
  Choose color format
  - HSL Values212 100% 65%
  - HEX
  - RGB
  - HSL
  - OKLAB
  - OKLCH
  HSL values keep alpha composition available. Any other format and the docs switch to the color-mix idiom instead.
  --format hsl-values | hex | rgb | hsl | oklab | oklch
- └
  Choose neutral tint
  - Noneachromatic neutrals
  - Weaksubtle hue influence (recommended)
  - Strongstronger hue influence in neutrals
  None is achromatic; Weak and Strong derive neutrals with increasing hue influence. Weak is the custom palette default. Every export must pass Tintful quality checks.
  --neutral-tint none | weak | strong
03
Which linter?
- ESLint
- Biome
- None
Passed straight through to create-next-app, so you get its official configuration for whichever you pick.
--linter eslint | biome | none
04
Which package manager?
- npm
- pnpm
- yarn
- bun
Runs the install and rewrites the generated README so every command shown is the one you actually type.
--pm npm | pnpm | yarn | bun
05
Install agent skills for AI agents (UI, motion, accessibility, transitions)?
- Yes
- No
Groups requested skills by their authors' repositories, installs each source independently, then verifies every requested SKILL.md on disk - only skills that actually landed are documented in the project.
--skills recommended | all | a,comma,list · --no-skills
- └
  Which skills?
  - Recommendedmotion-craft, interface-craft, interface-review, ui-primitive-picker
  - All Larsen Skills9 skills
  - Let me pickspace to toggle, enter to confirm
  Recommended and All keep their Larsen-only meanings. Let me pick also offers Jakub Antalik's transitions-dev as a direct third-party opt-in.
  --skills recommended | all | a,comma,list
06
Initialize a git repository?
- Yesinit, add, first commit
- No
Commits everything after the overlay, so your first commit is the finished project rather than a bare template.
--no-git
07
Install dependencies?
- Yes
- No
A missing package manager never fails the scaffold - you get the finished app and the command to finish it yourself.
--no-install

Colour

One HEX in. A whole theme out.

The generator that runs during install runs here too, imported from the published package - so what you make is byte-for-byte what npx writes.

Seed presetsCustom

Named seed colours run through Tintful just like your input. Generation and export quality are checked before an output is offered.

Explore Tintful

One seed creates light and dark palettes. Tintful solves the colour roles and checks the exported result.

Neutral tintWeak (default)

Weak is the CLI default and needs no flag. None uses achromatic neutrals; Strong adds more hue influence. All selections use Tintful.

Framework / style

Colour format

Light

--background

--foreground

--primary

--primary-foreground

--muted

--border

Accent

Gray

Dark

--background

--foreground

--primary

--primary-foreground

--muted

--border

Accent

Gray

npx --yes @larsen-utvikling/create-next-app@0.7.0 my-app --defaults --hex 4DA0FF

Keep the CSS, audit and manifest together. Audits verify the original exported bytes.

Show the generated theme.css

:root {
  --background: 213.265286098 12.040908711% 98.079157299%;
  --foreground: 213.1880776 6.4291578% 17.19517705%;
  --card: 213.254652508 9.604036145% 91.682743677%;
  --card-foreground: 213.1880776 6.4291578% 17.19517705%;
  --popover: 213.262147066 8.943341316% 95.497816027%;
  --popover-foreground: 213.1880776 6.4291578% 17.19517705%;
  --primary: 210.523575988 76.047481625% 42.856682737%;
  --primary-foreground: 203.275541465 100% 97.894231986%;
  --secondary: 20.110060152 73.656111112% 38.670068042%;
  --secondary-foreground: 21.441120785 100% 97.795297436%;
  --muted: 213.262147066 8.943341316% 95.497816027%;
  --muted-foreground: 213.189144073 5.637225239% 31.628599001%;
  --accent: 213.247848805 9.339955397% 87.883657901%;
  --accent-foreground: 213.1880776 6.4291578% 17.19517705%;
  --destructive: 334.320204919 49.086122804% 52.000016068%;
  --border: 213.232108023 7.752986763% 77.223400978%;
  --input: 213.190948965 5.21762556% 48.457432509%;
  --ring: 210.870812793 71.227432273% 49.116009109%;
  --chart-1: 211.086456417 71.997219373% 33.375268267%;
  --chart-2: 296.85510195 60.639490605% 20.220287461%;
  --chart-3: 13.990697831 35.847240654% 39.929606303%;
  --chart-4: 60.017884611 88.033391834% 14.494369313%;
  --chart-5: 170.88395246 43.513919542% 36.013319085%;
  --sidebar: 213.262147066 8.943341316% 95.497816027%;
  --sidebar-foreground: 213.1880776 6.4291578% 17.19517705%;
  --sidebar-primary: 210.523575988 76.047481625% 42.856682737%;
  --sidebar-primary-foreground: 203.275541465 100% 97.894231986%;
  --sidebar-accent: 213.247848805 9.339955397% 87.883657901%;
  --sidebar-accent-foreground: 213.1880776 6.4291578% 17.19517705%;
  --sidebar-border: 213.232108023 7.752986763% 77.223400978%;
  --sidebar-ring: 210.870812793 71.227432273% 49.116009109%;
  --destructive-foreground: none 0% 100%;
  --destructive-muted: 338.019560458 99.999999999% 90.495993758%;
  --destructive-muted-foreground: 333.922192176 55.630411289% 18.614164403%;
  --success: 167.664961856 99.999999997% 28.722345943%;
  --success-foreground: none 0% 0%;
  --success-muted: 161.69572094 63.867357761% 81.907225921%;
  --success-muted-foreground: 164.167254506 100% 10.757122814%;
  --warning: 24.203613367 99.999999999% 34.414849872%;
  --warning-foreground: 20.033224818 100% 95.336623083%;
  --warning-muted: 20.150305771 100% 87.008112043%;
  --warning-muted-foreground: 20.342227945 99.999999996% 14.798819035%;
  --info: 200.73578064 99.999999996% 39.516270008%;
  --info-foreground: none 0% 0%;
  --info-muted: 200.507298264 100% 86.1085215%;
  --info-muted-foreground: 204.251509559 99.999999987% 15.587079734%;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: 213.669186911 5.046162865% 2.873458892%;
    --foreground: 213.243544357 10.669776602% 87.291551113%;
    --card: 213.207550573 5.709772201% 9.620389333%;
    --card-foreground: 213.243544357 10.669776602% 87.291551113%;
    --popover: 213.22219549 5.198025548% 6.087654529%;
    --popover-foreground: 213.243544357 10.669776602% 87.291551113%;
    --primary: 211.439280373 76.687035378% 54.673568568%;
    --primary-foreground: 217.302851626 54.584079543% 3.426176859%;
    --secondary: 19.115864286 61.156147804% 49.952559201%;
    --secondary-foreground: 13.851187564 52.457512328% 3.143021431%;
    --muted: 213.22219549 5.198025548% 6.087654529%;
    --muted-foreground: 213.224491412 7.275382377% 72.289228212%;
    --accent: 213.196160161 6.147232167% 13.33144468%;
    --accent-foreground: 213.243544357 10.669776602% 87.291551113%;
    --destructive: 334.929577916 55.571575288% 57.174790478%;
    --border: 213.188714233 5.926031161% 24.23558871%;
    --input: 213.190892504 5.327126812% 40.444374295%;
    --ring: 211.439280373 76.687035378% 54.673568568%;
    --chart-1: 211.193205266 72.456956789% 51.932550215%;
    --chart-2: 297.17317573 39.142034681% 45.193152622%;
    --chart-3: 14.106247969 78.884173344% 60.035090452%;
    --chart-4: 60.783695237 38.301369348% 50.515140467%;
    --chart-5: 171.2016201 62.651676225% 57.784260133%;
    --sidebar: 213.22219549 5.198025548% 6.087654529%;
    --sidebar-foreground: 213.243544357 10.669776602% 87.291551113%;
    --sidebar-primary: 211.439280373 76.687035378% 54.673568568%;
    --sidebar-primary-foreground: 217.302851626 54.584079543% 3.426176859%;
    --sidebar-accent: 213.196160161 6.147232167% 13.33144468%;
    --sidebar-accent-foreground: 213.243544357 10.669776602% 87.291551113%;
    --sidebar-border: 213.188714233 5.926031161% 24.23558871%;
    --sidebar-ring: 211.439280373 76.687035378% 54.673568568%;
    --destructive-foreground: 337.843956442 42.194056535% 6.864432875%;
    --destructive-muted: 334.998007425 51.769810836% 14.643222524%;
    --destructive-muted-foreground: 335.920963198 99.999999999% 89.457768867%;
    --success: 167.851731075 99.999999997% 31.413511195%;
    --success-foreground: 163.536785049 99.999999979% 8.437002373%;
    --success-muted: 163.536785049 99.999999979% 8.437002373%;
    --success-muted-foreground: 162.218844766 69.844828955% 79.77108095%;
    --warning: 21.233673768 73.271550335% 47.549722072%;
    --warning-foreground: 18.680321918 75.785719541% 9.122636303%;
    --warning-muted: 19.633674608 88.703766881% 12.015924099%;
    --warning-muted-foreground: 21.306894099 100% 85.269215069%;
    --info: 200.331479997 100% 42.862917803%;
    --info-foreground: 202.461976907 96.928100885% 8.444850151%;
    --info-muted: 203.397548552 99.999999985% 11.86498143%;
    --info-muted-foreground: 198.203063449 100% 84.062233595%;
  }
}
[data-theme="light"] {
  --background: 213.265286098 12.040908711% 98.079157299%;
  --foreground: 213.1880776 6.4291578% 17.19517705%;
  --card: 213.254652508 9.604036145% 91.682743677%;
  --card-foreground: 213.1880776 6.4291578% 17.19517705%;
  --popover: 213.262147066 8.943341316% 95.497816027%;
  --popover-foreground: 213.1880776 6.4291578% 17.19517705%;
  --primary: 210.523575988 76.047481625% 42.856682737%;
  --primary-foreground: 203.275541465 100% 97.894231986%;
  --secondary: 20.110060152 73.656111112% 38.670068042%;
  --secondary-foreground: 21.441120785 100% 97.795297436%;
  --muted: 213.262147066 8.943341316% 95.497816027%;
  --muted-foreground: 213.189144073 5.637225239% 31.628599001%;
  --accent: 213.247848805 9.339955397% 87.883657901%;
  --accent-foreground: 213.1880776 6.4291578% 17.19517705%;
  --destructive: 334.320204919 49.086122804% 52.000016068%;
  --border: 213.232108023 7.752986763% 77.223400978%;
  --input: 213.190948965 5.21762556% 48.457432509%;
  --ring: 210.870812793 71.227432273% 49.116009109%;
  --chart-1: 211.086456417 71.997219373% 33.375268267%;
  --chart-2: 296.85510195 60.639490605% 20.220287461%;
  --chart-3: 13.990697831 35.847240654% 39.929606303%;
  --chart-4: 60.017884611 88.033391834% 14.494369313%;
  --chart-5: 170.88395246 43.513919542% 36.013319085%;
  --sidebar: 213.262147066 8.943341316% 95.497816027%;
  --sidebar-foreground: 213.1880776 6.4291578% 17.19517705%;
  --sidebar-primary: 210.523575988 76.047481625% 42.856682737%;
  --sidebar-primary-foreground: 203.275541465 100% 97.894231986%;
  --sidebar-accent: 213.247848805 9.339955397% 87.883657901%;
  --sidebar-accent-foreground: 213.1880776 6.4291578% 17.19517705%;
  --sidebar-border: 213.232108023 7.752986763% 77.223400978%;
  --sidebar-ring: 210.870812793 71.227432273% 49.116009109%;
  --destructive-foreground: none 0% 100%;
  --destructive-muted: 338.019560458 99.999999999% 90.495993758%;
  --destructive-muted-foreground: 333.922192176 55.630411289% 18.614164403%;
  --success: 167.664961856 99.999999997% 28.722345943%;
  --success-foreground: none 0% 0%;
  --success-muted: 161.69572094 63.867357761% 81.907225921%;
  --success-muted-foreground: 164.167254506 100% 10.757122814%;
  --warning: 24.203613367 99.999999999% 34.414849872%;
  --warning-foreground: 20.033224818 100% 95.336623083%;
  --warning-muted: 20.150305771 100% 87.008112043%;
  --warning-muted-foreground: 20.342227945 99.999999996% 14.798819035%;
  --info: 200.73578064 99.999999996% 39.516270008%;
  --info-foreground: none 0% 0%;
  --info-muted: 200.507298264 100% 86.1085215%;
  --info-muted-foreground: 204.251509559 99.999999987% 15.587079734%;
}
[data-theme="dark"] {
  --background: 213.669186911 5.046162865% 2.873458892%;
  --foreground: 213.243544357 10.669776602% 87.291551113%;
  --card: 213.207550573 5.709772201% 9.620389333%;
  --card-foreground: 213.243544357 10.669776602% 87.291551113%;
  --popover: 213.22219549 5.198025548% 6.087654529%;
  --popover-foreground: 213.243544357 10.669776602% 87.291551113%;
  --primary: 211.439280373 76.687035378% 54.673568568%;
  --primary-foreground: 217.302851626 54.584079543% 3.426176859%;
  --secondary: 19.115864286 61.156147804% 49.952559201%;
  --secondary-foreground: 13.851187564 52.457512328% 3.143021431%;
  --muted: 213.22219549 5.198025548% 6.087654529%;
  --muted-foreground: 213.224491412 7.275382377% 72.289228212%;
  --accent: 213.196160161 6.147232167% 13.33144468%;
  --accent-foreground: 213.243544357 10.669776602% 87.291551113%;
  --destructive: 334.929577916 55.571575288% 57.174790478%;
  --border: 213.188714233 5.926031161% 24.23558871%;
  --input: 213.190892504 5.327126812% 40.444374295%;
  --ring: 211.439280373 76.687035378% 54.673568568%;
  --chart-1: 211.193205266 72.456956789% 51.932550215%;
  --chart-2: 297.17317573 39.142034681% 45.193152622%;
  --chart-3: 14.106247969 78.884173344% 60.035090452%;
  --chart-4: 60.783695237 38.301369348% 50.515140467%;
  --chart-5: 171.2016201 62.651676225% 57.784260133%;
  --sidebar: 213.22219549 5.198025548% 6.087654529%;
  --sidebar-foreground: 213.243544357 10.669776602% 87.291551113%;
  --sidebar-primary: 211.439280373 76.687035378% 54.673568568%;
  --sidebar-primary-foreground: 217.302851626 54.584079543% 3.426176859%;
  --sidebar-accent: 213.196160161 6.147232167% 13.33144468%;
  --sidebar-accent-foreground: 213.243544357 10.669776602% 87.291551113%;
  --sidebar-border: 213.188714233 5.926031161% 24.23558871%;
  --sidebar-ring: 211.439280373 76.687035378% 54.673568568%;
  --destructive-foreground: 337.843956442 42.194056535% 6.864432875%;
  --destructive-muted: 334.998007425 51.769810836% 14.643222524%;
  --destructive-muted-foreground: 335.920963198 99.999999999% 89.457768867%;
  --success: 167.851731075 99.999999997% 31.413511195%;
  --success-foreground: 163.536785049 99.999999979% 8.437002373%;
  --success-muted: 163.536785049 99.999999979% 8.437002373%;
  --success-muted-foreground: 162.218844766 69.844828955% 79.77108095%;
  --warning: 21.233673768 73.271550335% 47.549722072%;
  --warning-foreground: 18.680321918 75.785719541% 9.122636303%;
  --warning-muted: 19.633674608 88.703766881% 12.015924099%;
  --warning-muted-foreground: 21.306894099 100% 85.269215069%;
  --info: 200.331479997 100% 42.862917803%;
  --info-foreground: 202.461976907 96.928100885% 8.444850151%;
  --info-muted: 203.397548552 99.999999985% 11.86498143%;
  --info-muted-foreground: 198.203063449 100% 84.062233595%;
}

Dark mode

Both modes, zero JavaScript

Follows the OS, with an attribute for a manual override. No provider, no flash, no hydration cost.

Auto: prefers-color-scheme, straight from the stylesheet
Manual: data-theme="light | dark" on <html> wins over it
Contrast: checked in the test suite before every release

<html data-theme="light">

The design system

Five files. You have read all of them.

Small enough to hold in your head, complete enough that you are not inventing spacing values on day three.

core.css: Spacing, widths, radii, type, layering
theme.css: Colour for both modes, generated for your seed
motion.css: Durations, curves, and the reduced-motion contract
base.css: A reset, deliberately colour-free
index.css: The single import your globals.css needs

Spacing 8 steps · 4px base

--space-14

--space-28

--space-312

--space-416

--space-524

--space-632

--space-748

--space-864

Type unitless leading

Heading 1.1

Body copy at 1.5, so a paragraph that wraps to three lines still has room to breathe.

Label 0.05em

Radii 4 · 8 · 16 · pill

Motion

Durations named for what moves

Most starters ship no motion layer, so every project invents its own curves. These are the values larsenutvikling.no already runs.

Under 300ms: For anything answering a click or a hover - a 180ms menu reads as more responsive than a 400ms one
Four curves: In one file, so near-identical beziers cannot drift apart
Reduced motion: Distance and scale collapse; transitions keep running

--duration-press:active140ms

--duration-fasthover, exits160ms

--duration-uimenus200ms

--duration-slowmodals240ms

--duration-enterentrances300ms

Agent docs

The rules your agent reads before it writes

An agent that does not know your conventions invents them, differently every session. These ship with the project.

AGENTS.mdThe project rules every coding agent reads
CLAUDE.mdA one-line pointer
DESIGN.mdThe token reference
NEXTJS.mdNext.js's own agent guide, preserved
README.mdGetting started, with a post-scaffold checklist

AGENTS.md01 / 05

The project rules every coding agent reads

Never Tailwind, the token idiom for your chosen palette, the motion rules, and the writing conventions.

Agent skills

Nine Larsen skills. One direct third-party opt-in.

Optional, and never installed on an unattended --defaults run. Each requested source installs independently, and the project docs list only SKILL.md files verified on disk.

Recommended four: motion, interface, review and primitives - the ones that pair with the design system
All nine: still means the Larsen collection only
transitions-dev: explicit opt-in from Jakub Antalik's repository

motion-craftDurations, curves, reduced motioninterface-craftLayout, hierarchy, spacing, typeinterface-reviewReview a screen against the rulesui-primitive-pickerThe right primitive for a patternmotion-vocabularyName an effect you can describeliquid-interfaceGlass and refraction effectsprototype-labThrowaway interaction prototypesreverse-engineer-motionRebuild motion from a videoanimated-logo-cycleAnimated brand markstransitions-devUI transition library by Jakub Antalik

→ .agents/skills/

Larsen Skills were informed by public work from Emil Kowalski and Jakub Krehel. Jakub Antalik's transitions-dev installs directly under the Transitions.dev terms.

Unattended

It runs in CI, or tells you why it cannot

Without a terminal the CLI fails immediately and names the flag that answers the question, instead of hanging on a prompt nobody can see.

npx --yes @larsen-utvikling/create-next-app@0.7.0 my-app --defaults

npx --yes @larsen-utvikling/create-next-app@0.7.0 my-app \
  --defaults --hex 22C55E --preset shadcn \
  --pm pnpm --linter biome \
  --skills recommended

Every flag
`-d, --defaults`	Skip every prompt and take the defaults - installs no skills
`--default-palette`	Answer No to a custom palette and ship the default theme
`--hex <color>`	Palette seed, with or without the #. Implies a custom palette
`--preset <name>`	shadcn \| radix \| canonical
`--format <name>`	hex \| rgb \| hsl \| hsl-values \| oklab \| oklch
`--neutral-tint <name>`	none \| weak \| strong - affects the gray ramp, defaults to weak
`--linter <name>`	eslint \| biome \| none
`--pm <name>`	npm \| pnpm \| yarn \| bun
`--skills <list>`	recommended \| all Larsen \| comma-separated skill names
`--no-skills`	Skip agent skill installs
`--git / --no-git`	Initialize a git repository, or skip it
`--install / --no-install`	Install dependencies, or skip it
`--cna-version <spec>`	Select the create-next-app version spec instead of latest
`-v, --version`	Print the version
`-h, --help`	Show help

The command

Click the answers. Copy the command.

Every option the scaffold takes, as a control. The copied command answers all of them and runs without follow-up prompts.

App name

Palette

Linter

Package manager

Agent skills

Git

Install dependencies

create-next-app version

The upstream Next.js scaffolder, passed through as create-next-app@<spec>. Not this package's own version.

Your command

npx --yes @larsen-utvikling/create-next-app@0.7.0 my-app \
  --defaults --skills recommended

The command answers every control. --defaults closes the prompt flow, and selected overrides are added explicitly.

On disk

What the first commit contains

Nothing to clean up first. The demo page is replaced, the unused assets are gone, and git is initialised with the finished project.

Next.js: Resolved at scaffold time, so the version is never stale
Import alias: @/* - the same default Next.js uses
NEXTJS.md: Next.js's own agent guide, preserved rather than overwritten
README: Carries a checklist of the things only you can do

my-app/
├── AGENTS.md          project rules for agents
├── CLAUDE.md          → @AGENTS.md
├── DESIGN.md          token reference
├── NEXTJS.md          Next.js agent guide, preserved
├── README.md          getting started + checklist
├── .agents/skills/    agent skills, when you opt in
├── public/
│   └── larsen-utvikling/   logo SVGs, light + dark
└── src/
    ├── app/
    │   ├── layout.tsx
    │   ├── globals.css    one import line
    │   ├── page.tsx       welcome page, yours to replace
    │   └── page.css
    └── lib/design-system/
        ├── index.css
        ├── core.css       spacing · widths · radii · type · z
        ├── theme.css      color, light + dark
        ├── theme.audit.json
        ├── theme.manifest.json
        ├── document.css   consumer styles
        ├── motion.css     durations · curves · reduced motion
        └── base.css       reset

Skills live in .agents/skills/ - browse Larsen Skills or transitions-dev at their sources.

Every project started with the same thirty minutes

Seven questions. Every one has a flag.

What is your app named?

Generate a custom 12-step palette from a single HEX?

Enter your HEX color

Choose framework/style

Choose color format

Choose neutral tint

Which linter?

Which package manager?

Install agent skills for AI agents (UI, motion, accessibility, transitions)?

Which skills?

Initialize a git repository?

Install dependencies?