Folkwise

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

TASA Orbiter is an airy geometric grotesk that keeps HR data organised and bright rather than corporate, clean at both 60px and dense table sizes.

• TASA OrbiterHeadings: H1 60px / 36px 500, H2 40px / 28px 700, card titles 20px 700
• TASA OrbiterBody: body 16px/1.5 400, nav links 14px 500, tables 15px, chips 13px

Patterns

• floating black pill navigation
• announcement chip
• concentric-ring hero backdrop with azure gradient card
• dual CTA (dark + blue)
• HR dashboard mock
• logo strip
• three value cards with highlighted middle
• bento feature grid (schedule cards, performance gauge, week calendar, integration orbit)
• pricing plans
• testimonial carousel
• FAQ
• blog cards
• closing CTA

States it is designed for

• demo booking form: validation, submitting, confirmation with date/time, slot-taken error
• employee table mock: active/inactive statuses with text
• empty schedule day shows 'No events'
• reduced motion: static gauge and orbit
• mobile: bento cards stack; calendar shows 2 days with horizontal scroll

Who it is for

• HR managers at SMBs
• people-operations teams
• founders handling HR themselves
• team leads approving leave and schedules

Layout

1. floating black pill nav: blue logo mark + wordmark, links (Home, About, Blog, Features, Pricing) with active underline, blue 'Contact us' pill; black pill with menu icon on mobile
2. hero on a rounded azure gradient card with concentric rings: announcement chip, 2-line H1, lede, dark 'Book demo' + blue 'Get started' pills
3. HR dashboard mock overlapping the hero card bottom: sidebar (dashboard, employees, attendance, calendar, leaves, payroll, documents), team storage cards, employee status table, upcoming schedule with priority tags
4. logo strip
5. value cards: eyebrow chip, H2, lede; three cards (middle filled blue with white text)
6. bento: schedule cards with priority tags, performance gauge + ranked people list, week calendar, integrations orbit
7. pricing, testimonials, FAQ, blog, CTA, footer

Palette

Clean, bright, trustworthy: airy azure gradients and tidy HR data that feel organised rather than corporate.

• page background#ffffff
• azure tint#e8f4ff
• ink#171723
• muted text#5d5d65
• primary blue (fills)#0075e0
• blue text on tint#006ed4
• nav black#000000
• critical tag#e11d48
• active status#12883e
• input border#7299b8

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.

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

Type scale

Display

TASA Orbiter 500, 60px desktop / 36px mobile, line-height 1.07 (similar to the observed geometric grotesk)

Body

TASA Orbiter 400/500, 16px, line-height 1.5

H2 40/28px/700; card titles 20px/700; nav links 14px/500 (allowed as short labels); table text 15px in dense tables; chips 13px.

Spacing and imagery

Density: light and orderly; 110px sections; dense mock internals Grid: 12-column; value cards 3-up; bento 5/7 then 7/5 Container: 1180px max, 24px padding (16px mobile) Radius: hero card 32px, cards 16px, nav and buttons 9999px, tags 6px Shadows: mock frame 0 24px 60px rgba(0,117,224,.12); cards flat with 1px #dbe5ed borders

HTML-built HR dashboard and scheduling mocks, small illustrated avatars (memoji-style, original), concentric ring lines behind the hero, circular app glyphs in an orbit, blue diagonal hatch for busy calendar slots.

Components

• floating pill nav
• announcement chip
• dark pill button
• blue pill button
• HR dashboard mock
• storage card
• employee table with status
• schedule card with priority tag
• value card (default / highlighted)
• performance gauge
• ranked people list
• week calendar
• integration orbit
• pricing card
• testimonial carousel
• FAQ accordion
• blog card

Interactions

• nav active link shows a blue underline bar; hover lightens text
• value cards: hovered card takes the blue fill (keyboard focus too)
• gauge animates from 0 to value on view
• calendar busy slots use a hatch pattern plus 'Busy' text
• orbit icons rotate slowly; paused on hover and reduced motion

Data

• Employee{id, fullName, email, department, joinDate, status (active|inactive)}
• ScheduleItem{title, note, priority (critical|urgent|routine), start, end, owner}
• TeamStorage{team, used, updatedAt}
• PerformanceEntry{name, score}
• Plan{name, price, seats, features[]}
• DemoBooking{name, email, companySize, slot}

Guardrails

Experience

• Priority tags (critical, urgent, routine) always show text and a distinct shape/dot, not colour alone.
• Mock employee data is clearly fictional and uses example.com emails.
• Only one highlighted value card at a time.
• Hero promises what HR teams get (records, leave, payroll), not vague 'efficiency'.
• Demo booking shows times in the visitor's time zone with the zone named.

Accessibility

• Blue fills use #0075e0 so white labels pass 4.5:1; blue text on tint uses #006ed4.
• Nav is a landmark; active link has aria-current.
• Calendar mock conveys busy slots with text, not only the hatch pattern.
• Focus ring: 2px #0075e0 with 2px offset; white ring on the black nav.
• Gauge value is also printed as text ('80% monthly performance').

Security

• Demo booking endpoint: zod validation, rate-limit, honeypot, slot double-booking prevented with a unique constraint.
• Supabase `demo_bookings` RLS: anon insert only; sales role select/update.
• Collect minimal PII (name, work email, company size); state retention in the privacy page.
• No employee data is ever collected on the marketing site.

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 an entry'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 entries)
- 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.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Folkwise**, a bright marketing site for an HR platform that keeps employee records, attendance, leave, payroll, schedules and performance reviews in one place. The azure hero and HR dashboard mock should feel organised and approachable, and the page converts to demo bookings.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix NavigationMenu, Accordion, Sheet, Popover calendar), lucide-react, Motion for the gauge and orbit, date-fns for booking slots and time zones, react-hook-form + zod for the booking form, Supabase for bookings.

### Pages & layout
1. **Home**: floating black pill nav → azure hero card (chip, H1, lede, 'Book demo' + 'Get started') → HR dashboard mock → logo strip → value cards (Simplicity / Flexibility highlighted / Productivity) → bento (schedule, performance, calendar, integrations) → pricing (per-seat tiers) → testimonials → FAQ → blog → CTA → footer.
2. **Features**, **Pricing**, **Blog**, **About**, **Contact / Book a demo** (slot picker).
3. Breakpoints: nav collapses into a black pill with menu button opening a Sheet under 900px; mock hides the schedule column under 1024px; bento stacks under 768px.

### Design system
- Colors: `--bg: #ffffff`, `--tint: #e8f4ff`, `--ink: #171723`, `--muted: #5d5d65`, `--primary: #0075e0`, `--blue-text: #006ed4`, `--nav: #000000`, `--critical: #e11d48`, `--active: #12883e`, `--border: #7299b8`.
- Fonts: TASA Orbiter 500 H1 60/36px, 700 H2 40/28px (similar to the observed geometric grotesk); 400 body 16px/1.5; tables 15px.
- Spacing: 4px base; 110px sections; 24px card padding.
- Radius: 32px hero card, 16px cards, pills for nav/buttons, 6px tags.
- Hero: `linear-gradient(180deg, #ffffff, var(--tint))` with 1px concentric ring strokes at 20% blue.
- Shadow: mock `0 24px 60px rgba(0,117,224,.12)`.
- Motion: 250ms eases; gauge 900ms; orbit 50s.

### Components & interactions
PillNav (black, active underline), AnnouncementChip, PillButton (dark, blue), HeroCard with Rings, HrDashboardMock (Sidebar, StorageCard, EmployeeTable with StatusBadge, ScheduleList with PriorityTag), LogoStrip, ValueCard, ScheduleCards, PerformanceGauge + RankedList, WeekCalendar (hatched busy slots), IntegrationOrbit, PricingCard, TestimonialCarousel, FaqAccordion, BlogCard, BookingForm (date, slot, name, email, company size), Footer.

### Data & state
Typed fictional datasets (employees, schedules, storage, performance) plus plans, testimonials, FAQs, posts. Booking slots generated from a weekly availability config with date-fns in the visitor's zone. Booking form → route handler → zod → Supabase `demo_bookings` (unique slot).

### Accessibility
One H1. Mock inside a `figure` with caption; fake controls inert. Tags read their priority text. Calendar mock has text for busy slots. Booking form: labelled fields, errors linked, slot list as radio group. Reduced motion respected.
Verified contrast: body text: #171723 on #ffffff = 17.75:1; muted text on tint: #5d5d65 on #e8f4ff = 5.84:1; blue button label: #ffffff on #0075e0 = 4.54:1; blue text on tint: #006ed4 on #e8f4ff = 4.5:1; nav text: #ffffff on #000000 = 21.0:1; critical tag: #e11d48 on #ffffff = 4.7:1; active status: #12883e on #ffffff = 4.55:1; input border: #7299b8 on #ffffff = 3.02:1.

### Security
RLS on `demo_bookings`: anon insert only (column check), `sales` role select/update. Unique index on slot to prevent double booking. zod validation, rate-limit, honeypot; confirmation via a transactional email service with keys server-side.

### Performance & SEO
Mocks as HTML/CSS, avatars as small SVGs; no heavy images. Title, description, OG, SoftwareApplication JSON-LD. Lighthouse 95+.

### Guardrails
- All employees, teams and avatars are invented; avatars are original illustrations.
- Logo strip uses placeholder marks.
- Write original copy with concrete HR outcomes.
- Don't mix up headline topics (e.g. authentication) with the HR product; keep messaging consistent.

**Acceptance criteria**
- [ ] Pill nav works as a Sheet on mobile with focus trapping
- [ ] Booking form prevents double-booking and shows time zones
- [ ] Priority and status indicators readable without colour
- [ ] Value cards highlight on focus as well as hover
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own