Rollcall

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

Nunito is a fully rounded sans, which makes the tool feel like a team yearbook rather than HR software.

• NunitoHeadings: headings 40px 600 at -2.4px
• NunitoBody: body 16px, UI labels 13px, 12px uppercase group labels

Who it is for

• Small business owners and office managers
• Startups onboarding new hires
• Remote teams
• HR generalists tracking contacts and birthdays

Layout

1. Top bar on mint: wordmark left; 'View demo', 'Sign in' and white pill 'Get started' right
2. Mint hero: two-line bold headline centered, pill tab switcher (Employees / Profiles / Birthdays / Overview) with pause button
3. Browser-framed product mock: app nav pills (Overview, Employees, Calendar, Settings), mint 'New' button, list/grid toggle, Import, employees table grouped by department with avatars, role chips, dept tag, joined date
4. Testimonial quotes row
5. Rounded mint CTA panel with a short outline chip, headline, subcopy, white pill button and decorative outline circles
6. Simple footer with wordmark and copyright
7. App: employees list/grid, profile with fun-facts tiles, birthday calendar, overview stats, settings (roles, invites)

Palette

Friendly, fresh, light, casual, welcoming. A mint-green, low-stakes tool that feels more like a team yearbook than HR software.

• background (stone)#fafaf9
• mint brand#84de8f
• text#1c1917
• deep green heading#122b16
• card/white#ffffff
• border#e7e5e4

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Nunito 600, 40px with very tight -2.4px tracking

Body

Nunito 400 16px; 13px 500 UI labels; short uppercase department group labels at 12px with 0.06em tracking

One rounded geometric sans; tight display tracking keeps it modern while the soft letterforms stay friendly. 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

Centered 1120px product frame, pill everything (buttons, tabs), 24px+ radius on CTA panel, relaxed table rows with avatars, lots of breathing room.

Round avatar photos of fictional employees inside the product mock; decorative thin white circles on the CTA; no hero photography.

Components

• Pill tab switcher with auto-advance + pause
• Browser-frame product mock
• App top nav pills
• Employees table grouped by department
• List/grid toggle
• Search with department and location filters
• Role and department chips
• Profile page with fun-facts 4-tile grid
• Birthday month calendar
• Overview stats (headcount by department)
• CSV import dialog
• Settings: members, roles, invites
• Testimonial cards
• Rounded CTA panel

Interactions

• Auto-advancing demo tabs with pause
• Instant search across name, role, location
• Toggle list/grid
• Sort by name/joined
• Import CSV with preview
• Invite by email, change role
• Dark mode toggle
• Hover highlight on rows

Data

• Workspace{id, name}
• Member{workspace_id, user_id, role: admin|member}
• Employee{id, workspace_id, first_name, last_name, title, department, location, email, phone, start_date, birthday (month/day), avatar_path, fun_facts{snack, karaoke, vacation, talent}}
• Invite{workspace_id, email, role, token, expires_at}

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 color 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, labeled 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 **Rollcall**, a lightweight team directory for companies of 5-150 people. Everyone can find colleagues by name, role, department or city; profiles include a few playful "get to know me" answers; a birthday calendar keeps celebrations from being missed; admins bulk-import the roster from CSV and manage who can edit.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. TanStack Query, react-hook-form + zod for profile editing, Papa Parse for CSV, date-fns for birthdays, Framer Motion for the landing tab demo and grid/list transitions, Recharts for the overview headcount chart. Supabase: Auth (email magic link), Postgres, Storage for avatars, an Edge Function for sending invites.

### Pages & layout
1. **Landing**: mint full-width hero with nav (wordmark, View demo, Sign in, white pill Get started); two-line centered headline; pill tabs (Employees, Profiles, Birthdays, Overview) that auto-advance with a pause button; a browser-framed product mock under them. Testimonial-style cards (clearly illustrative), rounded mint CTA panel with outline chip and decorative circles, simple footer.
2. **Employees**: toolbar (list/grid toggle, New, Import), headline with counts ("10 people · 4 departments"), search and two filter selects, table grouped by department with avatar, name, city, role chip, department chip, joined date.
3. **Profile**: header with avatar, name, title, department; contact block; start date and birthday; a 2x2 fun-facts grid.
4. **Birthdays**: month calendar with avatars on dates plus an "upcoming" list.
5. **Overview**: headcount by department, recent joiners, anniversaries this month.
6. **Settings**: workspace name, members and roles, pending invites.
7. `/demo` routes with seeded data, no login.

### Design system
Light with optional dark. Tokens: `--background: #fafaf9`, `--card: #ffffff`, `--foreground: #1c1917`, `--primary: #84de8f` (mint) with `--primary-foreground: #0f2a14`, `--heading-accent: #122b16`, `--muted: #f5f5f4`, `--border: #e7e5e4`. Dark: background `#0f1411`, card `#171d19`. Font: Nunito 400/500/600; display at -0.06em tracking; scale 12/13/16/20/32/40. Radius 10px cards, 28px CTA panel, full pills for buttons and tabs. Shadow `0 20px 40px rgb(28 25 23 / .08)` on the product mock. Motion 200ms ease-out; tabs advance every 5s. Add `--muted-foreground: #57534e`, `--ring: #2ca53b` for focus rings and active-tab indicators (mint alone is too light on white), and `--input-border: #9a938e`. Dark: `--foreground: #e7ece8`, `--muted-foreground: #a3ada6`.

### Components & interactions
Tabs with sliding fill and progress; search input with clear button; filter selects; table row hover and focus; grid cards with avatar fallback initials. Import dialog: upload, preview first rows, map columns, show row errors, confirm (disabled until valid). Empty directory state invites import. Errors appear as toasts with retry.

### Data & state
Workspace, Member(role), Employee(birthday stored as month+day only, fun_facts JSON), Invite(token, expires_at). Filters and view mode in URL params. Seed ten fictional employees across Engineering, Design, Sales and Ops with generated avatars.

### Accessibility
Mint (#84de8f) always carries dark green `#0f2a14` text, never white; indicators on white use `--ring`. Auto-advancing tabs pause on hover/focus and under reduced motion. Table uses semantic headers and a caption; group headers are row headers. Avatars use the person's name as alt. Calendar days announce the birthdays they contain. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #1c1917 on #fafaf9 = 16.74:1; muted text #57534e on #fafaf9 = 7.3:1; dark green text #0f2a14 on #84de8f = 9.42:1; deep green heading #122b16 on #fafaf9 = 14.54:1.

### Security
RLS: members of a workspace can read its employees; only admins create, import or delete; an employee linked to a user may edit their own profile fields. Invites are single-use tokens with expiry, sent by an Edge Function using a server-side key. Store only birthday month/day (no year) to minimize personal data. Avatar uploads: images ≤2 MB, private bucket with signed URLs. Validate CSV rows with zod, cap at 1,000 rows.

### Performance & SEO
Lazy-load demo mock images; virtualise lists above 200 rows. Landing meta/OG; app and demo routes `noindex`.

### Guardrails
- Original copy; fictional people and avatar placeholders; no real company names in testimonials, and label them as examples.
- Keep personal data minimal and optional.
- Typed components, no `any`, visible errors.
- Done when: search and filters find people instantly; CSV import creates employees with validation feedback; birthdays show on the calendar; non-admins can't edit others; dark mode is legible.

Open the builderAll templatesThis palette on its own