127 primitives, alphabetical. Each entry shows its role, when to reach for it, and (where present) the showcase that demonstrates it in context.
DSActionssrc/components/design-system/DSActions.vueRenders a row of NuxtLink-wrapped DSBtn from a typed DSAction[] config.
- When to use
- Anywhere a section component takes a typed `actions` prop — DSEditorialFold, DSClosingCta. Use directly when you need a config-driven action row inside an ad-hoc layout.
- When not to use
- For one-off button rows (a single button, a button with custom inline content), just write the buttons inline.
- Related
DSBtnDSEditorialFoldDSClosingCta
DSAlertBannersrc/components/design-system/DSAlertBanner.vuePersistent full-width inline banner — info / success / warning / danger tones, optional icon, optional trailing actions, optional dismiss.
- When to use
- A condition that lives above a page or section until it changes — "guest mode active", "you have unsaved changes", "this resume is published — changes are public". Distinct from DSCallout (a discrete content block within page flow) and DSToast (transient).
- When not to use
- Not for one-shot event acknowledgements ("Saved.") — those belong in DSToast. Not for callout-content (warnings, asides, urgent product notes inside the page) — those belong in DSCallout.
- Related
DSCalloutDSToast
DSAppCardsrc/components/design-system/DSAppCard.vueCompact card used in collection layouts.
DSAppCardDetailsrc/components/design-system/DSAppCardDetail.vueExpanded card content row.
DSAtsMarksrc/components/design-system/DSAtsMark.vueCompact "ATS · 91" chip for resume cards; tier-colored numeral.
- When to use
- Mini surfaces where a full DSScoreRing is overkill — resume preview cards, picker rows.
- Related
DSScoreRing
DSAuthSplitBrandsrc/components/design-system/DSAuthSplitBrand.vueEditorial content for DSAuthSplitLayout's left panel — eyebrow, heading with optional accent span, subtitle, 01/02/03 stepped list, footnote.
- When to use
- Inside DSAuthSplitLayout's `#brand` slot. Props cover the canonical case; `#logo` slot lets consumers paint a wordmark above the body, and any prop can be omitted to skip its rendering.
- When not to use
- Don't reach for DSAuthSplitBrand outside DSAuthSplitLayout — text colors are tuned for the dark ink panel the layout provides.
- Related
DSAuthSplitLayout
DSAuthSplitLayoutsrc/components/design-system/DSAuthSplitLayout.vueSplit-panel auth chrome — ink editorial brand left, cream form right; brand collapses below 48em.
- When to use
- Every auth surface (signin, signup, forgot, reset). Pair with DSAuthSplitBrand in the `#brand` slot for the canonical editorial column; supply the form in the default slot.
- When not to use
- Don't reach for DSAuthSplitLayout for in-app pages (use DSPageLayout). Don't reach for it for marketing landing pages (use DSSection + DSHero).
- Related
DSAuthSplitBrandDSPageLayout
DSBleedRulesrc/components/design-system/DSBleedRule.vueSingle or double hairline bleed rule. Horizontal or vertical, anchored to a chosen edge with an offset, with optional column ticks.
- When to use
- Bleed-chrome rules — the vertical pair that frames a hero, a horizontal pair that brackets a section boundary, or a tick-bearing rule that announces column positions. Pass `orientation`, `position`, `offset`, `variant`, optional `ticks` (CSS lengths).
- When not to use
- Not for content separators inside a card or list — use a DSDivider for that.
- Related
DSRegMarkDSVerticalRuleDSDivider
DSBtnsrc/components/design-system/DSBtn.vueEvery button in the DS — variants for primary, secondary, ghost, marketing accents, and reveal patterns.
- When to use
- Every clickable button. Use `variant="primary"` for the page's strongest action; `secondary` for the second action; `ghost` for tertiary or subtle navigation buttons.
- When not to use
- Don't hand-roll a button with raw <button> + scoped CSS. Don't use marketing-accent variants as primary CTAs — those are for marketing decoration only.
DSCalloutsrc/components/design-system/DSCallout.vueAttention-grabbing message — sienna / warning / info / danger / soft tones, with optional icon and actions.
- When to use
- Content the reader needs to STOP and notice — genuine warnings, "honest advice" asides, urgent product notes, destructive-action confirmations, empty-state invitations. Multiple DSCallouts on a page are fine when each one is genuinely callout-content (a grid of safety warnings, a stack of onboarding asides). The discipline is content discipline: keep attention-grabbing content sparing in the design overall.
- When not to use
- Do not use DSCallout chrome as a layout device for content that is NOT a warning/aside/urgent note. FAQ entries are not callouts (use DSFaqList). Information cards in a feature grid are not callouts (use DSCard or DSFeatureCard). A block of body text is not a callout — most page copy belongs in plain prose, not boxed.
- Related
DSCardDSFaqList
DSCardsrc/components/design-system/DSCard.vueThe default surface — rounded, hairline-bordered, shadowed. Tone variants tint border + diagonal stripe overlay.
- When to use
- Wrap any group of content that needs to read as a single object — info blocks, FAQ entries, settings rows. Use `variant="bordered-only"` for ultra-quiet cards.
- When not to use
- Don't reach for DSCard when DSCallout is correct (genuine warnings or asides). Don't reach for it when you should be using a DSSection (full-width band).
- Related
DSCalloutDSSection
DSCareerDataPickersrc/components/design-system/DSCareerDataPicker.vueLeft column of the builder — checkable career-data items, one domain per tab.
DSChatsrc/components/design-system/DSChat.vueThreaded chat surface (assistant interview, feedback exchanges).
DSChatBubblesrc/components/design-system/DSChatBubble.vueSingle chat bubble — user or assistant tone.
- Related
DSChat
DSCheckboxsrc/components/design-system/DSCheckbox.vueCheckbox with DS focus + checked styles.
DSCheckRowsrc/components/design-system/DSCheckRow.vueOne row in a pass/warn/fail check list — leading status icon disk, title, optional description, optional action.
- When to use
- ATS check results, audit lists, settings consequence lists.
- Related
DSScoreRing
DSChipInputsrc/components/design-system/DSChipInput.vueTag / keyword input — chips render in front of the editable field; Enter or comma commits, Backspace on empty deletes the last chip.
- When to use
- Wherever the user composes a list of short strings — keywords, skill tags, role labels. Trims and de-duplicates on add.
- When not to use
- Don't reach for DSChipInput for fixed-vocabulary multi-select (use DSSelect with a multi prop, when it lands) or for free-form prose (use DSTextarea).
- Related
DSFieldDSInput
DSClosingCtasrc/components/design-system/DSClosingCta.vueCentered marketing-page closing pitch — Lora display title + DM Sans sub + actions slot.
- When to use
- The last DSSection on every marketing page. Pair with `bg="paper"` + `texture="stripe"`.
- When not to use
- Not for inline CTAs mid-page (use DSCtaBlock or DSCallout). Not for in-app surfaces.
- Related
DSSectionDSBtn
DSCollapsibleFieldsetsrc/components/design-system/DSCollapsibleFieldset.vueProgressive disclosure for optional form fields — "More details" / "Fewer details" toggle that reveals or hides the slot.
- When to use
- Below the always-visible fields in a form section when the long-tail fields would otherwise distract from the 80% case. The toggle stays quiet (ghost button) so the primary fields keep all the attention.
- When not to use
- Don't reach for DSCollapsibleFieldset when the hidden fields are required (use DSField directly). Don't reach for it as a generic accordion — that's not a form pattern.
- Related
DSFieldDSFieldGroup
DSCollectionEditorsrc/components/design-system/DSCollectionEditor.vueComposite editor for every /my/career/* tab — section header + DSEmptyState | (DSJumpList + add button + numbered editor entries with delete-speedbump). Slot the per-domain form in the default slot; slot AI suggestion panels in `item-extras`.
- When to use
- Every career-data tab panel (work, education, skills, projects, awards, certificates, interests, languages, profiles, publications, references, volunteer). Pass the DOMAIN_REGISTRY display + content config and the items array; the primitive owns the chrome, jump list, add button, numbered headers, and delete speedbump. The consumer composes title/subtitle/notes/warning predicates from the domain registry helpers.
- When not to use
- Don't reach for DSCollectionEditor outside the career-data tabs — UserBasicsEditor and the resume builder are different shapes. Don't reach for it for collection-style PAGES (resumes, applications) — that's DSCollectionLayout. Don't roll a hand-built numbered editor stack inside a tab — it already lives here.
- Related
DSJumpListDSEmptyStateDSPageLayoutDSCollectionLayout
DSCollectionLayoutsrc/components/design-system/DSCollectionLayout.vuePage primitive for collection-style routes (Resumes, Applications, etc.).
DSColumnGridBgsrc/components/design-system/DSColumnGridBg.vueVertical column-grid texture overlay. Layers behind a section's content.
- When to use
- Hero or feature section that needs more visual weight than the dot-fine texture.
DSComparisonTablesrc/components/design-system/DSComparisonTable.vueLabels-as-rows comparison grid. Pinned mono-caps label column; one column per entity; per-row best-value highlighting in success-tone.
- When to use
- Side-by-side comparison of a small set of entities — offers, target roles, vendor quotes. Provide `values: number[]` + `best: "highest" | "lowest"` on a row config to flag the winning column. `emphasis: "strong"` paints a tinted row for the headline number.
- When not to use
- When the data is row-major scanning (use DSDataTable). When there are too many entities for a side-by-side layout — comparison reads best at 2-5 columns.
- Related
DSDataTable
DSConfidenceMetersrc/components/design-system/DSConfidenceMeter.vueHorizontal bar meter for a single 0–100 percentage; matches DSScoreRing tier vocabulary.
- When to use
- Inline meters next to a label — extraction confidence, sub-scores under a DSScoreRing.
- Related
DSScoreRing
DSConfigListsrc/components/design-system/DSConfigList.vueConfig-driven wrapper around DSMarginList. Hosts a fixed-shape per-item config — { label, title, sub, footer, tags, metaValue, metaSub, to, actions } — so callers pass an items[] array instead of slot markup. Reach for it when the row vocabulary fits the shape.
- When to use
- Settings session lists, optimization pickers, target-role indexes — anywhere a homogeneous list of {title + sub + status tag + meta + per-row menu} pattern repeats.
- When not to use
- When a row needs custom markup (icon column, multi-line meta widget, content that breaks the title + sub shape) — use DSMarginList + DSMarginListRow directly.
- Related
DSMarginListDSMarginListRowDSStatusBadgeDSKebabMenu
DSConfirmCardsrc/components/design-system/DSConfirmCard.vueInline confirm card (no modal); used in destructive flows.
- Related
DSConfirmDialog
DSConfirmDialogsrc/components/design-system/DSConfirmDialog.vueTwo-button confirm/cancel dialog.
DSCopyButtonsrc/components/design-system/DSCopyButton.vueCopy-to-clipboard button — copies its `text` and confirms with a 3s paperclip→check swap.
- When to use
- Anywhere the user copies a value: agent prompts, API base URLs, share snippets, generated tokens.
- When not to use
- Don't hand-roll clipboard logic on a plain DSBtn. Don't use it for non-copy actions.
DSCornerStampsrc/components/design-system/DSCornerStamp.vueShort mono-caps tag pinned to a corner of a stage ("§03 — FEATURE", "DRAFT").
- When to use
- Editorial section stamps — issue numbers, draft markers, in-page chapter tags. Carries readable text (unlike a DSRegMark, which is purely a trim mark).
- Related
DSStampDSRegMark
DSCtaBlocksrc/components/design-system/DSCtaBlock.vueFull-color marketing block — radial dot grid + display title + body + knockout button. Driven by `accent` prop (10-color palette).
- When to use
- Marketing pages — audience grids, segment CTAs, feature-promo blocks.
- When not to use
- Never in-app. Marketing accents are decorative-only.
DSCtaGridsrc/components/design-system/DSCtaGrid.vueConfig-driven section: optional DSHeading + 1→3 col grid of DSCtaBlock items (accent + title + description + ctaLabel + ctaHref).
- When to use
- Audience segments, persona-specific entry points, or three parallel CTAs with the same call-to-action shape. Pick three accents from non-adjacent slots in the spectrum.
- When not to use
- Not for the closing CTA — that's DSClosingCta inside a paper+stripe section.
- Related
DSCtaBlockDSSectionDSSectionHead
DSDataTablesrc/components/design-system/DSDataTable.vueSortable, searchable, column-toggleable table. Toolbar (search + filter slot + columns menu) + body + count footer; sticky-left first column.
- When to use
- Any list-of-records surface where the user needs to scan, sort, search, or filter — applications list view, target roles, exports. Slot-based cells (`#cell-{key}`) compose status badges, formatters, action menus. Pass `persist-key` to remember column visibility across sessions.
- When not to use
- When the records carry rich detail per row (use DSCard grid). When state-pipeline is the primary slice (use DSKanbanBoard). When you only have a handful of items (use a DSField list or DSCollectionLayout).
- Related
DSKanbanBoardDSCollectionLayoutDSStatusBadge
DSDialogsrc/components/design-system/DSDialog.vueNative <dialog>-backed modal with DS chrome.
DSDialogStatussrc/components/design-system/DSDialogStatus.vueStatus footer inside a DSDialog.
DSDirectoryGridsrc/components/design-system/DSDirectoryGrid.vueConfig-driven section: optional DSHeading + 2→3→4 col grid of DSTrustItem entries (label + accent + inner SVG fragment).
- When to use
- Data-type directories, capability lists, taxonomy strips — anywhere you want to communicate breadth at a glance. Cycle through the marketing-accent palette to keep the grid reading like a printed field guide.
- When not to use
- Not for short feature highlights — use DSFeatureGrid instead.
- Related
DSTrustItemDSSectionDSSectionHead
DSDividersrc/components/design-system/DSDivider.vueHorizontal hairline with optional centered mono-caps mark.
- When to use
- Subsection breaks within a long-form prose block. Sparingly between sections — DSSectionGap is usually the right tool there.
- Related
DSSectionGap
DSDownloadResumeButtonsrc/components/design-system/DSDownloadResumeButton.vuePDF download button wired to the Typst export.
DSEditorialFoldsrc/components/design-system/DSEditorialFold.vueTwo-up split — heading + DSCopyBlock + DSAction[] on one side, visual on the other. `reverse` flips on tablet+.
- When to use
- Show-and-tell sections (a feature with a real DS visual: DSScoreCluster, DSResumeStack, DSAtsMark cards). Pass `copy` and `actions` as typed configs; the visual stays a slot.
- When not to use
- Never use as a text-only section — the empty visual column reads as a layout bug. For a heading + body without a visual, use DSSectionHead + paragraphs in a single column.
- Related
DSSectionDSSectionHeadDSResumeStackDSScoreClusterDSActions
DSEmptyStatesrc/components/design-system/DSEmptyState.vueCentered "nothing here yet" surface — optional DSIconBox + Lora title + DM Sans body + actions slot.
- When to use
- Whenever a list, collection, or detail surface has no data to render — first-time user, filtered-empty, no resumes, no applications. Pair with a single primary DSBtn in the actions slot when there is one obvious next step.
- When not to use
- Don't reach for DSEmptyState when the empty signal is genuinely a callout-content moment (warning, urgent note) — that is DSCallout. Don't use it to fill out a panel that already has its own header and supporting prose. Don't stack multiple DSBtns past two — empty states earn one CTA, not three.
- Related
DSCalloutDSCardDSIconBox
DSExamplesrc/components/design-system/DSExample.vueOne example block in a showcase — title + caption + body.
DSFaqListsrc/components/design-system/DSFaqList.vueEditorial Q&A column — Q.0X mono numeral + Lora display question + DM Sans answer + hairlines.
- When to use
- Every FAQ on every marketing page. Pass `:faqs="faqs"`.
- When not to use
- Do NOT render FAQs as a stack of DSCallout instances or DSCard wrappers. The editorial Q&A is the only FAQ pattern.
- Related
DSCalloutDSCard
DSFeatureCardsrc/components/design-system/DSFeatureCard.vueNumeral-led feature card — large Lora numeral in marketing accent + UI title + soft body.
- When to use
- Marketing pages — three- or four-up feature rows where each card carries a unique accent.
DSFeatureGridsrc/components/design-system/DSFeatureGrid.vueConfig-driven section: optional DSHeading + 1→3 col grid of DSFeatureCard items (numeral + accent + title + description).
- When to use
- The page's three core value props. Pair with `dots-large` texture for slight visual punch behind the cards.
- When not to use
- Not for more than three items — the dense numerals start to compete. Use DSDirectoryGrid or DSNumberedRow for longer lists.
- Related
DSFeatureCardDSSectionDSSectionHead
DSFieldsrc/components/design-system/DSField.vueField shell — label + helper + error vocabulary around any input.
DSFieldGroupsrc/components/design-system/DSFieldGroup.vueResponsive 2-up / 3-up field row — stacks on mobile, side-by-side at sm+.
- When to use
- Whenever a form has paired fields that read as a single concept — City + Country code, Start + End date, Year + Month. Slot any number of DSField children; equal flex keeps the columns balanced.
- When not to use
- Don't reach for DSFieldGroup when fields are independent and shouldn't share visual weight — those should stack as plain DSField siblings.
- Related
DSFieldDSMonthYearPicker
DSFieldsetsrc/components/design-system/DSFieldset.vueMulti-part form section — display heading (Lora serif, not mono), optional mono numeral, description, actions slot, body slot.
- When to use
- Inside any form that has multiple grouped chunks — application dialogs (Role / Status / Compensation), basics editor (Identity / Contact / Location), settings sub-areas. Pass `number="01"` for the numbered editorial vocabulary; omit for unnumbered.
- When not to use
- Don't reach for DSFieldset for page-level chrome (use DSPageLayout or DSSectionLabel). Don't reach for it as a generic Card — DSFieldset has form-section semantics + heading rhythm.
- Related
DSFieldDSFieldGroupDSCollapsibleFieldset
DSFigLabelsrc/components/design-system/DSFigLabel.vueSmall mono-caps figure annotation ("FIG 3.1 — Profile category view"). Defaults to bottom-left.
- When to use
- Captioning a visual block — a screenshot, an editorial fold visual, an inset diagram.
- Related
DSCornerStamp
DSGridLayoutsrc/components/design-system/DSGridLayout.vueConfigurable column grid with built-in column/gap visualization, optional bleed-mark chrome, and a slot for grid items.
- When to use
- Designing against an editorial column grid; framing a content area with bleed-mark chrome; demonstrating a column layout in the design system. Adjust `columns`, `gap`, `columnTint`, `gapTint`, `lineColor` to fit the surface; opt into `bleedMarks` + `leftLabel`/`rightLabel` for editorial framing.
- When not to use
- Not for plain CSS-grid wrappers without visualization — use a scoped `<div class="grid">` or DSSection. Not for the marketing-page bleed system — that lives on DSSection (`bleed` prop).
- Related
DSSection
DSHerosrc/components/design-system/DSHero.vueCentered marketing hero — optional pulsing pill, Lora display headline, DM Sans subhead, actions slot, optional visual slot.
- When to use
- The first section of every marketing page. One hero pattern; pages do not roll their own headers.
- When not to use
- Don't add an eyebrow except via the deliberate `pillLabel` (and only when the pill carries product info, e.g. "Guided interview").
- Related
DSInterviewCtaDSSection
DSHighlightableContentSectionsrc/components/design-system/DSHighlightableContentSection.vueVariant of DSResumeContentSection with per-highlight controls.
DSHighlightListsrc/components/design-system/DSHighlightList.vueWrapper around DSHighlightRow — title + description + the "+ Add highlight" button + empty state.
- When to use
- Anywhere a form needs a list of editable, reorderable, removable strings — work highlights, project highlights, accomplishment lists. v-model binds the array; the list owns add / reorder / remove.
- When not to use
- Don't reach for DSHighlightList for keywords or short tags (use DSChipInput). Don't roll a hand-written DSHighlightRow stack — every consumer that does ends up duplicating the same shell.
- Related
DSHighlightRowDSChipInput
DSIconsrc/components/design-system/DSIcon.vueThe DS icon set — simple line icons drawn with currentColor.
- When to use
- Every inline icon in DS surfaces. Always uses currentColor so it inherits text color.
- When not to use
- Never substitute Unicode emoji for a DS icon. Never inline a one-off SVG path when a DSIcon name covers it.
DSIconBoxsrc/components/design-system/DSIconBox.vueSolid colored rounded square that renders an icon as a white knockout.
- When to use
- When an icon needs to read as a brand-colored "block" — feature lists, settings rows, pipeline statuses.
- Related
DSTrustItem
DSInputsrc/components/design-system/DSInput.vueText input wrapped in the DS field chrome. Pairs with DSField for labels.
DSInterviewCtasrc/components/design-system/DSInterviewCta.vuePulsing pill + DSInput prompt + attach pill + dual buttons + intake-start submit logic. The product's primary entry point.
- When to use
- Inside DSHero on the homepage; in any showcase that demonstrates the guided-interview flow.
- When not to use
- Do not inline this pattern with `home__cta-card` style scoped CSS. The component IS the source of truth.
- Related
DSHero
DSJumpListsrc/components/design-system/DSJumpList.vueToc-style jump nav — mono index + title + optional tags + leader-dot rule + subtitle. Pure anchor navigation.
- When to use
- At the top of any /my/career/* tab so the user can skim the list and click to jump. Each item carries a numeric index, a title, and an optional subtitle (date range, count). Tags surface metadata: notes attached, items flagged empty.
- When not to use
- Don't reach for DSJumpList for marketing tables of contents (use DSTocRow). Don't reach for it when the list is short enough that no jump nav is needed (under ~3 items, the header alone suffices). Don't compose it by hand inside a career-data tab — the DSCollectionEditor primitive already wires it.
- Related
DSTocRowDSPageLayoutDSCollectionEditor
DSKanbanBoardsrc/components/design-system/DSKanbanBoard.vueHorizontal column board — auto-fit grid of columns with horizontal scroll. Owns layout only; consumers wire drag-drop on the column body slot.
- When to use
- Whenever a list of items belongs in a status pipeline — applications by stage, targets by status, anything where "what state is this in" is the primary slice. Pair with DSKanbanColumn + DSKanbanCard.
- When not to use
- Don't reach for DSKanbanBoard when the items don't have a meaningful pipeline (use DSCollectionLayout with a card grid). Don't reach for it when there are too few items to justify the board overhead — under ~3 columns of activity, a list reads better.
- Related
DSKanbanColumnDSKanbanCardDSCollectionLayout
DSKanbanCardsrc/components/design-system/DSKanbanCard.vueDraggable card surface — cream-on-ink with cursor-grab + hover shadow. Slot-based content; click event for opening an edit dialog.
- When to use
- Inside a DSKanbanColumn body slot. Slot whatever fields the card carries — role + company + location for applications, title + companies + match for targets.
- When not to use
- Don't reach for DSKanbanCard outside a kanban — the cursor-grab affordance is a lie if the card isn't draggable. Use DSCard for a static surface.
- Related
DSKanbanBoardDSKanbanColumnDSCard
DSKanbanColumnsrc/components/design-system/DSKanbanColumn.vueSingle column inside a DSKanbanBoard — mono-caps label + count badge + tone variant. Body slot for cards; optional footer slot for composed columns.
- When to use
- Inside a DSKanbanBoard. Tone matches the column's status family — neutral / info / accent / warning / success. Footer slot is for the rare composed column (e.g. an "Accepted" body with a collapsible "Closed" section).
- When not to use
- Outside a DSKanbanBoard — the layout depends on the board's grid track. For a freestanding tinted-bg list use DSCard with a tone modifier instead.
- Related
DSKanbanBoardDSKanbanCard
DSKebabMenusrc/components/design-system/DSKebabMenu.vueThe canonical "···" overflow trigger paired with a DSMenu — the in-app per-row actions control.
- When to use
- Per-item action menus on resume cards, application rows, settings lines, and any list-row where actions need to live behind a kebab. Pass `items: DSMenuItem[]` and listen to `select`. Replaces UDropdownMenu for in-app surfaces.
- When not to use
- Not for primary page-level CTAs — those are DSBtn. Not for marketing surfaces — kebab menus are an in-app pattern. When the trigger is something other than a kebab (e.g. an avatar, a button row), use DSMenu directly behind your own trigger.
- Related
DSMenuDSBtn
DSLoadingPanelsrc/components/design-system/DSLoadingPanel.vueCentered DSSpinner + mono caps caption inside a min-height panel — the canonical async list/grid loading state.
- When to use
- Async content regions (lists, grids, panels) while data is being fetched. Pass `caption` to describe what is loading and `min-height` to fill larger regions.
- When not to use
- For an inline spinner inside a button or row, use DSSpinner directly — DSLoadingPanel always centers in a min-height block.
- Related
DSSpinner
DSMarginLabelsrc/components/design-system/DSMarginLabel.vueVertical mono-caps text in a side gutter ("RN — FEATURE — §03"). Hidden on mobile.
- When to use
- Editorial gutter annotations on a framed stage. `accent="ink"` for structural labels, `accent="sienna"` for warmer editorial labels.
- When not to use
- NEVER as an eyebrow above a heading.
- Related
DSPrintPageDSGridLayoutDSStamp
DSMarginListsrc/components/design-system/DSMarginList.vueList shell with left margin gutter + optional right meta column. Stacks DSMarginListRow children with vertical hairlines and tick marks at every divider intersection.
- When to use
- Resume / target-role / audit indexes where each row needs a rotated annotation in the margin (anchor vs derived, status family, stage).
- When not to use
- Plain text lists with no annotation — reach for a DSCard with semantic markup instead.
- Related
DSMarginListRow
DSMarginListRowsrc/components/design-system/DSMarginListRow.vueSingle row inside DSMarginList — slots: rotated #label, default content, #meta, #actions (kebab/buttons). Optional `to` prop renders the row as a NuxtLink with a trailing chevron; `labelTone="emphasis"` darkens the gutter label for an anchor row.
- Related
DSMarginListDSAtsMarkDSConfigList
DSMarksrc/components/design-system/DSMark.vueThe Resume Notebook logomark — three stacked rules above a card silhouette.
- When to use
- Brand identity surfaces; small mark next to the wordmark in nav and footer.
DSMarketingFootersrc/components/design-system/DSMarketingFooter.vueEditorial footer — brand block + 3 link columns + bottom mono-caps bar. Padding-inline matches DSSection.__inner.
- When to use
- The marketing layout shell. Not for in-app use.
DSMarketingNavsrc/components/design-system/DSMarketingNav.vueMarketing-shell nav: brand mark, primary links, log in + Start free button, mobile toggle.
- When to use
- The marketing layout shell. Not for in-app use.
DSMenusrc/components/design-system/DSMenu.vuePopover-style list of menu items — card-styled surface, config-driven, with keyboard arrow-key navigation and destructive/disabled item states.
- When to use
- When you need a list-of-actions popover behind a custom trigger. Pass `items: DSMenuItem[]`; consumer owns open state and outside-click dismissal. Listen to `select` for the chosen item and `close` for Escape/select dismissal.
- When not to use
- For the canonical "···" overflow trigger, use DSKebabMenu — it composes DSMenu and handles open/close, outside-click, and focus return for you. Not a substitute for DSDialog (modal flows) or DSCallout (inline asides).
- Related
DSKebabMenuDSDialog
DSMobilePickerBarsrc/components/design-system/DSMobilePickerBar.vueMobile bottom-bar variant of the builder picker.
DSMonthYearPickersrc/components/design-system/DSMonthYearPicker.vueYear input + month select bound to a single YYYY-MM string. Month disabled until a year is entered.
- When to use
- Any month-resolution date in the app — employment start/end, schooling, project span. Empty string means "neither set"; year-only is valid (`2024`).
- When not to use
- Don't reach for DSMonthYearPicker when you need day-resolution (use a date input) or free-form text (use DSInput).
- Related
DSFieldDSFieldGroup
DSNotePanelsrc/components/design-system/DSNotePanel.vueQuiet sticky-note scratchpad surface — soft amber wash, dashed amber hairline, icon + title + optional description above the slot.
- When to use
- Any "private to you, never appears on the resume" surface — work-entry notes, project context, internal reminders. Slot a DSTextarea inside.
- When not to use
- Don't reach for DSNotePanel when content is meant to be read by others (use DSCard). Don't reach for it when the surface needs to grab attention (use DSCallout).
- Related
DSCalloutDSTextarea
DSNumberedRowsrc/components/design-system/DSNumberedRow.vueSienna numeral + UI-bold title + secondary body, in a 2-column row layout.
- When to use
- Long-form numbered lists in editorial sections (e.g. "7 rules for a strong resume").
- When not to use
- Not for short feature grids — use DSFeatureCard. Not for FAQ — use DSFaqList.
- Related
DSFeatureCardDSFaqList
DSPageLayoutsrc/components/design-system/DSPageLayout.vueIn-app page chrome — Lora display title + optional DM Sans subtitle + actions slot + body slot. Width variants mirror DSSection.
- When to use
- The standard wrapper for any authenticated in-app page (/dashboard, /career-data, /applications, /settings). Pick `width="wide"` (72rem default) for full pages; `narrow` (56rem) for dense settings or single-form surfaces; `reading` (44rem) for long-form single-column copy. Compose DSSectionLabel inside the body slot for sub-sections.
- When not to use
- Don't use on marketing surfaces — use DSSection + DSHero + DSSectionHead instead. Don't use for list-of-items pages that need count + filters + view tabs — that's DSCollectionLayout. Don't roll your own <main> + h1 + scoped CSS; the chrome lives here.
- Related
DSCollectionLayoutDSSectionLabelDSSection
DSPanelHeadsrc/components/design-system/DSPanelHead.vuePanel header — title + sub + trailing actions slot.
DSPickerHighlightsPanelsrc/components/design-system/DSPickerHighlightsPanel.vuePer-item highlights selector inside DSCareerDataPicker.
DSPickerItemCardsrc/components/design-system/DSPickerItemCard.vueOne row in DSCareerDataPicker.
DSPrintPagesrc/components/design-system/DSPrintPage.vueWraps content in the editorial bleed frame — double rules + corner registration marks + circles + margin labels.
DSProgressListsrc/components/design-system/DSProgressList.vueWrapper for a stacked DSProgressListRow list.
DSProgressListRowsrc/components/design-system/DSProgressListRow.vueRow with leading icon + label + trailing meter + count.
DSPullQuotesrc/components/design-system/DSPullQuote.vueEditorial pull quote — display-italic line with sienna mark + optional cite.
- When to use
- At most once per page, for a brand-defining product line.
DSRadiosrc/components/design-system/DSRadio.vueRadio with DS focus + checked styles.
DSRegCirclesrc/components/design-system/DSRegCircle.vueOutline circle (1rem) centered on the top or bottom edge of a stage. Companion to DSRegMark.
- When to use
- Pair with four DSRegMark crosshairs to form the canonical print-bleed chrome (4 corner marks + 2 centered circles).
- Related
DSRegMarkDSPrintPage
DSRegMarksrc/components/design-system/DSRegMark.vueCorner registration crosshair (1rem horizontal + vertical hairline). Optional inner circle (`crosshair-circle` variant) and sienna accent.
- When to use
- Anywhere a surface needs editorial framing — DSGridLayout, DSPrintPage, custom bleed chrome. Pass `position` (top-left / top-right / bottom-left / bottom-right / center). Use `crosshair-circle` + `sienna` for warmer editorial moments; default `crosshair` + `ink` for structural trim.
- When not to use
- Not as a decorative dot. The mark is a registration/trim mark — it belongs at the four corners of a frame, paired with rules through the crosshair centers.
- Related
DSGridLayoutDSPrintPageDSRegCircleDSBleedRule
DSReorderButtonssrc/components/design-system/DSReorderButtons.vueUp/down arrows for reorderable lists.
DSResumeBuilderHeadersrc/components/design-system/DSResumeBuilderHeader.vueResume builder masthead — title chip, target role chip, ATS chip + issues drawer.
DSResumeCardsrc/components/design-system/DSResumeCard.vueSingle card primitive for a resume. Container queries on its own width drive the layout: below 24rem it reads as a portrait thumbnail (ATS as a top-edge tab, single-column body); at/above 24rem it reads as a flat list card (ATS in the top-right, 3-column body). Tag + actions footer is identical at both modes.
- When to use
- Anywhere a resume is displayed — grids, scroll strips, sample pickers, dashboard collections. Pass a ResumeCardData-shaped `resume` object, an optional `tag` string, and any per-card actions via the `#actions` slot. The parent controls the card width; the card adapts.
- When not to use
- Not for marketing surfaces — use DSResumeStack / DSResumeStackCard for the fanned-deck visual. Not for picker rows where the user selects one resume to act on — use DSResumePickerRow.
- Related
DSResumePickerRowDSCollectionLayoutDSAtsMarkDSResumeStack
DSResumeContentSectionsrc/components/design-system/DSResumeContentSection.vueSection grouping inside DSResumeContentsPanel.
DSResumeContentsPanelsrc/components/design-system/DSResumeContentsPanel.vueMiddle column of the builder — selected items per domain.
DSResumeDetailsDialogsrc/components/design-system/DSResumeDetailsDialog.vueDialog for editing resume metadata (title, target role).
DSResumePickerListsrc/components/design-system/DSResumePickerList.vueBordered container that hosts a stack of DSResumePickerRow children with row dividers.
- When to use
- Wrapping multiple DSResumePickerRow into one cohesive picker card.
- Related
DSResumePickerRow
DSResumePickerRowsrc/components/design-system/DSResumePickerRow.vueA bordered row in a list of resumes — name + optional sub-line + DSAtsMark score chip + trailing slot for actions. Renders as a `<button>` for keyboard + click handling.
- When to use
- Picker patterns where the user selects one resume to act on (re-score, optimize, attach to an application). Compose inside DSResumePickerList.
- When not to use
- Not for browsing/grid views — use DSResumeCard. Not for read-only display — this is a button, it's interactive by design.
- Related
DSResumePickerListDSAtsMark
DSResumePreviewsrc/components/design-system/DSResumePreview.vuePresentational resume preview — renders a JsonResume to SVG (Typst) with the paper sizing + corner-mark frame. Backs DSResumeViewPanel and the public /render page.
DSResumeSectionGridsrc/components/design-system/DSResumeSectionGrid.vueReusable section-tabs / domain switcher. Versatile.
DSResumeStacksrc/components/design-system/DSResumeStack.vueFanned mini resume-card visual — used as the visual slot in marketing heroes and editorial folds.
- When to use
- A `#visual` slot for DSHero or DSEditorialFold when the surface speaks to "many resumes from one profile".
- When not to use
- Not as a real product preview — these are stylised marketing cards, not actual resumes.
- Related
DSHeroDSEditorialFoldDSResumeStackCard
DSResumeStackCardsrc/components/design-system/DSResumeStackCard.vueSingle mini resume card — role + company + DSAtsMark + bar fills. Composed by DSResumeStack.
- When to use
- Inside DSResumeStack. Direct use is rare.
- Related
DSResumeStackDSAtsMark
DSResumeViewPanelsrc/components/design-system/DSResumeViewPanel.vueRight column — live SVG preview via Typst pipeline.
DSSaveStatussrc/components/design-system/DSSaveStatus.vueCompact saving / saved / error indicator. Idle renders nothing.
- When to use
- Next to a DSPageLayout actions slot or trailing a form to surface auto-save state. Pair with a 500ms-debounce save composable in production.
- When not to use
- Don't reach for DSSaveStatus for explicit-save flows (use DSBtn states instead). Don't reach for it as a generic loading indicator (use DSSpinner).
- Related
DSSpinnerDSAlertBanner
DSScoreClustersrc/components/design-system/DSScoreCluster.vueConfig-driven row of DSScoreRing widgets, sized to live as the #visual slot of an editorial fold.
- When to use
- The visual side of an editorial fold that explains scoring. Pass `rings` as a typed array — value, label, caption per entry.
- Related
DSScoreRingDSEditorialFold
DSScoreRingsrc/components/design-system/DSScoreRing.vueCircular SVG score chart with tier-colored fill (sienna / amber / red).
- When to use
- Display a single 0–100 score where the visual weight is the message — ATS reports, confidence overviews.
- Related
DSConfidenceMeterDSAtsMark
DSSectionsrc/components/design-system/DSSection.vueFull-width band — bg variant + texture + width + tight + bleed + margin labels. The marketing-page page-block primitive.
- When to use
- Every full-width section on every marketing page. Pick `bg="paper"` (cream), `bg="sheet"` (white), or `bg="ink"` (dark). Add `texture="dots-fine|dots-large|stripe"` for visual rhythm.
- When not to use
- Don't roll your own <section> with ad-hoc bg/padding. Don't flip-flop bg colors aggressively — use a consistent bg + texture variation instead.
- Related
DSSectionGapDSSectionHead
DSSectionGapsrc/components/design-system/DSSectionGap.vueFull-width hairline divider between sections.
- When to use
- Between every pair of marketing-page sections. Provides the visible seam without color flips.
- Related
DSSection
DSSectionHeadsrc/components/design-system/DSSectionHead.vueh2/h3 + optional sub paragraph. No eyebrow slot — by design.
- When to use
- The header of any non-hero section. Pass markup into the `title` / `sub` slots if you need inline elements; the prop versions are plain text.
- When not to use
- Don't add a mono-caps eyebrow above this; the rule is no eyebrows.
- Related
DSSection
DSSectionLabelsrc/components/design-system/DSSectionLabel.vueQuieter sub-section heading for in-app pages — Lora display title + optional DM Sans sub + optional trailing actions slot. Start-aligned, h2/h3.
- When to use
- Inside an in-app page (typically inside DSPageLayout's body slot, or inside a card) to introduce a sub-section: "Your resumes", "Optimize your score", "Recent activity". Default level is h2 (one step below the page's h1); drop to h3 for nested sub-sections.
- When not to use
- Don't use on marketing surfaces — that's DSSectionHead (display Lora, larger scale, supports a centered variant). Don't add a mono-caps eyebrow above this; the heading carries the section. Don't use as the page-level title — that's DSPageLayout's job.
- Related
DSPageLayoutDSSectionHeadDSPanelHead
DSSectionProgressFabsrc/components/design-system/DSSectionProgressFab.vueFixed-position floating action button with a circular progress arc and a popover overlay.
- When to use
- Drill-in surface for "where am I in this multi-step flow?" — interview chat sections, multi-page wizards, any bottom-right anchor that summarizes progress and offers a jump-to overlay. The default slot fills the popover; the FAB owns toggle, click-outside, Escape, and focus return.
- When not to use
- Don't reach for DSSectionProgressFab when there's no progress to report (use a plain button). Don't reach for it when the overlay needs a full-screen modal (use DSDialog).
- Related
DSScoreRingDSDialog
DSSelectsrc/components/design-system/DSSelect.vueNative-looking select with DS chrome.
DSSettingsRowsrc/components/design-system/DSSettingsRow.vueOne row in a settings list — label + value + action.
DSSpinnersrc/components/design-system/DSSpinner.vueInline loading indicator — circle outline + rotating arc, sized sm / md / lg, color via currentColor.
- When to use
- Inside a button while a request is in flight; in a toolbar next to a status label; anywhere a small "in progress" cue is needed. Pair with a label change ("Saving…") for an accessible loading state.
- When not to use
- For panel-sized loading states use DSLoadingPanel — a bare DSSpinner alone in a tall region reads as a layout bug.
- Related
DSLoadingPanel
DSSpotMarksrc/components/design-system/DSSpotMark.vueCircular registration medallion — holds a glyph or short tag (RN, 01, ATS).
- When to use
- Editorial ornament — masthead identifiers, section markers.
- When not to use
- Not as an eyebrow over a heading.
DSStampsrc/components/design-system/DSStamp.vueSmall mono caps registration label ("DRAFT · 03", "REVIEW NEEDED").
- When to use
- Editorial meta annotations — margin labels, surface headers in dense in-app layouts. Carries actual information.
- When not to use
- NEVER as an eyebrow above a heading (mono caps text above a section title is always wrong). The heading carries the section.
DSStatBadgesrc/components/design-system/DSStatBadge.vueBig Lora numeral + mono caps label. Reserved for actual stats — numbers, percentages, counts, durations.
- When to use
- A row of real numeric stats: "97%", "12 data types", "5 min", "$0". The big display weight is justified by the value being a meaningful figure the reader can latch onto.
- When not to use
- Do not use the stat-badge chrome for slogans, brand qualifiers, or vibes-words ("Free / Minutes / Yours"). The big numeral is for stats; if you need three brand qualifiers, use plain prose or a callout, not a stat row.
DSStatTilesrc/components/design-system/DSStatTile.vueBordered tile with a large mono numeric and a small mono-caps label. Hover lift when the tile is actionable.
- When to use
- At-a-glance count surfaces — dashboard tiles (Active Postings, Applicants), interview ATS readouts, anywhere a single number deserves prominence. Slot the body for richer values like "USD 245k". Pass `to` to make the tile a clickable NuxtLink.
- When not to use
- Don't reach for DSStatTile when the metric needs a chart or trendline (use DSScoreRing or a custom card). Don't reach for it for a multi-column data row (use DSDataTable).
- Related
DSCardDSScoreRing
DSStatusBadgesrc/components/design-system/DSStatusBadge.vueTiered status chip — pass/strong/fair/low/error etc., with DS color tokens.
- When to use
- Anywhere a value needs a one-word verdict (Strong/Fair/Low) with the matching status color.
DSSwatchsrc/components/design-system/DSSwatch.vueColor swatch for the colors showcase.
DSTabssrc/components/design-system/DSTabs.vueTab nav with editorial styling.
DSTemplateGallerysrc/components/design-system/DSTemplateGallery.vueConfig-driven section: optional DSHeading + 1→3 col grid of preview cards (image + label + optional ATS score + optional download link).
- When to use
- Showcasing real artifacts — resume previews, exported PDFs, exemplar templates, case-study covers. Score and download fields are optional, so it works for static galleries too.
- Related
DSAtsMarkDSSectionDSSectionHead
DSTextareasrc/components/design-system/DSTextarea.vueAuto-growing textarea with field-sizing: content.
DSTickersrc/components/design-system/DSTicker.vueHorizontally scrolling mono caps marquee.
DSToastsrc/components/design-system/DSToast.vueTransient notification surface — card with tone-colored leading rule, optional icon, message, optional action, dismiss button. Renders one toast; lifecycle is the consumer's responsibility.
- When to use
- Brief acknowledgements triggered by an event ("Resume saved", "Sync failed — retry"). The component renders one toast surface; the consumer manages stacking, positioning, and auto-dismiss timing.
- When not to use
- Not for persistent conditions — use DSAlertBanner. Not for in-page warnings or asides — use DSCallout. Do not extend DSToast to handle stacking or timeouts; those concerns belong in a consumer-owned toast region.
- Related
DSAlertBannerDSCallout
DSTocRowsrc/components/design-system/DSTocRow.vueRow in a long-form table of contents.
DSTogglesrc/components/design-system/DSToggle.vueOn/off switch.
DSTokensPanelsrc/components/design-system/DSTokensPanel.vueLive token editor floated on every DS showcase.
DSTrustItemsrc/components/design-system/DSTrustItem.vueSolid-color icon box (knockout SVG) + title + soft body. Driven by `accent` prop.
- When to use
- Marketing pages — trust strips, data-types directories, feature tables.
DSTypeSpecsrc/components/design-system/DSTypeSpec.vueType specimen row for the typography showcase.
DSUpgradeCardsrc/components/design-system/DSUpgradeCard.vueIn-app upsell card — Lora title + DM Sans body + optional benefit checklist + primary action. Cream-on-ink only; no marketing accents.
- When to use
- In-app conversion moments — guest sign-up nudges, free-to-Pro upgrades, feature unlocks. Pass `benefits` for the icon-led checklist; use the `actions` slot for the primary DSBtn.
- When not to use
- Not for marketing-page closing pitches — that is DSClosingCta. Not for warnings, asides, or urgent notes — that is DSCallout. Not for plain content surfaces — that is DSCard. Don't reach for marketing-accent palettes here; this is in-app chrome, not editorial decoration.
- Related
DSCardDSCalloutDSClosingCtaDSBtn
DSUploadZonesrc/components/design-system/DSUploadZone.vueEditorial drop zone — corner crosshairs + 3 states (empty/dragging/filled) + drag-drop handlers.
- When to use
- Any file-upload surface. Listen to `@file` for the picked File.
DSVerticalRulesrc/components/design-system/DSVerticalRule.vueFreestanding faint vertical hairline at a configurable x offset. Sienna by default; ink optional.
- When to use
- Decorative vertical mark on any stage — bracketing a stage in the gutter, marking a section boundary, or pairing with DSBleedRule ticks at matching x positions.
- When not to use
- Not for the column-track visualization inside a grid — that's DSGridLayout's own overlay layer (different concept, different responsibility).
- Related
DSBleedRuleDSGridLayout
DSWordmarksrc/components/design-system/DSWordmark.vueMark + RN monogram + "Resume Notebook" set in Lora; theme-aware.
- When to use
- Anywhere the brand needs a name, not just a glyph (nav, footer, login pages).
- Related
DSMark