AutoApplyDesign system

Design system

Every shared component in the shapes it actually ships in. Two color scales, one type scale, Tailwind utilities only — no custom CSS beyond the tokens in app.css. Build new screens out of what is on this page, and add anything new here first.

Colors

Two scales carry the whole product: background for every surface, border and piece of text, accent for anything interactive. Status colors are the only exception and are reserved for feedback.

Background scale

bg-background-50 … bg-background-950

50

100

200

300

400

500

600

700

800

900

950

Accent scale

bg-accent-50 … bg-accent-950

50

100

200

300

400

500

600

700

800

900

950

Status colors

Feedback only — never for branding or navigation
success
warning
danger

Roles

Pagebg-background-100
Surfacebg-white
Muted texttext-background-600
Borderborder-background-300
Actionbg-accent-600
Action tintbg-accent-50

Typography

Open Sauce One at every weight the app needs. Headings are bold and sit on background-900, supporting copy steps down to background-600.

Type scale

Hero

Applications that look the part

text-4xl font-bold sm:text-5xl

Section

Applications that look the part

text-3xl font-bold sm:text-4xl

Page

Applications that look the part

text-2xl font-bold

Card

Applications that look the part

text-lg font-semibold

Lead

Applications that look the part

text-lg text-background-600

Body

Applications that look the part

text-base text-background-700

Small

Applications that look the part

text-sm text-background-600

Caption

Applications that look the part

text-xs text-background-500

Eyebrow

Applications that look the part

text-sm font-semibold tracking-wide uppercase text-accent-600

Brand

the header, the footer and the editor toolbar all render this
AutoApplyAutoApply

Prose

Motivation letter

Body copy sits on text-background-700 and stays below max-w-2xl so lines never run too long to scan comfortably.

Secondary copy drops a step in both size and contrast, which keeps a card readable without a second color.

Buttons

One primary action per view. Secondary carries the alternative, ghost the low-stakes action, danger anything destructive. ButtonLink is the same surface for navigation, IconButton for compact toolbars.

Variants

variant="primary | secondary | ghost | danger"

Sizes

size="sm | md | lg"

With icons

States

loading renders a spinner and blocks the click

Links

ButtonLink — same surface, renders a router Link
Back to landing pageSecondary linkGhost link

Icon buttons

label is required and becomes the accessible name

Forms

Every control is a plain presentational component with a Formik-connected wrapper next to it. The wrapper owns the label, the error and the accessible wiring, so a route only names the field.

Formik fields

FormikInput · FormikSelect · FormikTextarea · FormikCheckbox

Shown in the header of your CV.

Optional, but at least 20 characters when you fill it in.

Nothing leaves this device until you export it.

Control states

Pass any Lucide icon as the icon prop.

Please enter a valid email address.

With an optional description.

Editing

Long forms are built out of these three: a Disclosure per group of fields, an ItemCard per entry in a list, and a Slider for the values that are easier to judge than to type. Every label the editors render is a translated string — the labels here are literal only because this page is not translated.

Disclosure

app/components/Disclosure.tsx

Open by default. The panel is hidden, never unmounted.

ItemCard

app/components/ItemCard.tsx

Amberg Engineering GmbH

Since 2025

First in the list, so there is no move-up button.

Untitled entry

Nested one level down, on the tinted surface.

Slider

app/components/Slider.tsx · FormikSlider.tsx

Standalone

83%

FileInputButton

app/components/FileInputButton.tsx

Nothing picked yet.

Hidden label

labelHidden

For rows inside an already-labelled group, where a visible label per row would bury the content. The label still reaches screen readers.

Surfaces and feedback

Cards are the one container. Badges label a state in a list, alerts explain something that just happened, and an empty state replaces a list that has nothing in it yet.

Card

Plain card

Border, white surface, rounded-xl, p-6.

Hoverable card

Add a hover border through className when a card is clickable.

Frontend Engineer

Interview

Cards compose with everything else — this is a tracked application.

Badge

variant="neutral | accent | success | warning | danger"
DraftTailoredSentInterviewRejected

Alert

Everything is stored locally

Your documents never leave this browser until you export them.

CV exported

The PDF has been generated and downloaded.

No backup yet

Download a JSON copy so you can restore your CV on another device.

Empty state

No motivation letters yet

Letters you write show up here, next to the CV they belong to.

Spinner

Sized through className, inherits the text color

Icons

Lucide, imported one file at a time through SVGR. They inherit the text color, so size them with size-* and color them with text-*.

In use

import FileUserIcon from 'lucide-static/icons/file-user.svg?react'
file-user
file-text
briefcase
graduation-cap
sparkles
pencil
trash-2
download
upload
languages

Sizes and colors