Design system

Reusable foundation for Toolartisan. Tokens, primitives, and product patterns for 300+ tools.

1. Color palette

Primary

Secondary

Success

Warning

Error

Info

Canvas

Raised

Theme switcher lives in the top bar. Dark mode uses elevated slate surfaces.

2. Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text for product copy and helper sentences.

Caption text for metadata and timestamps.

Label text for form fields

const tools = 300

7. Buttons

8. Forms

Your display name

Radio group

Drag and drop files here, or browse

Browse files

Data display

FreePremiumAISuccessWarningErrorInfo
Account settings

Card

Surface for grouping related content.

Cards are for interactive or grouped content, not decorative chrome.
ToolStatusPlan
Video TranscriberLiveFree
Image CompressorLiveFree
AI ChatBetaPremium

Tab panel for buttons docs.

72%

Feedback states

No results

Try another search query.

Something went wrong

Please try again in a moment.

All set

Your export is ready to download.

Overlays

Press Ctrl/Cmd + K for the command palette.

Product components

You
Summarize this meeting transcript.
AI

Assistant

Here are three action items from the call, ready for your team.

Compression result

hero.png, 2.4 MB to 780 KB

Saved 68% with visually lossless quality.

Video Transcriber

Upload a video and get speaker-aware transcripts with export options.

New
98% 1–5 min Open

AI Chat

Conversational assistant with file upload and export.

AI
97% Instant Open

Live Transcribe

Leave your phone or laptop recording through a meeting or lecture. Get live captions, full notes, a summary, and the overall discussion.

New
96% Live Open

40. Folder structure

app/
  assets/css/          tokens.css, main.css
  components/
    ui/                primitives (Button, Input, Dialog, …)
    layout/            Sidebar, TopBar, ThemeSwitch, menus
    feedback/          ErrorState, SuccessState
    tools/             ToolCard, ToolPageShell, shared/
    marketing/         landing only
    search/            solution search
  composables/         useToast, useGlobalLoading, tools/
  stores/              toast, loading
  pages/
    design-system.vue  this showcase
    tools/[slug].vue   thin tool pages
  utils/               tools catalog, cn, toolRegistry

Add tools as thin pages that compose shared shells and UI. Register catalog metadata in utils/tools.ts so browse, search, and cards stay DRY past 300 tools.