---
title: Studio Design Guide
date: 2026-11-05
concerns: []
summary: How Studio looks and is built – read before you build, restyle or review anything in this project.
type: concept
---

# Studio Design Guide

Version 1.0 · November 2026 · by WeaverPixel

This project was built from Studio, a business project template by WeaverPixel for Rapidweaver Elements. The demo is an art gallery, but Studio fits any small business. This guide describes how Studio looks and how it is built, so that new pages and sections fit in. Read it before you build, restyle or review anything.

## 1. How to use this guide

- **Priority:** 1. the user's decisions in concepts/studio-decisions, 2. this guide, 3. your own taste.
- **Record decisions:** When the user decides something that differs from this guide (another color, another font, a new section type), add one line to concepts/studio-decisions with the date. Never change or delete a decision unless the user asks.
- **Live pages differ from the guide?** Ask the user whether the change was intended. If yes, record it as a decision. Don't "fix" it silently.
- **Don't edit this note.** Guide updates replace it completely. Everything the user decides goes into concepts/studio-decisions.
- **Clone, don't rebuild.** New sections start as a copy of an existing Studio section (section 7).

## 2. Shortcuts

- **"Studio style"** – Apply this guide to the page or section the user names: fonts, colors, spacing, buttons. Then list what you changed in a few lines.
- **"check Studio style"** – Review a page against this guide and the user's decisions. Don't change anything. Report the differences as a short list (section, what differs, suggested fix), most visible first.
- **"check Studio guide updates"** – Compare this note with the latest online version at https://weaverpixel.com/ai-guides/studio.md. Show what is new or changed in plain words. Replace this note only after the user says yes. Never touch concepts/studio-decisions. If you can't open web pages, ask the user to paste the online version into the chat.

## 3. Look and feel

- **Black, white and one yellow.** A light gray-white page, black buttons and text, and a bright yellow (brand) as the only accent: hover states, labels, the short line under page titles and the big numbers on About Us.
- **A sidebar on the left.** On large screens a narrow sidebar holds the logo, the menu button and the social icons. The page content sits to the right of it.
- **Tall, condensed headlines.** Page and section titles use Barlow Condensed in capitals. Body text uses Roboto.
- **Photos first.** Most pages open with a large photo or a video next to the title. Shop and blog cards are photos with the text on top.
- **Light only.** Studio has no dark mode. Dark mode is switched off in the project settings.

## 4. Pages and their roles

| Page | Role | Sections in CONTENT AREA (exact names in the layer tree) |
|------|------|------|
| Homepage | Front page with two photos | Hero - Two Photos · Homepage - Features · Homepage - CTA · Events - Timeline · Shop Grid · Blog Grid · Footer - Global |
| Homepage - Alternative Hero 1 Photo | The same front page with one photo | Hero - One Photo · then as Homepage |
| Homepage - Alternative Hero Video | The same front page with a video | Hero - Video · then as Homepage |
| About Us | The business and the people | Hero - One Photo · About - Counter · About - Team · About - Timeline · Footer - Global |
| Portfolio | Photo galleries | Gallery A · Gallery B (alternating) · Footer - Global |
| Events | Upcoming events with details | Events - Timeline · Footer - Global |
| Contact Us | Contact form | Contact Form · Footer - Global |
| Shop | All products | Shop Grid · Footer - Global |
| Shop Latest, Shop Special, Shop Discounted (in the shop folder) | Product groups | Shop Grid · Footer - Global |
| Shop Item 01–09 (in the shop folder) | One product each | Shop Item - Hero · Shop Item - FAQ · You May Also Like · Footer - Global |
| Blog | All articles | Blog Grid · Footer - Global |
| Static Blog 01–09 (in the blog folder) | One article each | Article Hero · Article Text · You May Also Like · Footer - Global |
| Legal (folder): Privacy Policy, Terms & Conditions, Cookie Policy | Legal texts | Legal Hero · Legal Text · Footer - Global |

Every page has the same frame: Page Layout holds SIDEBAR and CONTENT AREA. CONTENT AREA starts with Menu (Visible On Medium Screens Only), then the page's sections, then Footer - Global. On Events, Portfolio and Contact Us the page title (h1) sits directly in CONTENT AREA, above the first section.

The three homepages are alternatives. The user keeps one and deletes the other two (and their links in Menu Links - Global).

## 5. Blog and shop are static

Studio contains no CMS and no shop system. Blog and shop are a static design template: the cards, the article pages and the product pages are ordinary pages, and "Add to Cart" has no function. The layout is ready for a CMS or a shopping system – the user can connect one later and keep the design.

- **New article:** duplicate a Static Blog page in the blog folder and change its texts and photo. Add a card to Blog Grid on the Blog page (clone an existing card) and link its "Read More" button to the new page. The homepages show three cards – update them if the new article should appear there.
- **New product:** duplicate a Shop Item page in the shop folder. Add a card to Shop Grid on the Shop page and on the matching group page (Shop Latest, Shop Special or Shop Discounted) and link its "Buy" button to the new page.
- **You May Also Like** on articles and products shows three fixed cards. Check their links when you add or delete pages.
- **Labels on the cards** ("Latest", "Special", "30% Discount", "Street Art", "Office") are plain labels without a link. Keep them in line with the page the product is listed on.
- Don't tell the user that blog or shop updates themselves. If the user wants a real blog or shop, explain that Studio's pages are the design and a CMS or shop system has to be connected.

## 6. Coming from Rapidweaver Classic

If the user knows Rapidweaver Classic, explain with their words:

- **Theme and theme styles → Theme Studio.** Colors and fonts of Studio are set once in the project theme, not on every page.
- **Partials → Globals.** Menu Links - Global and Footer - Global. The sidebar and the mobile menu are not Globals (section 12).
- **Blog page or shop plug-in → static pages here.** Each article and each product is its own page (section 5).
- **Stacks → Components. Columns stack → Grid or Flex.**
- **Hiding a stack → display mode** in the Inspector.
- Keep it practical: "In Classic you would …, in Studio you …".

## 7. Sections to reuse

To add a section, duplicate the matching Studio section and change its content. Keep the section's name scheme (section 13). Use Elements' Smart Templates only if no Studio section fits – then restyle them with sections 8 to 11.

| You need | Clone this section | From page |
|------|------|------|
| Page title with text and one photo | Hero - One Photo | About Us |
| Page title with text and two photos | Hero - Two Photos | Homepage |
| Page title with text and a video | Hero - Video | Homepage - Alternative Hero Video |
| Section title with a grid of photo cards and a button | Homepage - Features | Homepage |
| Small box on a photo background (opening hours, contact data) | Homepage - CTA | Homepage |
| Cards with photo, date, title and a details window | Events - Timeline | Events |
| Grid of product cards with label and button | Shop Grid | Shop |
| Grid of article cards with label, author and date | Blog Grid | Blog |
| Big numbers with a short text | About - Counter | About Us |
| People with photo, name, text and social buttons | About - Team | About Us |
| Steps over the years | About - Timeline | About Us |
| Photo gallery | Gallery A or Gallery B | Portfolio |
| Photo next to a form | Contact Form | Contact Us |
| Product with photo, text, price and button | Shop Item - Hero | Shop Item 01 |
| Questions and answers that open and close | Shop Item - FAQ | Shop Item 01 |
| Three related cards | You May Also Like | Shop Item 01 or Static Blog 01 |
| Article or legal page header with date and photo | Article Hero or Legal Hero | Static Blog 01 or Privacy Policy |
| Long formatted text | Article Text or Legal Text | Static Blog 01 or Privacy Policy |

## 8. Colors

Theme color strips used by Studio: **brand** (yellow, #ffe10c at 50, getting darker towards 950), **text** (black to white), **accent** (the same values as text), **surface** (white to near black). The theme also lists Elements' standard colors (amber, blue, red …). Studio doesn't use them, except red for form error messages.

**Careful:** the text and accent strips run the other way round. text 50 is black (#000000) and text 950 white. For brand and surface, 50 is the lightest shade. Always check the hex value in readTheme before you pick a color.

| Role | Color | Contrast |
|------|------|------|
| Page background | surface 50 #fafafa | – |
| Sidebar strip | surface 100 #f5f5f5 | – |
| Light bands (Homepage - Features, You May Also Like, menu panel) | surface 200 #e5e5e5 | – |
| Homepage - CTA box and the About - Team band | surface 100 #f5f5f5 | – |
| Main text, titles, menu and footer links | text 100 #202028 | 15.5:1 on the page, 12.8:1 on surface 200 |
| Subtitle under page titles, names in team and author cards | text 300 #4b4b4b | 8.4:1 |
| Text on photo cards (Blog Grid) | text 900 #e6e6e6 on a dark overlay | – |
| Button (Button -002 IR) | accent 50 #000000 with text 900 #e6e6e6 | 16.8:1 |
| Button, hover | brand 50 #ffe10c with text 100 #202028 | 12.3:1 |
| Button on product and article cards | brand 50 with text 100, hover accent 50 with text 900 | 12.3:1 / 16.8:1 |
| Label (Button -004) | brand 50 with text 100 | 12.3:1 |
| Short line under page titles | brand 50 | – |
| Big numbers on About - Counter | brand 50 | 1.26:1 – decoration, see rules |
| Square social buttons (team and author cards) | accent 50 with icon text 900, hover brand 50 with icon text 100 | 16.8:1 / 12.3:1 |
| Questions and answers (Shop Item - FAQ) | surface 900 #171717, titles text 900, text text 800 #cccccc, arrows brand 50 | 14.4:1 / 11.2:1 |
| Price box on product pages | surface 300 #d4d4d4 with text 50 #000000 | 14.2:1 |
| Form fields | no fill, border surface 900 #171717, typed text and placeholder text 100 | 15.5:1 |
| Checkbox | border surface 500 #737373, filled surface 500 when checked | 4.5:1 |
| Frame behind gallery photos | accent 100 #202028 | – |
| Lines between sections | surface 200 #e5e5e5 | – |
| Link hover in menu and footer | brand 100 #d0b717 | 1.9:1 on the page |

Rules:

- **The Studio button:** black with light text or icon, yellow with dark text or icon on hover. Use it for every new button. On product and article cards (photos) the button runs the other way round: yellow, black on hover.
- **Yellow is never text on a light background.** The big numbers on About - Counter are the one exception – they are decoration next to a black text. Don't copy that to other text.
- The yellow link hover in the menu and the footer (brand 100, 1.9:1) is part of Studio's look. Don't change it unless the user asks – then record the new color as a decision.
- Copy the hex values exactly from readTheme.
- Don't add new colors. If the user wants another accent color, change the brand strip in Theme Studio, so the whole site follows – and record it as a decision.
- Don't use the standard color strips (amber, blue, gray, zinc …). They come with Elements, they are not part of Studio.
- Don't switch on dark mode. Studio has no dark values.

## 9. Typography

Fonts in the theme: **heading** = Barlow Condensed, **body** = Roboto, quote = Georgia, code = Menlo.

| Role | Font | Weight | Size | Tag |
|------|------|------|------|------|
| Page title | heading, capitals | 500 | 4xl → sm 6xl | h1 – one per page |
| Subtitle under the page title | heading | 500 | 2xl → sm 4xl | p |
| Section title ("Featured Products", "Our Team") | heading, capitals | 500 | 4xl → sm 6xl | h2 |
| Event title | heading | 500 | 4xl | h2 on Events (cards and details windows), h3 on the homepages |
| Title on product cards | heading | 500 | 3xl | h3 |
| Title on article cards | heading | 500 | 3xl → lg 2xl → xl 3xl | h3 |
| Name in team and author cards | heading | 500 | 2xl → sm 4xl | h3 |
| Title in questions and answers | heading | 500 | 2xl | h3 |
| Years in About - Timeline | heading | 500 | 3xl → md 2xl → xl 3xl | h3 |
| Big numbers in About - Counter | heading, capitals | 500 | 4xl → sm 6xl | p |
| Menu links | heading | 400 | 4xl | p |
| Titles in the footer | heading | 600 | 2xl | p |
| Price | heading | 500 | 2xl | p |
| Button | heading, capitals, wide letter spacing | 400 | 2xl | button |
| Label on cards | body | 700 | sm | button |
| Event date / time | body | 600 / 400 | lg | p |
| Body text | body | 400 | base | p |
| Long text (articles, legal pages) | Typography component with the typography style "article" | | | |

Every page has exactly one h1. Inside a section, titles step down from h2 to h3. Don't add hidden headings.

Demo formats: dates "24 December 2026", "May 2026", "24th of August 2026"; times "19:00 - 22:30"; prices "199,00 €".

## 10. Buttons, links and icons

- **Button** ("Button -002 IR"): text with an arrow icon on the right, default rounded corners, border 2 in the button color, padding 2.5 / 8 left / 4 right. Colors in section 8. Used for "About Us", "All Our Events", "See Details", "Submit", "Back to Shop", "Add to Cart".
- **Card button** ("Button -002 IR" on Shop Grid, Blog Grid and You May Also Like): the same button in yellow, used for "Buy 199,00 €", "Read More", "Shop Items".
- **Label** ("Button -004"): small yellow box at the top left of a card, shadow lg, no link.
- **Menu button** ("Button -203"): square, 56 px, three-line icon. Black in the sidebar, yellow in the mobile menu.
- **Social icons:** 24 px. In the sidebar plain icons, in team and author cards square buttons (section 8). The demo icons have no links yet.
- **Forms:** Contact Us has the form, so the page is index.php. Required fields end in * in the placeholder. The privacy checkbox is required.
- **Before going live:** The contact form has example mail data and spam protection is off. "I agree to the Privacy Policy" isn't linked. "Add to Cart" has no function (section 5).

## 11. Spacing and layout

- Breakpoints: sm 640 px, md 768 px, lg 1024 px, xl 1280 px, 2xl 1536 px (all switched on).
- SIDEBAR is 96 px wide and stays in place while the page scrolls. It shows from lg. Below lg the menu button sits at the top right instead (section 12).
- Sections use the full width of CONTENT AREA with a small side padding (spacing token 2, 8 px). Top and bottom padding 8, Events - Timeline and the footer 16.
- Card grids (Shop Grid, Blog Grid, You May Also Like): one column, three from lg. Gap 2 → lg 4 → xl 8, row gap 4 → md 8. Card padding 4 → xl 8.
- Homepage - Features: 12-column grid, gap 6, cards with shadow md.
- Hero - Two Photos: text and photos stacked, side by side from xl. The text box has padding 12 / 8, wider from sm and lg. The photos are 400 px high, 740 px from md.
- Events - Timeline: cards with shadow xl, photo on top.
- Homepage - CTA: a 340 px box on a photo background.
- Lines (surface 200) separate Events - Timeline, Shop Grid and Blog Grid on the homepages.
- Corners: default rounded. The menu buttons are square.
- Shadows: md on feature cards, lg on labels, xl on event cards and the mobile menu button. The theme shadow "Studio" isn't used on the pages.

## 12. Navigation and footer

- **SIDEBAR** (from lg): logo at the top, menu button in the middle, social icons at the bottom. The menu button opens a 400 px panel (surface 200) with Menu Links - Global and a close button.
- **Menu (Visible On Medium Screens Only)** (below lg): a yellow menu button at the top right that opens a box with the same Menu Links - Global.
- **SIDEBAR and Menu (Visible On Medium Screens Only) are copies on every page, not Globals.** Elements Base allows only two Globals per project, and Studio uses them for the menu links and the footer. If the user changes the logo, the social icons or the menu button, make the same change on all 33 pages – with MCP in one go.
- **Menu Links - Global:** the page links are typed in by hand, they don't follow the page list. Add a link here for every new page that belongs in the menu, and remove the links of deleted pages ("Homepage Altern01/02" when the user keeps one homepage).
- **Footer - Global:** below a line four columns – About Us text, Our Pages, Useful Links, Contact Us (address, phone, email with icons). Below them the copyright line.
- **Replace before going live:** the texts in the footer, the address, the phone numbers and the email are demo content. "© 2026 WeaverPixel • Made with ❤️ in Germany" is the demo copyright.

## 13. Names in the layer tree

- A section that is used on several pages has a plain name, the same everywhere: "Hero - One Photo", "Shop Grid", "Blog Grid", "You May Also Like".
- A section built for one page type has the page type in front: "Homepage - Features", "About - Team", "Shop Item - FAQ".
- Globals end in " - Global": "Menu Links - Global", "Footer - Global". Don't rename them.
- The frame keeps its names: "Page Layout", "SIDEBAR", "CONTENT AREA", "Menu (Visible On Medium Screens Only)".
- Name new sections the same way: a plain name if the section can be reused on other pages, the page type in front if it only makes sense on that page, e.g. "Events - Calendar".
- Buttons and details carry numbered style names ("Button -002 IR", "Button -004", "Button -203", "Heading -001"). Keep the name when you clone them.

## 14. Components that fit (suggest only when useful)

Suggest these only when they solve the user's request, and never add them without asking:

- **Table of Contents** by WeaverPixel – for long articles and legal pages.
- **ShortCodes** by WeaverPixel – when the user connects the Elements CMS to the blog: places reusable blocks (a gallery, a table, a player) at any spot inside a post's text.

## 15. Please don't

- Don't rebuild a Studio section from single components when you can clone it.
- Don't replace the fonts or swap their roles.
- Don't pick text colors by shade number alone – the text strip is reversed.
- Don't use yellow for text on light backgrounds.
- Don't add colors outside Studio's strips, and don't switch on dark mode.
- Don't add hidden headings.
- Don't present the blog or the shop as working systems – they are static pages.
- Don't turn SIDEBAR or the mobile menu into Globals without asking – it can break projects on an Elements Base license.

## See also

- [[concepts/studio-decisions]]
- [[overview]]