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

# Maximilian Design Guide

Version 1.0 · November 2026 · by WeaverPixel

This project was built from Maximilian, a blog project template by WeaverPixel for Rapidweaver Elements. This guide describes how Maximilian 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/maximilian-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/maximilian-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/maximilian-decisions.
- **Clone, don't rebuild.** New sections start as a copy of an existing Maximilian section (section 7).

## 2. Shortcuts

- **"Maximilian style"** – Apply this guide to the page or section the user names: fonts, colors for light and dark mode, spacing, buttons. Then list what you changed in a few lines.
- **"check Maximilian 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 Maximilian guide updates"** – Compare this note with the latest online version at https://weaverpixel.com/ai-guides/maximilian.md. Show what is new or changed in plain words. Replace this note only after the user says yes. Never touch concepts/maximilian-decisions. If you can't open web pages, ask the user to paste the online version into the chat.

## 3. Look and feel

- **Cards on a calm background.** Maximilian is a clean blog. Content sits on rounded cards, on a soft blue-gray page background.
- **A photo with a card on top.** Most pages open with a wide photo. A card overlaps it and holds a small label, the page title and a short text.
- **Friendly headlines.** Headlines use the heading font (a geometric sans serif), mostly bold. Body text uses a classic serif.
- **One purple color.** Blue-gray surfaces, and purple (brand) as the only accent: filled buttons, round icon buttons, the short line under titles, hover states.
- **Soft and quiet.** Default rounded corners and almost no borders. Shadows only on the hero card, the round buttons and the team photos.
- **Light and dark.** Every color is set as a light/dark pair. New elements must have both.

## 4. Pages and their roles

| Page | Role | Top-level sections (exact names in the layer tree) |
|------|------|------|
| Homepage | Front page: hero, latest posts with page numbers, search, call to action | Navigation - Global · Hero · Homepage - Posts Header · Homepage - Latest Posts · Homepage - CTA · Footer - Global |
| Single-Post (child of Homepage) | CMS item page – shows one post, with "You May Like" and a newsletter box at the side | Navigation - Global · Item (inside: Single Post - Blog Hero, Single Post - Content Area) · Footer - Global |
| Team | The people behind the blog | Navigation - Global · Hero · Team - Content Area · Footer - Global |
| Contact | Contact form | Navigation - Global · Hero · Contact - Content Area · Footer - Global |
| Legal (folder): Privacy Policy, Cookie Policy, Terms & Conditions, Imprint | Legal texts | Navigation - Global · Legal - Hero · Legal - Content Area · Footer - Global |

Navigation - Global and Footer - Global are Elements Globals. Edit them once, the change shows on every page.

Inside Single Post - Content Area the two columns are named Main Content and Side Content. Inside Team - Content Area the cards sit in "Team", inside Contact - Content Area the text and the form sit in "Contact Form".

## 5. Content from the CMS

**Posts** live in the folder cms/posts, one Markdown file per post. The file name becomes the web address of the post. For new posts use the date, then the title in lowercase with hyphens between the words, e.g. 2026-11-01-my-new-post.md – search engines read hyphens as word breaks, underscores not. The demo posts use underscores. Don't rename existing post files, because that changes their web address. Front matter:

- title – the headline, in double quotes
- date – "YYYY-MM-DD"
- tags – list, e.g. [Startup, Events]
- categories – list, e.g. [Business]
- author – the full name exactly as in the name field of the author's file in cms/authors, e.g. John Doe
- featured – true or false. The Homepage shows all posts, so featured has no visible effect there.
- image – src (path in Resources, e.g. /blog-pictures/photo.jpg) and alt (always fill in, it helps SEO and screen readers)

The Homepage lists published posts by date, newest first, 9 per page with page numbers. The excerpt on the post cards is cut after 22 words.

**Authors** live in cms/authors: name, title (job title), bio, date, image. The name is shown on the post cards and on Single-Post.

**The Team page is static.** It doesn't read cms/authors. If a person changes, update both the Team page and the author's file. In the template, names and photos match.

**Rules:** Add or change posts and authors as Markdown files. Headings inside a post start at ## – the post title is already the main heading of the page. Never type post content as static text into a Collection or Item component. Images go into Resources: blog-pictures, team-pictures, header-pictures, legal-pictures, icons.

## 6. Coming from Rapidweaver Classic

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

- **Blog page / blog plug-in → CMS.** Each post is a Markdown file in cms/posts. The Homepage lists the posts with a Collection component, the Single-Post page shows one post with an Item component.
- **Theme and theme styles → Theme Studio.** Colors and fonts of Maximilian are set once in the project theme, not on every page.
- **Partials → Globals.** Navigation and footer.
- **Stacks → Components. Columns stack → Grid or Flex.**
- **Hiding a stack → display mode** in the Inspector.
- Keep it practical: "In Classic you would …, in Maximilian you …".

## 7. Sections to reuse

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

| You need | Clone this section | From page |
|------|------|------|
| Photo with a card on top, with label, title and text | Hero | Homepage, Team, Contact |
| The same for a text page, with a date as label | Legal - Hero | Legal pages |
| Section title with a short line below, with room for a button on the right | Homepage - Posts Header | Homepage |
| Grid of cards with text, photos or icons | Team - Content Area | Team |
| Text next to a form | Contact - Content Area | Contact |
| All posts with page numbers | Homepage - Latest Posts | Homepage |
| Call to action with image, title and form | Homepage - CTA | Homepage |
| Long formatted text | Legal - Content Area | Legal pages |

## 8. Colors

Theme color strips: **surface** (blue-gray), **text** (gray), **brand** (purple, #7969d8 at 500), **accent** (pink-purple, #bb69cc at 500, not used on the pages), white, black.

**Careful:** the text strip runs the other way round. text 50 is the darkest shade and text 950 the lightest. For surface and brand, 50 is the lightest and 950 the darkest. Always check the hex value in readTheme before you pick a text color.

| Role | Light mode | Dark mode | Contrast (light / dark) |
|------|------|------|------|
| Page background | surface 100 #ebeff3 | surface 900 #303c4d | – |
| Card background | surface 50 #f5f7fa | surface 800 #344458 | – |
| Menu panels and Homepage - CTA | surface 200 #d2dbe5 | surface 800 #344458 | – |
| Main text | text 100 #374151 | text 800 #d6dbe1 | 8.9:1 / 8.0:1 on the page, 9.6:1 / 7.1:1 on cards |
| Long text (posts, legal pages) and menu links | text 100 #374151 | text 900 #eceff2 | 8.9:1 / 9.7:1 on the page, 9.6:1 / 8.6:1 on cards |
| Filled button and label | brand 500 #7969d8 with text 900 #eceff2 | brand 50 #eae5f9 or brand 200 #c0b2ed with text 100 #374151 | 3.8:1 / 8.4:1 or 5.3:1 |
| Filled button, hover | brand 700 #51468a with text 900 | brand 200 #c0b2ed with text 100 | 7.0:1 / 5.3:1 |
| Menu link hover | brand 500 #7969d8 | brand 200 #c0b2ed | 3.8:1 / 5.8:1 |
| Short line under titles (Subline -001) | brand 500 #7969d8 | brand 100 #d5cbf3 | – |
| Dividers | surface 200 #d2dbe5 | surface 500 #5c7b9b | – |
| Form fields | surface 50 #f5f7fa with text 100 | surface 900 #303c4d with text 800 | 9.6:1 / 8.0:1 |
| Form field border | surface 900 #303c4d | surface 200 #d2dbe5 | – |
| Round icons in team cards | brand 500 with text 900 | brand 100 with text 100 | 3.8:1 / 6.7:1 |
| Ring around team photos | brand 400 #9281df | brand 200 #c0b2ed | – |

The Newsletter fields in the menu panels and on Single-Post use surface 50 / surface 950 with text 100 / text 900 (9.6:1 / 13.2:1).

Rules:

- Always set a light and a dark value. Copy the hex values exactly from readTheme.
- Light text on purple buttons (3.8:1) is part of Maximilian's look, not a mistake. Don't change it unless the user asks. If the user needs a higher contrast, record the new color as a decision.
- Purple text in light mode: brand 500 only for large text (3.8:1 on the page). Use brand 700 #51468a for small text (7.0:1).
- Purple text in dark mode: brand 200 #c0b2ed works for any size (5.8:1 on the page, 5.1:1 on cards). Don't use brand 500 (2.3:1 on cards).
- Large text means 24 px and up, or bold (700) from 19 px.
- Don't add new colors. If the user wants another brand color, change the brand strip in Theme Studio, so the whole site follows – and record it as a decision.
- Don't use pure black or white for text.

## 9. Typography

Fonts in the theme: **heading** = Josefin Sans (sans serif), **body** = Cardo (serif), quote = Georgia, code = Menlo.

| Role | Font | Weight | Size | Tag |
|------|------|------|------|------|
| Title in Hero and Legal - Hero | heading | 700 | 2xl → md 4xl → lg 3xl → xl 4xl | h1 – one per page |
| Post title on Single-Post | heading | 700, line height snug | 2xl → md 3xl → xl 4xl | h1 |
| Section title ("Read Our Latest Posts", "Our Team", "Contact Us") | heading | 700 | 2xl → sm 4xl | h2 |
| Title in Homepage - CTA | heading | 600 | 2xl → sm 3xl → md 4xl → xl 5xl | h2 |
| "You May Like" | heading | 700, line height snug | 2xl | h2 |
| "Newsletter" on Single-Post | heading | 600 | 2xl | h2 |
| Title in team and contact cards | heading | 700, centered | 2xl → sm 3xl | h3 |
| Title in post cards | heading | 700, line height snug | xl | h3 |
| Titles in "You May Like" | heading | 400, line height snug | lg | h3 |
| Titles in the footer and menu panels | heading | 600 | 2xl | p |
| Label above a title | body | 600 | xs | button |
| Body text | body | 400 | base | p |
| Author and date line | body | 400 | base | p |
| Long text (posts, legal pages) | Markdown / Typography component with the typography style "article" | | ## 2xl, ### xl | |

Date format: 22. Aug 2025 (d. M Y). The author line reads "Author: John Doe | 22. Aug 2025".

Every page has exactly one h1. Homepage, Team and Contact share the same hero, so all three say "Maximilian". If the user wants a page's own title there, change the text on that page. Don't add hidden headings.

## 10. Buttons, links and icons

- **Filled button** ("Button -001 IR", "Button -001 IL", "Button -002 IR"): default rounded corners, body font, base size, brand colors from section 8. IR has the icon on the right, IL on the left. Used for "Get My Copy", "Subscribe" and "Submit".
- **Round icon button** ("Button -202"): circle, 56 px, brand colors from section 8, icon 24 px, shadow xl. Used for the menu, the search and the buttons in the menu panels.
- **Label** ("Welcome To", the date on legal pages): a small filled button with no link.
- **Text links** in the footer: no background, body font, base size.
- **Social icons:** 24 px. The icon files are in Resources/icons.
- **Forms:** The fields are rounded, with a thin border and the colors from section 8. Required fields end in * in the placeholder. A page with a form must be a .php page – Contact and the Homepage are index.php.
- **Before going live:** The contact form has example mail data and spam protection is off, the newsletter forms are not connected to a service. The user must set these up. "I agree to the Privacy Policy" isn't linked yet.

## 11. Spacing and layout

- Breakpoints: sm 640 px, md 768 px, lg 1024 px, xl 1280 px. 2xl is switched off.
- The page has a small side padding (spacing token 2). Sections use the full container width.
- Team and contact cards: padding 8, 8/16 from sm, 16 from lg, default rounded corners. Long text in Legal - Content Area sits directly on the page background.
- Post cards: 3 columns from lg, gap 6. Photo on top, text below.
- Team cards: 12-column grid, gap 4 (8 from xl) and row gap 8. One column on small screens, three from lg.
- Contact: text 4 columns and form 8 columns from lg.
- Single-Post: Main Content 8 columns and Side Content 4 columns from md, gap 6 (8 from lg, 12 from xl).
- Legal text: side padding 6, 20 from md, 36 from lg, 48 from xl.
- Sections stack without large gaps. The space comes from padding in the sections themselves.

## 12. Navigation and footer

- **Navigation - Global:** Logo on the left. Page links come from the page list (Homepage, Team, Contact, Legal with its four pages). On the right a round menu button opens a side panel with logo, a short example text, the newsletter box, the copyright and social icons. On mobile the page links move into the mobile menu, with the same panel button.
- **Footer - Global:** Below a line four columns – logo with text and social icons, Useful Links, Other Links, Contact Us (address, phone, email with icons). Below them the copyright line.
- **Search:** The round button in Homepage - Posts Header opens a panel with the CMS search.
- **Replace before going live:** The links in the footer are placeholders. The text in the panel ("This is the dropdown area …") is an example. The copyright line "© 2026 WeaverPixel • Made with ❤️ in Germany" and the address in the footer are demo content.
- New pages appear in the page links automatically. Put legal pages into the Legal folder.

## 13. Names in the layer tree

- A section that is used on several pages has a plain name: "Hero".
- A section built for one page type has the page type in front: "Homepage - CTA", "Team - Content Area", "Contact - Content Area", "Legal - Hero", "Single Post - Blog Hero".
- Globals end in " - Global".
- 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. "About - Content Area".
- Buttons and details carry numbered style names ("Button -202", "Button -001 IR", "Subline -001"). Keep the name when you clone them.
- Don't rename "Navigation - Global" and "Footer - Global".

## 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 posts.

## 15. Please don't

- Don't rebuild a Maximilian 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 put static text into CMS Collections.
- Don't leave out the dark mode value.
- Don't add colors outside the theme.
- Don't add hidden headings.

## See also

- [[concepts/maximilian-decisions]]
- [[overview]]