Eyeshelf

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

Zalando Sans Expanded supplies the wide, extended uppercase grotesk the directory headings describe, and its normal-width sibling keeps the body a matched neo-grotesk.

• Zalando Sans ExpandedHeadings: section headings 28px, spotlight title 48px / 32px, 700 uppercase +0.05em
• Zalando SansBody: body 16px/1.5 400/500, card titles 15px 500 uppercase, badges and buttons 12-13px uppercase

Patterns

• persistent left sidebar with grouped nav
• sidebar search field
• spotlight hero card
• categorised card rows
• uppercase extended section headings
• 'new' outline badges
• external-link arrow affordance
• submit-a-resource CTA
• angular dark background shards

States it is designed for

• search with no results: message plus 'Suggest this resource' link
• image loading skeletons at fixed 4:3 ratio
• broken external link reported by visitors shows a 'link may be outdated' note
• submit dialog: validation, sending, thanks, error
• category with fewer than 4 items keeps left-aligned grid without stretching

Who it is for

• product and brand designers
• design-system teams
• front-end developers seeking references
• design students

Layout

1. fixed left sidebar (240px): logo tile + name, search field, primary links (Spotlight, Marketplace), 'Resources' group (Websites, Design systems, Typography, Branding), promo image card at the bottom; becomes a top bar + slide-over menu under 1024px
2. main header row: uppercase section title 'Spotlight' left, outlined 'Submit' and filled orange action button right (full-width pair on mobile)
3. spotlight card: full-width image with source badge, pill label, huge extended title and one-line description, diagonal arrow top-right
4. category sections, each: uppercase extended heading and a 4-up (3-up at 960px, 1-up mobile) row of resource cards (image, source badge, title, 'new' badge, corner arrow)
5. footer with submission guidelines link

Palette

Editorial, nocturnal and a little brutal: wide uppercase headings, black shards and one hot-orange signal colour.

• canvas#0b0b0b
• sidebar#171717
• card#1f1f1f
• text#ffffff
• muted text#b5b3b0
• orange accent (text/outline on dark)#ff4901
• orange button fill#d73d00
• input border#646464
• hairline#2a2a2a

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

Zalando Sans Expanded 700 in uppercase, 28px section headings and 48px spotlight title, tracking 0.05em (similar to the observed wide extended grotesk)

Body

Zalando Sans 400/500, 16px, line-height 1.5 (similar to the observed neo-grotesk)

Card titles 15px/500 uppercase allowed only for short names with 0.05em tracking; badges 12px uppercase +0.08em; button labels 13px uppercase +0.06em.

Spacing and imagery

Density: gallery-dense; 24px card gaps, 64px between category rows Grid: sidebar + fluid main; main uses 4-column card grid Container: main max 1320px with 32px padding (16px mobile) Radius: cards 4px, images 2px, buttons 4px, badges 9999px Shadows: none; cards use a 1px hairline and a slightly lighter fill

Large cover thumbnails of referenced resources (screenshots used with permission or original placeholder art), small square source badges, angular dark geometric background shapes; outline icons 16px in the sidebar.

Components

• sidebar nav with groups
• search input
• promo card
• spotlight card
• section heading (extended caps)
• resource card
• 'new' badge
• outlined button
• filled orange button
• slide-over mobile menu
• empty search result panel

Interactions

• cards lift 2px and their corner arrow shifts diagonally on hover/focus
• search filters cards live as you type (debounced 150ms) and highlights matches
• sidebar link active state: white text + left orange bar
• spotlight image slowly scales 1.03 on hover
• Submit opens a dialog form

Data

• Resource{id, title, url, category (website|design-system|typography|branding), coverUrl, coverAlt, sourceLabel, isNew (bool), addedAt}
• Category{slug, title, order}
• Spotlight{resourceId, tagline}
• Submission{url, category, note, email, status (pending|accepted|rejected), createdAt}

Guardrails

Experience

• Every resource card links out in a new tab and says so (icon + visually hidden 'opens in new tab').
• Only one spotlight at a time; rotate it weekly from data, not by hand-editing markup.
• Search covers titles and categories and keeps the sidebar visible.
• Mark 'new' only for items added in the last 30 days, computed from addedAt.
• Don't put the orange fill on more than one button per view.

Accessibility

• Orange fill uses #d73d00 so white labels pass 4.5:1; brighter #ff4901 is for outlines/text on black only.
• Uppercase text only for short labels and headings with ≥0.05em tracking.
• Sidebar is a nav landmark with aria-current on the active link.
• Cover images have alt text naming the type of resource, not repeating the title.
• Focus ring: 2px #ff4901 outline, offset 2px, visible on all dark surfaces.

Security

• Submissions validated with zod (URL format, allowed categories), rate-limited and stored as pending.
• RLS on `submissions`: anon insert only; moderators (role) select/update.
• Sanitise and verify submitted URLs (https only, no javascript: or data: schemes).
• Add rel='noopener noreferrer' to all external links.

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 **Eyeshelf**, a dark, editorial directory of curated design references (websites, design systems, typefaces, branding case studies) that a design team uses as shared documentation and inspiration. Visitors browse categories, search, open resources in new tabs and submit new finds for review.

### Stack
Astro + TypeScript for static pages generated from a content collection, Tailwind CSS, shadcn/ui (Radix Dialog, Sheet, Input), lucide-react icons, zod, and Supabase for moderated submissions. A small React island powers live search.

### Pages & layout
1. **Home**: sidebar + main; header row with 'Spotlight' title, 'Submit' outline and orange action; spotlight card; category rows (Websites, Design systems, Typography, Branding) each showing the latest 4 with a 'View all' link.
2. **Category page** (`/c/[slug]`): full grid with sort (newest, A-Z).
3. **Resource detail** (`/r/[id]`): cover, description, tags, outbound button, related items.
4. **Submit** dialog/page and **About/Guidelines**.
5. Breakpoints: sidebar fixed ≥1024px; below that a top bar with menu button opening a Sheet; grids 4/3/2/1 columns at 1280/960/640/<640px.

### Design system
- Colors: `--canvas: #0b0b0b`, `--sidebar: #171717`, `--card: #1f1f1f`, `--text: #ffffff`, `--muted: #b5b3b0`, `--accent: #ff4901`, `--accent-strong: #d73d00`, `--border: #646464`, `--hairline: #2a2a2a`.
- Fonts: Zalando Sans Expanded 700 uppercase for section headings 28px and spotlight title 48/32px, tracking 0.05em; Zalando Sans 400/500 body 16px/1.5; badges and buttons 12-13px uppercase with 0.06-0.08em tracking.
- Spacing: 8px base; 24px card gap; 64px between rows.
- Radius: 4px cards and buttons, pill badges.
- Background: two or three large rotated dark polygons in --card at low opacity behind content.
- Motion: 150ms hover transitions; 600ms slow spotlight scale.

### Components & interactions
Sidebar (logo tile, SearchInput, NavLink with active bar, NavGroup label, PromoCard), HeaderRow, Button (outline, orange fill), SpotlightCard (image, SourceBadge, PillLabel, title, description, ArrowUpRight), SectionHeading, ResourceCard (4:3 cover, badge, title, NewBadge, corner arrow), SearchResults (grouped by category), SubmitDialog (URL, category select, note, optional email), EmptyState, MobileMenuSheet.

### Data & state
Resources live in an Astro content collection (JSON/MD) validated by zod, built statically. `isNew` is derived at build time from `addedAt`. Search runs client-side over a prebuilt JSON index. Submissions insert into Supabase `submissions` with status 'pending'; moderators approve and a rebuild publishes them.

### Accessibility
Skip link to main. Sidebar is `nav` with aria-current. Resource cards are single links with the whole card clickable, external icon and hidden 'opens in new tab'. Search input has a label and announces result counts. Keep text ≥12px and body 16px.
Verified contrast: body text: #ffffff on #0b0b0b = 19.68:1; muted text on card: #b5b3b0 on #1f1f1f = 7.88:1; muted text on sidebar: #b5b3b0 on #171717 = 8.57:1; orange button label: #ffffff on #d73d00 = 4.61:1; orange outline / focus ring: #ff4901 on #0b0b0b = 5.82:1; input border: #646464 on #171717 = 3.03:1.

### Security
RLS on `submissions`: `insert` for anon, `select/update` only for `moderator` role. Validate https URLs, reject non-http schemes, strip HTML from notes, rate-limit 3/min/IP, honeypot. External links use rel='noopener noreferrer'.

### Performance & SEO
Static generation; covers as responsive WebP at 4:3 with width/height set; lazy-load below the fold. Title and description per category and resource page, OG images, CollectionPage JSON-LD. Search index under 100KB.

### Guardrails
- Use only cover images you have rights to, or original placeholders; never hotlink third-party assets.
- Name resources generically in sample data (e.g. 'Editorial news theme', 'Open-source icon system').
- Write original descriptions; don't copy blurbs from referenced sites.
- Keep orange as a signal colour, not a background.

**Acceptance criteria**
- [ ] Sidebar collapses to a Sheet under 1024px with focus trapped
- [ ] Live search filters across categories and shows an empty state
- [ ] Submissions are stored as pending and invisible to anon
- [ ] All external links open safely in new tabs with announced behaviour
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own