Sidelong

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• Plus Jakarta SansHeadings: Plus Jakarta Sans 600, 28px H1; 18px card H2 (similar to the observed geometric grotesk)
• Plus Jakarta SansBody: Plus Jakarta Sans 400, 16px body at 1.5; 15px nav; 14px sub lines; 12px uppercase group labels 0.08em

Patterns

• settings page with underline tabs
• single white content card on tinted canvas
• copyable link row with copy icon button
• "How it works" three-step list with icon tiles
• grouped sidebar (PAYMENTS, COMPANY) with outline icons
• footer help line with external links
• user card with overflow menu at sidebar bottom

States it is designed for

• Loading skeleton for card
• Link unavailable (program not in your country) with explanation
• Referrals list present: small table of referred companies with status
• Copy failed fallback
• Non-admin user (card replaced with "Ask an admin" message)
• Reward ready to claim banner

Who it is for

• Company admins and finance leads on a payroll platform
• Founders who hire international contractors
• Partner and growth managers

Layout

1. Left sidebar (~150-240px, very light blue-grey): logo, PAYMENTS group (Payroll, Contractor invoices, Service invoices, Billing, Payment methods), COMPANY group (Company settings, Documents, Integrations, Marketplace, Custom fields, Admins & permissions), Employee handbooks, user card
2. Top: "Account settings" H1 with search, help, notifications icons
3. Tabs: Account details, Security, Profile preferences, Referral program (active, underlined)
4. Card: H2 + sub line with bold amount; "Share your unique referral link" label + link text + copy icon; divider; "How it works?" with three icon-tile steps; divider; footer help line with two external links
5. Mobile: tabs scroll horizontally; sidebar in drawer

Palette

professional, clean, calm, competent. A tidy settings page where a reward program feels like a normal part of the account.

• page background#f3f5f9
• sidebar background#f7f9fc
• content card#ffffff
• primary text#0b1f35
• secondary text#5a6474
• links, copy icon, active tab#1662dd
• step icon tile background#eef3ff
• card dividers (decorative)#e3e7ee
• tab strip baseline#8b95a5
• initials avatar background#c9f0d8

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

Plus Jakarta Sans 600, 28px H1; 18px card H2 (similar to the observed geometric grotesk)

Body

Plus Jakarta Sans 400, 16px body at 1.5; 15px nav; 14px sub lines; 12px uppercase group labels 0.08em

Reward amounts bolded inline; link text in regular weight, not monospace.

Spacing and imagery

Comfortable: 8px base; 32px page padding; card padding 24px, 24px between sections; 12px between steps; radius 12px card, 8px icon tiles; card shadow none (tinted canvas separates it).

No images. Outline icons in sidebar and inside light-blue step tiles; one small emoji allowed in copy.

Components

• Grouped sidebar nav
• Settings header with icon buttons
• Underline tabs
• Referral card
• Link row with copy icon button
• Step list item (icon tile, title, description)
• Footer help line with external links
• User card with menu

Interactions

• Copy icon copies link; tooltip changes from "Copy link" to "Copied"
• Tabs are URL-addressable (/settings/referral)
• External links open in new tab with an arrow icon
• Sidebar item hover tints background

Data

• Company{id, name, country}
• Member{id, company_id, role (admin|finance|viewer)}
• ReferralLink{company_id, url, code}
• Referral{id, referrer_company_id, referred_company_name, status (invited|signed_up|payrolls_run|reward_ready|paid), payrolls_run int}

Guardrails

Experience

• Put the link and copy action before the explanation
• Explain reward conditions as numbered, concrete steps
• Keep the referral tab consistent with other settings tabs
• Link to full program terms from the card footer
• Show referral status once any exist so admins do not have to email support

Accessibility

• Tabs implement tablist semantics and are also real links
• Copy icon button has aria-label "Copy referral link" and a status announcement
• Step icons are decorative; step titles are headings or list items in an ordered list
• External links announce "opens in new tab"
• Group labels are headings for the nav sections

Security

• Only admins and finance roles can view the referral link (RLS and route guard)
• Referral statuses updated only by server jobs from payroll events
• Payout claims handled by a partner flow; never collect bank details in this card
• Audit-log link views and claims

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 **Sidelong**, the Referral program tab in the account settings of a payroll and contractor-payments platform. A company admin sees a single card: a headline ("Refer a company, both get rewarded"), a sub line with the bold reward amount, their unique link with a copy button, a three-step "How it works" list and a footer line pointing to the full terms and help centre.

### Stack
Next.js (App Router) + TypeScript, Tailwind CSS, shadcn/ui (Tabs, Tooltip, Table, Skeleton) on Radix, lucide-react, TanStack Query. Supabase for auth, company membership roles, referral links and statuses.

### Pages & layout
1. **Sidebar**: logo mark and wordmark; PAYMENTS group (Payroll, Contractor invoices, Service invoices, Billing, Payment methods); COMPANY group (Company settings, Documents, Integrations, Marketplace, Custom fields, Admins & permissions); Employee handbooks; user card (initials avatar, name, company, overflow menu).
2. **Header**: "Account settings" H1; search, help and notifications icon buttons.
3. **Tabs**: Account details, Security, Profile preferences, Referral program (active with a 2px accent underline).
4. **Referral card**: H2, sub line with a bold $250; "Share your unique referral link" label; the link and a copy icon; a divider; "How it works" with three steps (invite a company, earn when they run two payrolls, claim through the partner portal), each with a light-blue icon tile; a divider; a footer line with two external links.
5. When referrals exist, show a compact table under the steps: company, status badge, payrolls run.
6. Mobile: tabs scroll horizontally; sidebar in a drawer.

### Design system
- Colors: `--canvas: #f3f5f9` (page background), `--sidebar: #f7f9fc` (sidebar background), `--card: #ffffff` (content card), `--fg: #0b1f35` (primary text), `--muted: #5a6474` (secondary text), `--accent: #1662dd` (links, copy icon, active tab), `--icon-tile: #eef3ff` (step icon tile background), `--divider: #e3e7ee` (card dividers (decorative)), `--tab-border: #8b95a5` (tab strip baseline), `--avatar: #c9f0d8` (initials avatar background).
- Fonts: Plus Jakarta Sans (similar to the observed geometric grotesk): H1 28px/600, H2 18px/600, body 16px/1.5, sub lines 14px, group labels 12px uppercase 600 with 0.08em tracking.
- Spacing: 8px scale; 32px page padding; 24px card padding and section gaps.
- Radius: card 12px, icon tiles 8px, buttons 8px.
- Shadows: none; tinted canvas separates the card.
- Motion: 150ms tab underline slide; tooltip fade.

### Components & interactions
SidebarNav (grouped, current item tinted), SettingsHeader, SettingsTabs (URL-routed), ReferralCard, LinkRow with CopyIconButton (tooltip "Copy link" becomes "Copied"), HowItWorksList (ordered list with icon tiles), ReferralTable with StatusBadge (text + colour), ExternalLink (arrow icon), NonAdminNotice.

### Data & state
Tables: `companies(id, name, country)`, `members(id, company_id, user_id, role)`, `referral_links(company_id, code)`, `referrals(id, referrer_company_id, referred_company_name, status, payrolls_run)`. Mock one company and two referrals (one signed up, one reward-ready). Handle states: skeleton, not available in country, referrals table, copy failure, non-admin, reward-ready banner.

### Accessibility
Tabs are a tablist and also URL links. The copy button has an aria-label and announces "Copied". Steps are an ordered list; icons are decorative. External links say they open in a new tab. Status badges include text. Focus ring: 2px accent with 2px offset.
Verified contrast: body text on card: #0b1f35 on #ffffff = 16.65:1; muted text on card: #5a6474 on #ffffff = 5.98:1; nav text on sidebar: #0b1f35 on #f7f9fc = 15.78:1; muted group label on sidebar: #5a6474 on #f7f9fc = 5.67:1; accent link on card: #1662dd on #ffffff = 5.49:1; icon on step tile: #1662dd on #eef3ff = 4.94:1; tab baseline on card: #8b95a5 on #ffffff = 3.03:1; heading on canvas: #0b1f35 on #f3f5f9 = 15.25:1.

### Security
RLS: only members with the admin or finance role can select their company's referral link and referrals. Status changes come only from server jobs listening to payroll events. Never collect bank details here; claims go through the partner portal. Log link views and claims to an audit table.

### Performance & SEO
Server-render the settings shell; stream the card. Cache the link per company. Settings routes are noindex.

### Guardrails
- Invented logo, company and partner names; generic amounts.
- Keep this tab visually identical in structure to other settings tabs.
- Acceptance criteria: (1) the tab is deep-linkable; (2) copy works with feedback; (3) non-admins see a notice rather than the link; (4) referral statuses render; (5) all states and contrast checks pass.

Open the builderAll templatesThis palette on its own