Stillpage

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

Inclusive Sans is quiet and very legible, with a soft personal tone, so the writing stays the focus of the evening journal.

• Inclusive SansHeadings: title 40px 600, tight tracking
• Inclusive SansBody: entry text 16px, relaxed line height
• NewsreaderAccent: optional serif for entry text in the editor

Who it is for

• People building a daily journaling habit
• Gratitude and reflection writers
• Travellers keeping memory logs
• Therapy clients doing structured journaling

Layout

1. Transparent top bar: wordmark left, 'View demo' text and black pill 'Get started' right
2. Centered hero on a soft warm-grey to lavender gradient: product name, one-line tagline, white pill + black pill buttons
3. Horizontally drifting row of floating cards: notebook cards (icon, name, entry count, last date), a purple insights card, and entry preview cards (title, excerpt, date with notebook icon)
4. Hairline divider and minimal footer on the lavender base
5. App: sidebar with journals, entry list grouped by month with search, full-width editor with date header and prompt, insights page (streaks, stats chart), media calendar

Palette

Quiet, soft, personal, dreamy, calm. The gradient dusk backdrop and floating cards feel like a peaceful evening ritual.

• background top (warm grey)#e8e4df
• background bottom (lavender)#9088cc
• card#ffffff
• text (ink)#1e1d28
• insights purple#a77ce8
• notebook blue icon#3b82f6

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

Inclusive Sans Display 600, 40px, -2.4px tracking

Body

Inclusive Sans 400 16px, relaxed line height for entry text

Neutral Inclusive Sans throughout so the writing itself is the focus; very tight tracking on the title adds polish. 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

Minimal and airy; hero centered with lots of space; cards 16px radius with soft shadows, 20px gaps; full pill buttons.

No photography; UI cards act as illustration. In-app users can attach photos and videos shown in a media calendar.

Components

• Gradient hero
• Floating card marquee
• Notebook card (icon, name, count, last entry)
• Entry preview card
• Insights summary card
• Sidebar notebook switcher
• Month-grouped entry list with search
• Rich-text editor (bold, checklists, quotes, images)
• Reflection prompt banner with shuffle
• Streak counters
• Monthly/yearly stats bar chart
• Media calendar grid
• Journal create/edit dialog (name, colour, icon)
• OAuth sign-in

Interactions

• Cards drift horizontally on landing
• Autosave while typing with saved indicator
• Shuffle prompt
• Drag to reorder notebooks
• Toggle this month / this year in insights
• Click calendar day to reveal media
• Search entries by title
• Inline image upload

Data

• Journal{id, user_id, name, color, icon, position}
• Entry{id, journal_id, user_id, entry_date, title, content (rich text / Yjs doc), word_count, updated_at}
• Media{id, entry_id, user_id, path, kind: image|video, taken_on}
• Prompt{id, text}

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 **Stillpage**, a private journaling app for people who want a calm place to write every day. Users keep several notebooks (personal, work, gratitude, travel), start each entry with today's date and an optional reflection prompt, write in a clean rich-text editor that saves automatically, and see gentle insights: streaks, words written, days journaled, and a calendar of attached photos.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Tiptap for the editor (with Yjs for conflict-free autosave across tabs/devices), dnd-kit to reorder notebooks, Recharts for insights, Framer Motion for the landing card drift and page transitions, date-fns for streak maths. Supabase: Auth (email + Google + Apple), Postgres for journals and entries, Storage for media.

### Pages & layout
1. **Landing**: transparent nav; centered title and tagline over a vertical gradient from warm grey to soft lavender; white and black pill buttons; a slowly drifting row of floating cards (notebooks, an insights card, entry excerpts with dates); thin divider; minimal footer.
2. **Home**: left sidebar listing notebooks with colour dots and counts, "New journal", Insights and Calendar links; main pane shows entries grouped by month with a search field.
3. **Editor**: large date header, optional prompt banner with shuffle and dismiss, title field, distraction-free editor with a floating formatting toolbar, "Saved" indicator.
4. **Insights**: current and longest streak, this month / this year toggle, entries, words and days journaled, bar chart by day or month.
5. **Media calendar**: month grid with thumbnails on days that have media; selecting a day lists its photos and videos.
6. **Settings**: profile, export all entries (Markdown/JSON), delete account.
7. `/demo` with seeded fictional entries.

### Design system
Light, soft. Tokens: `--background: #ffffff`, `--hero-from: #e8e4df`, `--hero-to: #9088cc`, `--card: #ffffff`, `--foreground: #1e1d28`, `--muted-foreground: #5b5a68`, `--accent: #a77ce8`, `--border: #e6e4ee`; notebook colours from a set of eight muted hues. Fonts: Inclusive Sans Display 600 for headings (tight -0.06em), Inclusive Sans 400 body with 1.7 line height in the editor; optionally Newsreader for entry text. Scale 14/16/18/24/40. Radius 16px cards, pills for buttons. Shadow `0 10px 30px rgb(30 29 40 / .08)`. Motion: card drift 40s linear loop, UI 200ms ease-out. The insights card uses the accent as a fill with ink `#1e1d28` text, never white. Add `--input-border: #8e8c9c` for editor fields and search.

### Components & interactions
Editor states: empty with placeholder prompt, typing, saving, saved, offline (queued). Notebook cards: hover lift, active outline. Image insertion shows upload progress and failure retry. Search shows "no entries match" state. Deleting a notebook requires typing its name.

### Data & state
Journal(name, color, icon, position), Entry(entry_date, title, content, word_count), Media(path, kind, taken_on), Prompt. Streaks are derived from distinct entry dates in the user's timezone. Editor content syncs through Yjs updates persisted to Postgres. Seed a demo with three notebooks and a dozen invented entries.

### Accessibility
Editor toolbar buttons have labels and `aria-pressed`. Landing marquee pauses on hover/focus and stops under reduced motion; cards are decorative duplicates hidden from screen readers. Dark ink text on the lavender footer area is verified at 4.5:1 or better. Calendar days announce media counts. All media require alt text prompts. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1e1d28 on #ffffff = 16.65:1; muted text #5b5a68 on #ffffff = 6.76:1; ink text #1e1d28 on #e8e4df = 13.15:1; ink text #1e1d28 on #9088cc = 5.22:1.

### Security
Journals are highly personal: RLS on every table restricted to `user_id = auth.uid()`; the storage bucket is private with signed URLs. Sanitize rendered rich text (DOMPurify) when showing excerpts. Media uploads limited to images/video under 20 MB with type checks. No analytics on entry content; never send entries to third parties. Offer full export and hard delete.

### Performance & SEO
Lazy-load the editor and charts; paginate entries by month. Compress thumbnails server-side or generate smaller renditions. Landing meta/OG; app `noindex`.

### Guardrails
- Original prompts and sample entries; no real people.
- Don't collect more than an email and display name.
- Typed components, no `any`, visible errors.
- Done when: a user can create two notebooks and write entries that autosave; prompts shuffle; streaks compute correctly across timezone boundaries; media appear on the calendar; another account cannot read any entry.

Open the builderAll templatesThis palette on its own