Halyard

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

PT Sans is a dependable, neutral workhorse with a quiet humanist touch, so attention stays on the glowing UI panels in the studio-lit dark room.

• PT SansHeadings: hero 42px 700, H2 36px 700, card titles 16px 700
• PT SansBody: body 16px/1.6 400, micro labels 12px uppercase +0.06em

Patterns

• floating rounded nav bar with hamburger drawer
• release announcement pill
• centered hero with lavender primary and ghost text CTA
• product dashboard under a diagonal light-streak spotlight
• fading bottom edge on hero mockup
• customer wordmark grid
• vertical tab list driving a preview panel
• two-column feature split with vertical divider
• three-up feature cards with small icons
• big-number stats band
• blog card grid
• FAQ accordion
• developer-experience closing band

States it is designed for

• Tabs: active, hover, focus-visible, auto-advancing vs user-controlled
• Preview panel loading skeleton rows matching the bills list
• Drawer open/closed
• Reduced motion: streak static, no auto-advance
• Blog grid empty (no posts yet) message
• Newsletter/contact form: invalid, sending, done, error

Who it is for

• Engineering and product teams
• Agency and project managers
• Operations leads tracking bills and contracts
• Startups consolidating tools

Layout

1. Floating nav bar (rounded 12px, 1px border) with square logo mark + spaced uppercase wordmark, lavender 'Get started' button and hamburger opening a full-width drawer
2. Hero: announcement pill, 42px bold headline, two-line subcopy, lavender button + 'Learn more' text link with chevron
3. Wide rounded media panel with a diagonal light streak falling on a dark dashboard mockup; bottom 25% fades to black
4. Customer line in muted text and a 4+3 grid of white wordmarks
5. Tabbed showcase: heading and three vertical tabs (left accent bar marks the active one) on the left; right panel shows the matching UI preview (bills list with green amounts, etc.)
6. Section intro with faint purple glow line, then a two-column split separated by a vertical hairline: team profile card left, performance card with bar chart right, each with title and paragraph
7. Row of three feature cards with small purple icons
8. Stats band with four large figures
9. Blog 'latest insights' three-card grid, FAQ accordion, closing developer-experience band with CTA, footer
10. Breakpoints: nav stays a floating bar; tabs become a horizontal scrollable tab row above the preview; splits and cards stack to one column

Palette

quiet, technical, nocturnal, polished. A studio-lit dark room where the product glows under a single light.

• page background#000000
• panel#0b0c0d
• raised card#1a1a1a
• heading text#ffffff
• muted body#909090
• secondary text on raised card#a0a0a0
• lavender accent / primary button#b59aff
• button label on lavender#0b0c0d
• positive amount green#22c55e
• chart bar violet#6853cb
• hairline / border#5e5e5e

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

PT Sans 700, hero 42px/1.2, h2 36px, card titles 16px 700

Body

PT Sans 400, 16px/1.6; muted grey for descriptions

Neutral workhorse sans keeps attention on the UI panels. The wordmark is uppercase with wide 0.2em tracking; other text is sentence case. Small uppercase labels inside mockups are 12px with 0.06em tracking.

Spacing and imagery

Medium density; 1200px container with 30px side padding; 96px section spacing; cards 20-24px padding; radius 12px on nav and cards, 16px on large media panels, 6px on buttons; borders instead of shadows.

UI mockups only, rendered dark on dark with soft vignettes and a diagonal white light streak; small circular avatars; monochrome white customer wordmarks; tiny duotone icons.

Components

• Floating nav with drawer
• Announcement pill
• Spotlight media panel
• Wordmark grid
• Vertical tabs with preview panel
• Bills list preview
• Team profile card with role dropdown and action buttons
• Performance card with period select and bar chart
• Feature card
• Stats band
• Blog card
• FAQ accordion

Interactions

• Light streak slowly sweeps across the hero panel once on load
• Vertical tabs switch the preview with a 250ms crossfade; auto-advance every 5s until the user interacts
• Accent bar slides between tabs
• Nav drawer slides down; Escape closes it
• Cards raise border brightness on hover
• Stats count up once in view
• FAQ items expand with rotate-chevron

Data

• ShowcaseTab{label, title, description, preview (bills|performance|reports)}
• Feature{icon, title, body}
• Stat{value, label}
• Post{slug, title, excerpt, cover, published_at, reading_minutes}
• Faq{question, answer}
• CustomerLogo{name, svg}

Guardrails

Experience

• Only one lavender button per viewport; secondary actions are text links
• The mockup fade must never hide meaningful headings in the preview
• Auto-advancing tabs stop permanently once the user clicks or focuses a tab
• Feature splits pair each visual with a title and at most three lines
• Stats show a label and time frame; no unexplained giant numbers
• Drawer menu lists the same links as the footer for consistency

Accessibility

• Lavender button uses dark #0b0c0d label, not white
• Tabs follow the Radix Tabs pattern with vertical orientation and arrow keys
• Auto-advance respects prefers-reduced-motion and has a pause toggle
• Muted grey text stays at #909090 or lighter on dark panels
• Chart bars use #6853cb with visible value labels
• Focus ring 2px #b59aff with offset on every control

Security

• No forms beyond newsletter; validate with zod and store only email
• RLS insert-only for anon on subscribers if a backend is added
• Content Security Policy blocking third-party scripts
• Rate-limit newsletter endpoint and add honeypot

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 the landing site for **Halyard**, an all-in-one work platform where teams track projects, people, bills and performance in one place. The page is near-black with one soft lavender accent and product panels lit by a diagonal studio light. It should read as calm and engineered, prove the product with realistic previews, and convert to "Get started".

### Stack
Astro with React islands and TypeScript, Tailwind CSS, shadcn/ui on Radix (Tabs, Accordion, Sheet/Dialog for the drawer), lucide-react, Motion for the tab crossfade and reveals, Recharts for the small performance bar chart, zod for the newsletter form. Blog posts as Markdown content collections.

### Pages & layout
1. **Home**: floating rounded nav (logo mark + spaced wordmark, lavender button, hamburger drawer). Hero centered: announcement pill ("New: assistant built in"), bold headline, two-line subcopy, lavender "Get started" and a "Learn more" text link. A wide rounded panel shows a dark dashboard (course/progress style cards) with a diagonal light streak and a bottom fade into black.
   Customer line + grid of seven invented white wordmarks.
   Tabbed showcase: left heading + three vertical tabs (Bills, Account performance, Reports); right preview panel with skeleton-like rows and green amounts.
   Workflow section: centered heading and paragraph, then two columns split by a vertical hairline: team profile card (avatar, role select, call/chat/video/more buttons) and performance card (period select, two metric rows with deltas, violet bar chart).
   Three feature cards, stats band, three latest blog cards, FAQ, closing band, footer.
2. **Blog** index and post, **Pricing**, **Docs** landing stub, **Contact**.
Mobile: tabs become a horizontal scrollable row above the preview; columns stack; hero headline 32px.

### Design system
```
--bg: #000000; --panel: #0b0c0d; --raised: #1a1a1a; --text: #ffffff;
--muted: #909090; --muted-2: #a0a0a0; --accent: #b59aff; --on-accent: #0b0c0d;
--positive: #22c55e; --chart: #6853cb; --line: #5e5e5e;
```
Font: PT Sans. Hero 42px/1.2 700, h2 36px 700, card titles 16px 700, body 16px/1.6 400, micro labels 12px uppercase +0.06em. Spacing 8px base, 96px sections, 1200px container. Radius: nav/cards 12px, media 16px, buttons 6px, pills full. No shadows; 1px borders at `--line` or 10% white. Motion: 250ms crossfades, 5s tab auto-advance, one 1.2s streak sweep on load.

### Components & interactions
FloatingNav + Drawer (Escape, focus trap), AnnouncementPill, SpotlightPanel (CSS gradient streak, bottom mask), LogoGrid, ShowcaseTabs (vertical Radix Tabs, sliding accent bar, auto-advance with pause toggle, stops after user input), BillsPreview (skeleton rows + amounts), ProfileCard, PerformanceCard (Select + Recharts bars with value labels), FeatureCard, StatsBand (count-up), PostCard, FaqAccordion, NewsletterForm.

### Data & state
Content collections: `tabs`, `features`, `stats`, `posts`, `faqs`, `logos` (invented). Chart data is a static array of six invented monthly values. Client state: active tab, autoplay flag, drawer open, accordion item. Newsletter posts to an endpoint storing only email.

### Accessibility
Dark label on lavender; muted text never below #909090 on dark panels. Tabs keyboard-operable with arrow keys and Home/End; autoplay pauses on focus and under reduced motion. Profile action buttons have aria-labels (Call, Message, Video, More). Chart has visible values and an sr-only table. Decorative streak and fades are CSS only.
Verified contrast: heading text on page: #ffffff on #000000 = 21.0:1; muted body on panel: #909090 on #0b0c0d = 6.13:1; secondary text on raised card: #a0a0a0 on #1a1a1a = 6.66:1; button label on lavender: #0b0c0d on #b59aff = 8.42:1; positive amount on raised card: #22c55e on #1a1a1a = 7.64:1; chart bar on raised card: #6853cb on #1a1a1a = 3.06:1; card border on panel: #5e5e5e on #0b0c0d = 3.02:1; focus ring on page: #b59aff on #000000 = 9.03:1.

### Security
Newsletter: zod validation client and server, insert-only RLS for anon if stored in Supabase, IP rate limit and honeypot. Strict CSP, no third-party trackers. No secrets in the client bundle.

### Performance & SEO
Static output; hydrate only nav, tabs, stats and FAQ. Hero mockup as AVIF with fixed dimensions and priority; others lazy. Self-host PT Sans subsets. Metadata, OG images, Article JSON-LD for posts, RSS feed. Lighthouse 95+.

### Guardrails
- Wordmarks, people, course names and figures are invented; no real customer claims.
- Keep the palette monochrome plus lavender; green only for positive amounts.
- Components typed, no `any`; content in collections.
- Acceptance criteria: (1) tabs work by mouse, keyboard and touch and stop autoplay after interaction; (2) drawer traps focus and closes on Escape; (3) no horizontal scroll at 390px; (4) reduced motion removes sweep and autoplay; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own