Bramblelough

A light, near-monochrome and restrained visual system for a consumer brand store. Its look rests on 500-weight display type up to 72px, short uppercase labels with open tracking and a sparing vermilion accent on a white canvas. Apply it to a marketing site or the public pages of an app; the tokens and component specs carry the identity.

Build in this styleRead the build prompt

In the builder, open Gallery under the message and search for Bramblelough.

What makes it

• 500-weight display type up to 72px
• short uppercase labels with open tracking
• rounded 24px controls
• one subtle shadow for raised elements
• one vermilion accent used sparingly
• contrasting full-width bands to break the page rhythm

Colors

Crisp, rational, understated. Restraint in the palette lets 500-weight display type up to 72px do the talking.

• canvas / primary action label / text on band#ffffff
• surface#f3f4f3
• text#0a0a0a
• muted text#3c3e3d
• divider (decorative) / input border#292b2a
• accent#ff6105
• primary action fill#ce4c00
• link text#c24700
• focus ring#f55a00
• inverse band#202120
• supporting accent (decorative), never behind text#ffa069

Every checked pair, measured again

Typefaces

uppercase only for short labels, with at least 0.05em tracking; no text below 12px; weights of 300 or lighter only at 24px and above; fonts are open Google Fonts chosen to match the observed letterforms

• InterHeadings
• InterBody

Type scale

Corners and shadows

• nav: 40px
• cards: 5px
• images: 8px
• inputs: 50px
• buttons-small: 8px
• buttons-primary: 50px
• buttons-secondary: 24px
• shadow-1: rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px

Spacing and imagery

comfortable density on a 4px base unit; container 1200px; section gap 80px; card padding 16px; element gap 5px-8px; radii nav 40px, cards 5px, images 8px, inputs 50px, buttons-small 8px, buttons-primary 50px; 1 shadow level

Photography, illustration, data graphics. Use placeholder or generated imagery only; partner marks are neutral placeholders in the muted text color. Photography is shown under a scrim wherever text overlaps it. Icons are outline style at 20-24px in the text or muted color.

Layout

1. thin announcement strip with one inline link and a dismiss button
2. top navigation: wordmark left, 4-6 text links, primary action right; collapses to a menu sheet under 768px
3. left-aligned hero: oversized headline, short lede and a primary plus secondary action
4. feature grid of icon, title and two-line description cells (3-4 columns desktop, 1 column mobile)
5. alternating two-column text-and-visual blocks
6. row of placeholder partner marks in a single muted tone (wraps to two rows on mobile)
7. metrics band with three or four large figures and captions
8. large framed product view on a tinted surface
9. article or story cards with image, kicker, title and date
10. footer with grouped link columns, legal line and social icons
11. content sits in a 1200px centered container with 24px side padding (16px on mobile)
12. sections are separated by 80px of vertical space on desktop, roughly half that on mobile

Patterns

• thin announcement strip with one inline link and a dismiss button
• hero
• feature grid of icon, title and two-line description cells (3-4 columns desktop, 1 column mobile)
• alternating two-column text-and-visual blocks
• row of placeholder partner marks in a single muted tone (wraps to two rows on mobile)
• metrics band with three or four large figures and captions
• large framed product view on a tinted surface
• article or story cards with image, kicker, title and date

Components

• primary button: fill #ce4c00, label #ffffff; 50px radius; type 16px; soft shadow
• primary button (variant 2): fill #ce4c00, label #ffffff; 24px radius; 1px border
• metric block: colors: canvas #ffffff, primary action fill #ce4c00, text #0a0a0a; 8px radius; type 12px; underlined
• announcement strip: colors: text #0a0a0a, divider (decorative) #292b2a, surface #f3f4f3; uppercase with at least 0.05em tracking
• product frame: colors: text #0a0a0a, primary action fill #ce4c00; 3px border
• feature card: colors: inverse band #202120, canvas #ffffff, primary action fill #ce4c00; padding 120px; type 48px/300
• feature card (variant 2): colors: surface #f3f4f3; 5px radius
• content card: colors: canvas #ffffff, surface #f3f4f3, text #0a0a0a; 5px radius; 1px border; no shadow
• announcement strip (variant 2): colors: surface #f3f4f3, divider (decorative) #292b2a, text #0a0a0a; type 14px
• top navigation bar: colors: canvas #ffffff, divider (decorative) #292b2a, surface #f3f4f3; 1px border
• pill badge: colors: surface #f3f4f3, primary action fill #ce4c00; 50px radius; 1px border; type 16px

Interactions and states

• opacity and color transitions only, 150ms ease-out
• every interactive element shows a 2px #f55a00 focus ring with 2px offset
• primary action darkens or lightens by one step on hover and keeps its label color
• navigation collapses to a full-height menu sheet under 768px, trapping focus while open
• all motion is disabled under prefers-reduced-motion
• images show a surface-colored placeholder until loaded, with alt text if they fail
• forms: inline validation, disabled submit while sending, success message and retryable error
• mobile menu open and closed states
• hover, focus-visible, active and disabled states for every button style
• reduced-motion variant with no transitions beyond opacity
• out-of-stock product tile with a disabled add button and 'Notify me' alternative
• cart count badge updates after add

Guardrails

Experience

• Keep one primary action style (#ce4c00 fill, #ffffff label) and use it once per view; secondary actions stay outlined or text-only.
• Use the vermilion accent for small marks only (links, active states, icons), at most two or three times per screen.
• Keep the 24px control radius consistent across buttons, inputs and chips.
• Limit headline sizes to the type scale; the 72px display size appears once per page, in the hero.
• Partner and customer marks are placeholders in one muted tone; never use real company logos.
• Keep copy short and concrete: one idea per section, with a heading that states the benefit.

Accessibility

• Text, links, focus rings and input borders use only the verified pairs listed in contrast checks.
• Focus ring: 2px solid #f55a00 with 2px offset on every interactive element.
• Body text is 16px or larger at 1.5 line height; nothing is smaller than 12px.
• Decorative colors (dividers and supporting accents) never carry text or the only signal of state.
• Uppercase labels stay short, use at least 0.05em tracking and keep sentence-case text in the HTML source.
• Text over photos or gradients sits on a scrim that keeps it at 4.5:1 against the lightest area.
• Respect prefers-reduced-motion; no parallax or autoplay video without a pause control.
• Some observed colors were moved to the nearest passing shade of the same hue; use the palette values here, not lighter originals.

Security

• Validate every form with a shared zod schema on the client and again in the edge function; reject unknown fields.
• Rate-limit form endpoints per IP and add a honeypot field; store leads in a Supabase table with RLS allowing insert only for anonymous users and select only for staff.
• Set a strict Content-Security-Policy, self-host fonts and icons, and avoid third-party scripts beyond privacy-friendly analytics.
• Open external links with rel="noopener noreferrer" and never put secrets or API keys in client code.
• Checkout goes through a hosted payment provider; the site never handles card data, and prices are re-validated on the server.

Build prompt

The rules every style in the gallery assumes, then this style’s own ten sections, from goal to guardrails. A build in the style also gets its tokens as a file, so the colors and type above are exact.

Copy the rules 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
- Enable Row Level Security on every table before inserting data. Default-deny, then add the narrowest policies the feature needs (for a lead form: insert-only for anonymous users, select for a staff role).
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- 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 color 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, labeled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give carousels and drag interactions keyboard and button alternatives, and never auto-advance them.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or generated imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Partner and customer logo rows use neutral placeholder marks. Label demo testimonials and metrics as samples. Collect the minimum personal data a form needs.

### Style preset baseline
- Treat the entry's palette, type scale, radii, spacing and shadows as the complete token set. Do not introduce new colors; derive hover and pressed states by moving one step lighter or darker within the same hue, then re-check contrast.
- Colors marked decorative (dividers, supporting accents) never sit behind text and never carry meaning on their own.
- Fonts are open Google Fonts chosen to match the observed letterforms. Self-host them with `font-display: swap` and keep to the listed weights.
- Keep the signature moves listed for the entry, and keep everything else quiet so they stay recognizable.
- One primary action style per view. Secondary actions are outlined or text-only, and links are distinguishable by more than color (underline or weight).

### Goal
Build a responsive light-theme marketing site for a fictional consumer brand store in the "Bramblelough" style: near-monochrome and restrained, with 500-weight display type up to 72px, short uppercase labels with open tracking, rounded 24px controls. Use invented copy and placeholder imagery throughout.

### Stack
React 18 + Vite, TypeScript, Tailwind CSS, shadcn/ui (Radix), lucide-react, TanStack Query, zod, Supabase (form submissions only). Design tokens live as CSS variables and are mapped into the Tailwind theme.

### Pages & layout
Home page sections, in order:
- thin announcement strip with one inline link and a dismiss button
- top navigation: wordmark left, 4-6 text links, primary action right; collapses to a menu sheet under 768px
- left-aligned hero: oversized headline, short lede and a primary plus secondary action
- feature grid of icon, title and two-line description cells (3-4 columns desktop, 1 column mobile)
- alternating two-column text-and-visual blocks
- row of placeholder partner marks in a single muted tone (wraps to two rows on mobile)
- metrics band with three or four large figures and captions
- large framed product view on a tinted surface
- article or story cards with image, kicker, title and date
- footer with grouped link columns, legal line and social icons
- content sits in a 1200px centered container with 24px side padding (16px on mobile)
- sections are separated by 80px of vertical space on desktop, roughly half that on mobile
Also build a simple contact page with a lead form and a 404 page in the same style. Test at 375px, 768px and 1280px.

### Design system
```css
:root {
  --color-canvas: #ffffff;
  --color-surface: #f3f4f3;
  --color-text: #0a0a0a;
  --color-muted-text: #3c3e3d;
  --color-divider: #292b2a;
  --color-accent: #ff6105;
  --color-primary-action-fill: #ce4c00;
  --color-link-text: #c24700;
  --color-focus-ring: #f55a00;
  --color-inverse-band: #202120;
  --color-supporting-accent: #ffa069;
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-24: 24px;
  --text-32: 32px;
  --text-48: 48px;
  --text-72: 72px;
  --radius-nav: 40px;
  --radius-cards: 5px;
  --radius-images: 8px;
  --radius-inputs: 50px;
  --radius-buttons-small: 8px;
  --radius-buttons-primary: 50px;
  --radius-buttons-secondary: 24px;
  --space-unit: 4px;
  --container: 1200px;
  --shadow-1: rgba(255, 97, 5, 0.6) 1px 6px 14px 0px, rgba(0, 0, 0, 0.06) 0px 1px 4px 0px;
}
```
Display Inter, body Inter (Google Fonts, self-hosted, font-display: swap).
Type scale (size/weight/line-height tracking): 12px/400/1.5, 14px/400/1.5, 16px/400/1.56, 18px/400/1.5, 24px/400/1.33 -0.001em, 32px/500/1.22 -0.001em, 48px/500/1.2 -0.001em, 72px/500/1.1 -0.001em.
Spacing: comfortable density on a 4px base unit; container 1200px; section gap 80px; card padding 16px; element gap 5px-8px; radii nav 40px, cards 5px, images 8px, inputs 50px, buttons-small 8px, buttons-primary 50px; 1 shadow level.
Signature moves: 500-weight display type up to 72px; short uppercase labels with open tracking; rounded 24px controls; one subtle shadow for raised elements; one vermilion accent used sparingly; contrasting full-width bands to break the page rhythm.

### Components & interactions
- **primary button**: fill #ce4c00, label #ffffff; 50px radius; type 16px; soft shadow
- **primary button (variant 2)**: fill #ce4c00, label #ffffff; 24px radius; 1px border
- **metric block**: colors: canvas #ffffff, primary action fill #ce4c00, text #0a0a0a; 8px radius; type 12px; underlined
- **announcement strip**: colors: text #0a0a0a, divider (decorative) #292b2a, surface #f3f4f3; uppercase with at least 0.05em tracking
- **product frame**: colors: text #0a0a0a, primary action fill #ce4c00; 3px border
- **feature card**: colors: inverse band #202120, canvas #ffffff, primary action fill #ce4c00; padding 120px; type 48px/300
- **feature card (variant 2)**: colors: surface #f3f4f3; 5px radius
- **content card**: colors: canvas #ffffff, surface #f3f4f3, text #0a0a0a; 5px radius; 1px border; no shadow
- **announcement strip (variant 2)**: colors: surface #f3f4f3, divider (decorative) #292b2a, text #0a0a0a; type 14px
- **top navigation bar**: colors: canvas #ffffff, divider (decorative) #292b2a, surface #f3f4f3; 1px border
- **pill badge**: colors: surface #f3f4f3, primary action fill #ce4c00; 50px radius; 1px border; type 16px
- opacity and color transitions only, 150ms ease-out
- every interactive element shows a 2px #f55a00 focus ring with 2px offset
- primary action darkens or lightens by one step on hover and keeps its label color
- navigation collapses to a full-height menu sheet under 768px, trapping focus while open
- all motion is disabled under prefers-reduced-motion

### Data & state
Content comes from typed local collections: Feature{icon, title, body}, Post{slug, title, kicker, excerpt, coverUrl, publishedAt}, Product{slug, name, price, imageUrl, alt, inStock, swatches[]}, Metric{value, label}, PartnerMark{label, placeholderSvg}, Lead{email, name?, message?, createdAt}. The lead form posts to a Supabase edge function. Handle these states:
- images show a surface-colored placeholder until loaded, with alt text if they fail
- forms: inline validation, disabled submit while sending, success message and retryable error
- mobile menu open and closed states
- hover, focus-visible, active and disabled states for every button style
- reduced-motion variant with no transitions beyond opacity
- out-of-stock product tile with a disabled add button and 'Notify me' alternative
- cart count badge updates after add

### Accessibility
- Text, links, focus rings and input borders use only the verified pairs listed in contrast checks.
- Focus ring: 2px solid #f55a00 with 2px offset on every interactive element.
- Body text is 16px or larger at 1.5 line height; nothing is smaller than 12px.
- Decorative colors (dividers and supporting accents) never carry text or the only signal of state.
- Uppercase labels stay short, use at least 0.05em tracking and keep sentence-case text in the HTML source.
- Text over photos or gradients sits on a scrim that keeps it at 4.5:1 against the lightest area.
- Respect prefers-reduced-motion; no parallax or autoplay video without a pause control.
- Some observed colors were moved to the nearest passing shade of the same hue; use the palette values here, not lighter originals.
Verified contrast: body text on canvas #0a0a0a on #ffffff = 19.8:1; body text on surface #0a0a0a on #f3f4f3 = 17.96:1; muted text on canvas #3c3e3d on #ffffff = 10.78:1; muted text on surface #3c3e3d on #f3f4f3 = 9.77:1; primary action label on fill #ffffff on #ce4c00 = 4.51:1; link text on canvas #c24700 on #ffffff = 5.01:1; focus ring on canvas #f55a00 on #ffffff = 3.31:1; focus ring on surface #f55a00 on #f3f4f3 = 3.0:1; input border on canvas #292b2a on #ffffff = 14.25:1; accent icons and active marks on canvas #ff6105 on #ffffff = 3.02:1; text on inverse band #ffffff on #202120 = 16.16:1.

### Security
- Validate every form with a shared zod schema on the client and again in the edge function; reject unknown fields.
- Rate-limit form endpoints per IP and add a honeypot field; store leads in a Supabase table with RLS allowing insert only for anonymous users and select only for staff.
- Set a strict Content-Security-Policy, self-host fonts and icons, and avoid third-party scripts beyond privacy-friendly analytics.
- Open external links with rel="noopener noreferrer" and never put secrets or API keys in client code.
- Checkout goes through a hosted payment provider; the site never handles card data, and prices are re-validated on the server.

### Performance & SEO
- Static generation for every content page; ship no JavaScript to sections that do not need it.
- Images in AVIF/WebP with explicit width and height, lazy-loaded below the fold; preload the hero image and the display font only.
- One h1 per page, descriptive titles and meta descriptions, Open Graph tags with a generated preview image, and a sitemap.
- Target Lighthouse 95+ for performance, accessibility, best practices and SEO.

### Guardrails
- Keep one primary action style (#ce4c00 fill, #ffffff label) and use it once per view; secondary actions stay outlined or text-only.
- Use the vermilion accent for small marks only (links, active states, icons), at most two or three times per screen.
- Keep the 24px control radius consistent across buttons, inputs and chips.
- Limit headline sizes to the type scale; the 72px display size appears once per page, in the hero.
- Partner and customer marks are placeholders in one muted tone; never use real company logos.
- Keep copy short and concrete: one idea per section, with a heading that states the benefit.
Acceptance criteria:
- Every color in the build comes from the tokens above and every text pair matches a verified contrast pair.
- The page works with keyboard only, shows a visible focus ring everywhere and passes an automated axe check with no violations.
- No real brand names, logos, product screenshots or copied marketing text appear anywhere.
- Layout holds at 375px with no horizontal scrolling.

Open the builderThe whole gallery