Tomatick

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Sora's wide, geometric numerals make the huge countdown read at a glance, and they stay friendly at small UI sizes.

• SoraHeadings: countdown ~72px 800, tabular figures
• SoraBody: UI 13-16px, 400-500

Who it is for

• Students structuring study blocks
• Developers doing focused coding sprints
• Founders time-boxing tasks
• Remote teams sharing focus settings

Layout

1. Minimal top bar on a full-bleed crimson gradient: clock icon + title left, settings gear right
2. Centered translucent segmented control: Focus / Short Break / Long Break
3. Large circular progress ring with a big white MM:SS countdown
4. White pill START button with soft shadow
5. Session counter (#1) with four cycle dots and a status message ('Time to focus!')
6. White rounded task card below: empty-state message and '+ Add task…'; task rows with estimate vs actual and a projected finish time footer
7. Settings dialog for durations, long-break interval, auto-start, sound

Palette

Bold, focused, energetic, minimal, motivating. The whole screen becomes the mode colour, so state is unmistakable at a glance.

• focus background top#d4122f
• focus background bottom#e9144a
• short break teal#228377
• long break steel blue#3d6a9e
• text on colour#ffffff
• card#ffffff
• card text#151b24

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary *
• secondary
• accent
• destructive *

Type scale

Display

Sora / system 800 at ~72px for the countdown with tabular figures

Body

Sora 400-500, 13-16px

A friendly geometric sans; the timer digits are the only large type on screen. Accessibility: body copy 16px or larger at 1.5+ line height with a ~70ch max measure; no text below 12px; weights under 400 only at 32px+; uppercase reserved for short labels with 0.05em+ tracking.

Spacing and imagery

Single centered column (~580px) on a full-viewport colour field; 18px radius cards and pill buttons; generous vertical spacing around the ring.

None; only the progress ring, icons and a confetti burst at cycle completion.

Components

• Mode segmented control
• Circular progress ring
• Countdown display
• Start/Pause button
• Cycle dots and session number
• Status message
• Task list card with add input
• Task row with estimate/actual pomodoros
• Projected finish time footer
• Settings dialog (durations, interval, toggles)
• Share settings link
• Confetti celebration

Interactions

• Start/pause/skip session
• Auto-cycle between focus and breaks
• Full-screen colour transition per mode
• Countdown in browser tab title
• Chime at session end (Web Audio)
• Increment actual count on active task when focus ends
• Drag to reorder tasks
• Settings encoded in URL for sharing

Data

• TimerSettings{focus_min, short_min, long_min, long_interval, auto_start_breaks, auto_start_focus, sound}
• TimerState{mode, started_at, paused_remaining_ms, session_index}
• Task{id, title, estimate, actual, done, position}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Tomatick**, a full-screen focus timer for students, developers and founders. It runs Pomodoro-style focus and break sessions, fills the screen with a colour that signals the current mode, and ties completed focus sessions to a small task list with estimates, so users can see planned versus actual effort and when they'll finish.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: ToggleGroup, Dialog, Switch, Slider), lucide-react. dnd-kit for task reordering, Framer Motion for colour transitions and ring animation, canvas-confetti for the cycle celebration. No backend: settings live in the URL query string and tasks/state in localStorage (with safe fallbacks).

### Pages & layout
Single screen:
1. **Top bar**: clock icon + title left, settings gear right.
2. **Mode switcher**: translucent segmented control (Focus, Short break, Long break).
3. **Timer**: large SVG ring showing progress, big white countdown with tabular digits.
4. **Primary control**: white pill Start/Pause, with a small skip button appearing while running.
5. **Cycle indicator**: session number and dots for the current cycle; friendly status line.
6. **Tasks card**: white rounded card with add-task input, rows showing title, estimate/actual (e.g. 2/4), done checkbox, menu; footer with projected finish time.
7. **Settings dialog**: focus/short/long durations, long-break interval, auto-start toggles, sound toggle, "Copy share link".

### Design system
Mode-driven theming. Tokens per mode on `:root[data-mode]`: focus `--bg-from: #d4122f; --bg-to: #e9144a`, short break `#1a7a6f → #228377`, long break `#2f5b8f → #4278ba`; `--on-bg: #ffffff`, `--card: #ffffff`, `--card-foreground: #151b24`, translucent surfaces `rgb(255 255 255 / .12)`. Font: Sora 400/500/700/800 with `font-variant-numeric: tabular-nums` on the countdown. Scale 13/16/20/72. Radius 18px cards, pills for buttons. Motion: 600ms background cross-fade between modes, ring updates each second with a linear ease. Card secondary text uses `--card-muted: #5b6472`.

### Components & interactions
Timer engine derives remaining time from a stored `started_at` timestamp, not a decrementing counter, so reloads, background tabs and sleep keep accuracy. Start/Pause (running, paused, finished states). Session end plays a short Web Audio tone (toggleable), increments the active task, and auto-advances if enabled. Tab title shows the countdown. Tasks: add (Enter), edit inline, reorder by drag or keyboard, mark done, delete with undo toast. Empty tasks state explains how counting works. Completing a full cycle fires confetti once.

### Data & state
TimerSettings (from URL params with defaults and validation), TimerState (mode, started_at, paused_remaining_ms, session_index), Task[] in localStorage. A pure `nextState(state, event, now)` reducer handles transitions and is unit-tested. Projected finish sums remaining estimates × focus length plus breaks.

### Accessibility
Every gradient end was darkened where needed so white text reaches 4.5:1 on all mode backgrounds. Countdown exposed in an `aria-live="polite"` region that announces only at minute boundaries and at session end (not every second). Mode switcher is a radiogroup. Visible focus rings (white 2px with dark offset). Confetti and background transitions disabled under reduced motion; sound is never the only cue. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: white text #ffffff on #d4122f = 5.35:1; white text #ffffff on #e9144a = 4.5:1; white text #ffffff on #1a7a6f = 5.18:1; white text #ffffff on #228377 = 4.58:1.

### Security
No accounts or backend. Validate and clamp URL parameters (e.g. 1-120 minutes) with zod; ignore unknown params. Wrap localStorage access in try/catch. No third-party trackers. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Tiny JavaScript payload; lazy-load confetti. Use `requestAnimationFrame` only while visible; rely on timestamps otherwise. Title, description and OG image; installable PWA manifest optional. Target Lighthouse 100 performance.

### Guardrails
- Original copy; no trademarked technique names in the brand.
- Don't collect any personal data.
- Typed components, no `any`, visible errors.
- Done when: a running timer survives reload and a 5-minute background tab with correct remaining time; modes recolour the page; finishing focus increments the active task; settings round-trip via a shared URL; keyboard users can operate everything.

Open the builderAll templatesThis palette on its own