Branchwise

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

Libre Franklin carries the confident, heavy-weight American corporate tone of Franklin Gothic, a better fit for an enterprise SaaS landing page than generic Inter.

• Libre FranklinHeadings: hero 60px and section titles 48px, 700-800
• Libre FranklinBody: body 16px, slate secondary text

Who it is for

• HR and people-ops teams
• Founders of fast-growing companies
• New hires onboarding into teams
• Leaders planning reorganisations

Layout

1. Dark navy sticky nav: building icon + wordmark left, 'Login' link and blue 'Get Started' button right
2. Split hero over a darkened team photo: large 3-line headline, subcopy, primary + outline buttons left; glassy browser mock of a CEO > CTO/VP Sales/CFO tree right
3. A 3-step how-it-works section
4. A row of 3 rounded photo tiles with captions (Group Meetings, 1:1 Conversations, Team Culture)
5. A 3x2 grid of white feature cards with tinted icon squares
6. FAQ accordion
7. Closing CTA band and footer
8. App: org chart canvas, directory list with search/filters, profile page, admin people table, analytics widgets

Palette

Professional, trustworthy, clean, corporate, approachable. A familiar enterprise-SaaS landing that pairs human photography with a tidy product preview.

• background#f7f8fa
• card#ffffff
• text#091123
• primary blue#1c69e3
• hero/nav navy#0f1a2e
• muted / icon chip#eff2f6
• border#e0e5eb

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

Libre Franklin 700-800, 60px hero and 48px section titles with -1.2 to -1.5px tracking

Body

Libre Franklin 400 at 16px, slate grey secondary text

Single Libre Franklin family; heavy weights and tight tracking give a confident corporate SaaS feel. 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

Standard SaaS rhythm: 1200px container, 96px section padding, 3-column card grid with 24px gaps, 10px radius on cards and 8px on buttons, soft shadows.

Stock photography of office teams, heavily navy-tinted behind the hero and shown as rounded image tiles lower down; a stylised wireframe org-chart mock with placeholder bars; line icons in pale blue squares.

Components

• Dark sticky navbar
• Photo hero with navy overlay
• Browser-frame org tree mock
• Numbered how-it-works steps
• Rounded photo tiles with captions
• Feature cards with icon chips
• FAQ accordion
• Expandable org chart nodes
• Directory search with skill filter
• Employee profile card (photo, title, manager, reports, skills)
• Admin people table with edit dialog
• Department analytics charts
• Photo uploader
• Mobile drill-down list

Interactions

• Expand/collapse org nodes with animated connectors
• Click a node to open profile
• Pan and zoom on large trees
• Instant search filtering by name, title, skill
• Mobile drill-down navigation with breadcrumb
• Admin add/edit/delete with confirm
• Photo upload with preview and crop
• Accordion FAQ toggling

Data

• Employee{id, full_name, title, department_id, manager_id, email, bio, skills[], photo_path, start_date, location}
• Department{id, name, color}
• UserRole{user_id, role: admin|member}
• Profile link{user_id, employee_id}

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 **Branchwise**, an internal company directory and org chart for companies of 20-500 people. Employees search colleagues by name, title or skill, open rich profiles, and explore an interactive reporting tree; admins maintain people records and photos. The core job is making "who does what and who reports to whom" instantly answerable.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. Use React Flow (or a custom SVG tree with d3-hierarchy) for the org chart, Framer Motion for expand/collapse, TanStack Query for data, react-hook-form + zod for admin forms, Recharts for department analytics. Supabase: Auth (email, SSO-ready), Postgres for employees/departments/roles, private Storage bucket for photos served via signed URLs.

### Pages & layout
1. **Landing**: dark navy sticky nav; split hero on a darkened team photo (headline, subcopy, blue primary + outline buttons) with a glassy browser mock of a small tree; three numbered steps; three captioned photo tiles; 3x2 feature card grid; FAQ accordion; CTA band; footer.
2. **Org chart**: full-height canvas starting at the top leader, nodes showing avatar, name and title, collapsible children count, zoom controls and "fit to screen".
3. **Directory**: search bar, department and location filters, card/list toggle.
4. **Profile**: photo, title, department chip, manager link, direct reports, bio, skills tags, contact.
5. **Admin**: people table with add/edit/delete, manager picker that prevents cycles, bulk CSV import.
6. **Analytics**: headcount by department (bar), hires over time (line), summary cards.
7. **Mobile**: org chart becomes a drill-down list with breadcrumbs.

### Design system
Light app with a navy marketing header. Tokens: `--background: #f7f8fa`, `--card: #ffffff`, `--foreground: #091123`, `--primary: #1c69e3`, `--primary-foreground: #ffffff`, `--muted: #eff2f6`, `--border: #e0e5eb`, `--navy: #0f1a2e`. Font: Libre Franklin 400/500/700/800; scale 14/16/20/24/48/60, headings with -0.025em tracking. 8px spacing grid; radius 10px cards, 8px buttons; shadow `0 1px 3px rgb(9 17 35 / .08)`. Motion 200ms ease-out for node expand, 150ms for hovers. Add `--muted-foreground: #606f85` for slate secondary text, `--input-border: #8196ae` for inputs and filter controls, and `--hero-scrim: rgb(15 26 46 / .82)` over hero photography.

### Components & interactions
Org node (default, hover raise, focused ring, selected highlight, collapsed badge). Search input with debounce and "no matches" empty state. Profile skeleton while loading. Admin dialogs with disabled Save while submitting and inline field errors. Photo uploader with drag-drop, preview, progress and error states. Toasts for saves and failures.

### Data & state
Employee(id, full_name, title, department_id, manager_id nullable, email, bio, skills text[], photo_path, location, start_date), Department(id, name, color), UserRole(user_id, role). Build the tree client-side from `manager_id`. Filters in URL params. Seed ~40 fictional employees across 6 departments with generated avatar placeholders.

### Accessibility
Expose the org tree as `role="tree"`/`treeitem` with `aria-expanded` and arrow-key navigation, plus the list/drill-down alternative. White hero text sits on the `--hero-scrim` overlay (82% navy), which keeps at least 4.5:1 even over the brightest photo areas. Profile photos use the person's name as alt text; decorative photos use empty alt. Respect reduced motion for tree animations. All filters are labelled controls. Type: body 16px+, line height 1.5+, max ~70ch, nothing under 12px. Verified contrast: body text #091123 on #f7f8fa = 17.71:1; body text #091123 on #ffffff = 18.82:1; muted slate text #606f85 on #f7f8fa = 4.81:1; muted text #606f85 on #eff2f6 = 4.55:1.

### Security
RLS: authenticated members can read employees and departments; only admins insert/update/delete; a member may update only their own bio and skills. Roles live in a separate `user_roles` table checked through a security-definer function, never in client state. Photo bucket is private; issue short-lived signed URLs; accept JPEG/PNG/WebP up to 2 MB. Validate records with zod client-side and with constraints (email format, no self-management cycles via trigger). No public sign-up if the directory is internal; use invite-only.

### Performance & SEO
Virtualise large directory lists; lazy-load analytics charts; render only expanded tree branches. Landing page gets meta and OG tags; app routes `noindex`.

### Guardrails
- Original copy and placeholder photos only; no real employee data in seeds.
- No fabricated customer testimonials.
- Store only work-relevant personal fields.
- Typed, small components; no `any`; visible error handling.
- Done when: the tree renders from seed data and expands via keyboard; search finds people by skill; admin edits reflect immediately; non-admins cannot edit others; photos load only via signed URLs.

Open the builderAll templatesThis palette on its own