Recallr

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

Urbanist gives the bright, rounded geometric headline, and Atkinson Hyperlegible Next was designed so every letter is distinct, which suits study cards read at speed.

• UrbanistHeadings: hero 80px bold at -0.025em, H2 48px
• Atkinson Hyperlegible NextBody: body 17px and flashcard text

Who it is for

• Students preparing for cumulative exams
• Language learners building vocabulary
• Developers memorizing technical concepts
• Study groups sharing material

Layout

1. Transparent top bar on saturated blue: card icon + wordmark left, 'Try the demo' text and white pill 'Get started' right; turns translucent on scroll
2. Centered hero: line icon, huge bold headline, one-line subtitle, white pill CTA + text link
3. Browser-framed product mock of review mode: back link, deck name, progress count, progress bar, large card with term
4. Three numbered step cards (Write, Organize, Review) with big blue numerals
5. Large centered pull-quote with name and role
6. Closing call-to-action section
7. App: decks grid/list, deck detail with inline editor, Due Today, full-screen review, Trash, auth

Palette

bright, focused, encouraging, simple, energetic. Saturated blue signals concentration, and white space keeps it light.

• hero blue (deep)#0050b8
• hero blue (bright)#0072e5
• background#ffffff
• text#000000
• muted text#6b7280
• card on blue#0a6cf0
• on-blue text#ffffff

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

Urbanist Bold 86px, -2.15px tracking; H2 48px semibold

Body

System UI 17px (the system face is not on Google Fonts; a vibld project loads Atkinson Hyperlegible Next)

A rounded geometric display face on a system body keeps it friendly and native-feeling.

Spacing and imagery

Big hero padding, 1000-1150px container, step cards 16px radius with large soft shadows, pill CTAs; review mode centers one wide card.

No photos; line-icon logo; a browser-framed product mock of review mode as the hero visual.

Components

• Scroll-aware transparent header
• Hero with icon and dual CTA
• Browser-frame product mock
• Numbered step cards
• Pull quote
• Deck card with emoji
• Grid/list view toggle
• Inline markdown card editor with front/back separator
• Due Today grouped list
• Full-screen review card with Reveal, Remembered, Forgot
• Progress bar and counter
• Trash with restore
• Auth card with sign-in/up tabs and Google button

Interactions

• Tab/--- splits front and back while typing; card saves in place
• Reveal flips the card
• Remembered doubles the interval; Forgot halves or resets it
• Keyboard shortcuts in review (Space reveal, 1/2 rate)
• Per-deck sort (due, created, A-Z) and filter (all/due)
• Soft delete to Trash and restore
• Demo route with seed data
• Header background fades in on scroll

Data

• Deck{id, owner_id, name, emoji, view grid|list, sort, created_at}
• Card{id, deck_id, front_md, back_md, interval_days, due_at, last_reviewed_at, deleted_at}
• Review{id, card_id, rating remembered|forgot, reviewed_at, prev_interval, next_interval}

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 **Recallr**, a spaced-repetition flashcard app for students, language learners and developers. Writing a card should take seconds, decks keep topics apart, and a daily review queue tells learners exactly what to study, rescheduling each card from a simple remembered/forgot rating.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix: Tabs, Dialog, DropdownMenu, ToggleGroup) and lucide-react. Use TanStack Query for data, react-markdown + remark-gfm (sanitized) to render card faces, Framer Motion for the flip, dnd-kit for reordering decks, date-fns for due dates, and react-hook-form + zod for auth and deck forms. Use Supabase for Auth (email + Google) and Postgres for decks, cards and reviews. Scheduling logic lives in a pure, tested module.

### Pages & layout
1. **Landing**:
   - Transparent header over a saturated blue gradient (logo left, "Try the demo" and a white pill right) that turns translucent on scroll.
   - Hero: line icon, huge headline, one-line subtitle, two CTAs, and a browser-framed product mock of review mode.
   - Three numbered step cards, a large quote (labelled as a sample), a closing CTA and a footer.
2. **Auth**: one card with Sign in / Sign up tabs, Google button and email form.
3. **Decks**: emoji deck cards in a grid or list, with due counts and a new-deck button.
4. **Deck detail**: an inline editor row at the top (front, separator, back), then the card list with sort (due, created, A-Z) and filter (all, due).
5. **Due today**: cards across all decks, grouped by deck, with a "Start review" button.
6. **Review**: full screen with back link, deck name, n/N counter, progress bar, a large card, Reveal, then Forgot / Remembered.
7. **Trash**: restore or delete forever.
8. **/demo**: seeded decks, no login.

### Design system
- Tokens: `--hero-from: #0050b8`, `--hero-to: #0072e5`, `--background: #ffffff`, `--foreground: #0a0a0a`, `--muted-fg: #6b7280`, `--primary: #0a6cf0`, `--success: #11813b`, `--danger: #dc2626`.
- The review canvas uses `--hero-from` with a lighter card in `--primary` and white text.
- Fonts: Urbanist for headings (hero 80px bold at -0.025em; H2 48px), system UI 17px for body at line-height 1.5; nothing below 12px.
- Spacing on a 4px base; radius 16px on cards, full on CTAs.
- Shadows: `0 24px 48px -16px rgb(0 40 120 / .25)` on marketing cards.
- Motion: 350ms 3D flip, 150ms hover.
- Light and dark themes.
- Typeface: Atkinson Hyperlegible Next (Google Fonts) for body 17px and flashcard text.

### Components & interactions
InlineCardEditor (Tab moves to the back, Enter saves, Esc cancels; saving and error states), CardRow (hover actions, edit in place, soft delete with an undo toast), DeckCard (due badge, emoji picker), ViewToggle, SortFilterBar, ReviewCard (front, revealed; keyboard Space/1/2), ProgressBar, SessionSummary (count remembered, next due), EmptyStates ("Nothing due, come back tomorrow"), TrashList, AuthCard (field errors, loading).

### Data & state
`decks(id, owner_id, name, emoji, view, sort, position)`, `cards(id, deck_id, owner_id, front_md, back_md, interval_days default 1, due_at, last_reviewed_at, deleted_at)`, `reviews(id, card_id, rating, reviewed_at, prev_interval, next_interval)`. Scheduling rule: remembered doubles the interval (capped at 180 days); forgot halves it (minimum 1) and makes the card due today. Seed demo decks (Spanish verbs, world capitals, JavaScript basics) written in your own words.

### Accessibility
The gradient end is deepened to `#0072e5` and the review card uses `#0a6cf0`, so white text passes AA everywhere on blue. Put the review card in a live region so the back is announced on reveal. Rating buttons carry text, not just color. Honor reduced motion by replacing the flip with a crossfade. All shortcuts need visible hints and focusable button equivalents.
Verified contrast: body: #0a0a0a on #ffffff = 19.8:1; muted: #6b7280 on #ffffff = 4.8:1; white on gradient end: #ffffff on #0072e5 = 4.6:1; white on card: #ffffff on #0a6cf0 = 4.8:1.

### Security
RLS: owner-only access on decks, cards and reviews (`owner_id = auth.uid()`). The demo reads a static seed, not the database. Sanitize rendered markdown (rehype-sanitize or DOMPurify), and disallow raw HTML and `javascript:` links. Validate card length (for example, at most 5,000 characters per side) with zod and a DB check. Keep only the anon key in the client. Purge soft-deleted rows after 30 days with a scheduled function.

### Performance & SEO
Split the landing page, the app and review mode. Index `(owner_id, due_at)` for the due queue. Add meta/OG tags and a single H1 on the landing page; noindex app routes. Target Lighthouse 95+.

### Guardrails
- Write fresh copy and sample decks; no quotes from real people.
- Don't collect more than an email.
- Keep components small and typed; no `any`. Show save errors visibly.
- Done when: (1) cards can be written entirely by keyboard; (2) ratings reschedule correctly and are covered by unit tests; (3) Due Today aggregates across decks; (4) Trash restore keeps the schedule; (5) /demo works logged out.

Open the builderAll templatesThis palette on its own