--- name: brand-guidelines description: Use this skill when someone wants to turn their brand into a brand guidelines document that LandingRabbit reads cleanly when they sign up or create a new brand. Works from existing guidelines, a website, slides, social posts, or just a font and a few colours. --- # LandingRabbit Brand Guidelines Skill ## Purpose When someone signs up for LandingRabbit or creates a new brand, they paste or upload their brand guidelines. LandingRabbit reads that document and builds a design system from it: the colours, the fonts, how buttons and small labels look, how round the corners are, how much room sections get, and a look for every kind of section a page can have. This skill helps you write that document so nothing gets lost on the way. LandingRabbit applies what the document says, as written. Whatever the document leaves out gets a tested default. So the best document is short, uses LandingRabbit's own names for things, says each thing once, and only talks about what the brand has actually decided. The document sets up every section type LandingRabbit has, so a page built later on any of them looks right, whether or not the source material shows that kind of section. The shared values cover a section the source lacks. A section gets its own block only when the brand would treat it differently. LandingRabbit reads the visual side of a brand. It leaves alone everything that is not about how a page looks, for example tone of voice, copywriting rules, logo clear space, photo direction, animations, and what happens when the page scrolls. Those are edited in the app after sign up and design system creation. Highlighted words are the same: once the brand exists, people edit text in the app and can highlight any word there, so the document says nothing about which words are highlighted or what colour they take. ## Working from what the user has People arrive with all kinds of material: a guideline PDF, a website, a slide deck, a few Instagram posts, a screenshot, or just "our colour is green and we use Poppins". All of it works. When the material is images or slides rather than a written spec, read it for the brand's essence: for example the two or three colours that keep coming back, whether the type is heavy or light, serif or sans, whether corners are soft or sharp, whether the layout feels dense or airy, and whether the brand leans dark or light. Then picture what a typical website for this brand would look like, and write the document from that picture. Pick exact values that match what you see. Say in one line at the top of the document which values you chose yourself, so the user knows what to check. When the material is a website, its stylesheet is usually the most precise source. Colour variables, font names, button styles and corner radius come straight from there. Whatever the material is, it is where the values come from, not the list of what to cover. The list of what to cover is the Sections table. A page or block in the source with no counterpart in that table gives its colours and shapes to the shared values and is otherwise left out. ## Step-by-step task 1. Collect what the user has, in any form. 2. Ask only for the two things the document cannot do without: at least one font and the main colours. Everything else comes from the material or from LandingRabbit's defaults. 3. Pick one value per role. When a source gives several, the web version wins over print or slides. 4. Write the shared values first, using the skeleton under "Document skeleton" and the names under "Terminology". Then go through every row of the Sections table, decide whether the brand treats that section differently from the shared values, and write a block for it only when it does. 5. Read the document once from top to bottom for each entry under "The common slips", fix what you find, then reply with the document on its own. ## The common slips These are the places where a first draft usually goes wrong. Read them before writing and walk through them after, in this order. - **A section or layout that is not in the table.** Every section and layout name comes from the Sections table. Anything else is renamed to the nearest one there, or left out. - **An element with no slot.** Every named element is in the Sections table, the navigation and footer rows included. Same treatment. - **A decision made per piece of content.** Which words are highlighted, which words are bold, which plan is featured, which item comes first. Those are made in the editor once the brand exists, so the document leaves them out. - **A word from the source.** Every noun is checked against the translation table. - **A colour value outside Palette.** Every colour in the document is a named entry in Palette. A new colour gets a name there first. - **A range, a rough figure or two units.** One value, one format, throughout. Where the source gives a range or two alternatives, the document states the one value the brand would choose. - **A tier larger than the one above it.** Sizes run from 4xl down to xs. A tier that comes out bigger than the tier above it is checked against the source before it stays. - **A weight or size given to "headings" or "body".** Given to tier names instead, the way the example does it. - **Something that happens.** Anything on scroll, focus, click or load. Hover on buttons and links stays. The rest goes. - **A rule that depends on the situation.** Two plain rules on two elements, or none. - **Two styles for one kind of item.** Every item in a section shares one style, in comparison as much as anywhere. - **A fact said twice.** The second copy goes. Brand holds the feel in words, the other blocks hold the values, and a section block holds only what differs from the shared values. The usual place this happens is a section block that repeats the item fill, the item border, or a text colour the shared values or the dark-surface paragraph already give. - **Text around the document.** The reply is the document. And finally: every palette colour is used by name at least once, every button role has a rest look and a hover look, every background names the text colours that sit on it, every font is on Google Fonts, is a system font, or names a Google Fonts substitute, and the document is under 25,000 characters. ## Rules - Say each thing once. The shared values apply everywhere. A section block holds only what is different in that section. - Name each colour once under Palette, with its value. Everywhere else, use the name. - Use LandingRabbit's names for sections and elements. The translation table turns everyday design words into those names. - Write rules that hold for everything in their scope. When a look depends on the situation, write it as two plain rules on two elements, or leave it out. - All items in a section share one style. A comparison is two or more items, for example a before and an after, and they share one style too. - Hover is the one interaction the design carries, on buttons and links. Give every button role a rest look and a hover look. - Give every background the text colours that sit on it: title, subtitle, smallprint and eyebrow, and the buttons when they change. - Use Google Fonts or system fonts. When the brand font is not on Google Fonts, name the closest Google Fonts family after the word "Substitute:". A system font is matched to its closest Google Fonts family, so naming that family directly gives the exact result. Anyone who wants their own font files used can contact the LandingRabbit team after the brand is generated. - Use one value format throughout: hex and px, or hsla and rem. - Leave out whatever the brand does not define. LandingRabbit fills it in with a default that works. - Keep the whole document under 25,000 characters. - Write in plain, everyday language, the way you would explain the brand to a new colleague. People who are not designers read this document, and they will ask you questions about it. - Write the document as markdown, with the heading marks and pipe tables the skeleton and the example use. - Reply with the document and nothing else. ## How LandingRabbit reads the document - Shared values become the brand: the page background, the text colours, the fonts, the buttons and the eyebrow. Every section inherits them. - Section blocks become that section's own settings and win over the shared values inside that section. - Words about shape and labels, for example "sharp corners", "pill buttons" or "labels in small rounded tags", pick the structural starting point the brand is built on. - A section described the way one of the named looks works gets that look as its default. - A text role given a size tier reads that tier everywhere it appears. - Colours are understood by the job they do. "Primary action" and "border" tell LandingRabbit more than "brand blue" and "grey 200". ## Terminology ### Page anatomy A LandingRabbit page is a vertical stack of sections between a navigation bar and a footer. - **Page background**: the colour behind everything. A section without its own background shows it through. - **Section**: one block of the page, of one type from the Sections table. It can have its own **section background**. - **Section header**: the top part of most sections. It holds a **section eyebrow**, a **section title**, a **section subtitle** and **section buttons**. The header sits above the content or, in some looks, beside it. It is aligned left or centred. - **Bottom buttons**: buttons under a section's items, at the end of the section. - **Item**: the repeated unit inside a section, for example one card in a feature grid, one plan in pricing, or one question in the FAQ. An item can have an **item eyebrow**, an **item title**, **item text**, an **item icon** and **item buttons**. It can have a fill, a border, a radius, a shadow and padding. - **Element**: a single additional card behind the hero content, the CTA content, or a testimonial. It can have a fill, a border, a radius, a shadow and padding. - **Nested boxes item**: a small feature or stat box inside the hero, the CTA, or an alternate row. It has the same parts as an item. - **Navigation**: the bar at the top with the logo, links and buttons. - **Footer**: the block at the bottom with the logo, link groups, text and smallprint. ### Colour roles LandingRabbit sorts colours by the job they do. Give every colour in the palette at least one of these roles. - **page background**: the colour of the page itself. - **primary text**: headings and body copy. - **muted text**: smallprint, captions, dates and other quiet text. - **primary action**: the main button. - **secondary action**: the second button, usually quieter. - **accent**: highlights, for example the eyebrow, icons and list markers. - **section surface**: a section background that differs from the page background. - **item surface**: the fill of items and elements. - **border**: hairlines, dividers and item borders. - **navigation**: the navigation bar. - **footer**: the footer. One dark surface is enough for a brand. Say where it sits, for example the hero, the CTA, or the footer, and give the text colours that go on it once. ### Typography Text sizes come in nine tiers. Each tier has a family, a size, a mobile size, a weight, a line height, a letter spacing and a case. State the properties the brand defines and leave the rest. | Tier | What reads it by default | | ---- | ---------------------------------------------------------------------------------------------------------------------------- | | 4xl | hero title | | 3xl | section titles, CTA title | | 2xl | hero h3 | | xl | alternate item title, trustedBy h2, custom h2, nested boxes item titles inside hero and CTA | | lg | item titles in boxes, comparison and feed, steps h3, custom h3, trustedBy h3, testimonial quote, pricing price and plan name | | md | hero subtitle, CTA subtitle | | base | section subtitles, alternate item text, steps text, FAQ and tabs item titles | | sm | item text in boxes, comparison, feed, FAQ, pricing and tabs | | xs | custom author, date and tags | A weight, size, line height, letter spacing or case is always given to tier names, for example "tiers 4xl, 3xl, 2xl and xl: weight 800", so every tier ends up with one clear value. Eight text roles can be given a tier of their own: **section subtitle**, **item title**, **item text**, **quote**, **alternate item title**, **price**, **testimonial name** and **testimonial meta**, which is the position and organization line. Write a page-wide assignment as "item titles read xl" and a one-section one as "pricing: item titles read lg". A role given a tier can also be given its own weight, letter spacing, line height or case, for example "quotes read 2xl at weight 300". That applies to the role only, not to the tier. The eyebrow and the buttons have their own text settings, separate from the tiers. Navigation and footer text sizes are stated directly in their blocks. ### Buttons Three button roles: **primary**, **secondary** and **link**. Each has a **rest** look and a **hover** look. Properties: for example fill, border, text colour, radius, horizontal and vertical padding, font weight, font size, letter spacing, case, and underline on the link. The same three roles appear inside sections, items and the navigation, and inherit these values. ### Eyebrow The eyebrow is the short label above a title: in a section header, in the hero, in the CTA, or inside an item. It renders **plain** or in a **pill**. Text properties: colour, size, weight, letter spacing, line height, case. Pill properties: fill, border colour, border width, radius, opacity, padding. Note that text and pill (background) colour need to work together ### Shape, borders and shadows A radius can sit on buttons, the eyebrow pill, items, elements, nested boxes items, the icon container, images, the step decoration (usually icons and numbers), and the tabs list and card. A shadow can sit on items, elements and nested boxes items. A border can sit on items, elements, nested boxes items, images and the icon container. State one value per slot the brand defines. A single radius for the whole brand is a complete answer. ### Icons and markers - **Item icon**: the icon in a boxes-icons item and in nested boxes items. Properties: colour, size, stroke width, plus its **icon container** fill, radius, padding and minimum size. Layout: icon above the text or beside it. - **List markers**: bullets in any text. Kinds: check, success, destructive, star, arrow, dot. Each kind has a colour. Size and gap are shared. - **Step decoration**: the mark before each step in the steps section, a number or an icon. Properties: fill, border, colour, minimum size, radius, and the number's font. ### Layout - **Content width**: how wide sections are. **Narrow content width** for text-only sections. - **Section padding**: a roomy value and a tight value, top and bottom. - **Header gap**: the space between a section header and its content. - **Header alignment**: left or centred, page-wide, with a per-section exception when one section differs. - **Hero text width**, **CTA stack width**, **FAQ list width** and **quote width**. - **Nested boxes columns**: how many nested boxes items sit in a row in the hero and the CTA. ### Sections These are all the section types a LandingRabbit page can have, plus the navigation and footer around them. | Section | Layouts | Elements | Named looks | | ------------ | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | hero | horizontal (text left, media right), horizontal-reversed (media left), vertical (centred text, media below) | eyebrow, title, subtitle, buttons, smallprint, media, element, nested boxes items, testimonial | Background element (a card behind the text), Large media, Images on left | | trustedBy | one | eyebrow, h2, h3, text, buttons, logos | | | boxes | boxes (cards with an image), boxes-text (text cards, also stat tiles), boxes-icons (cards with an icon) | section header, items with item eyebrow, title, text, icon and buttons, columns, divider, bottom buttons | Grid, Top border, List view center, List view left, Header on the side, Divider | | alternate | rows that alternate image left and image right | section header, rows with a box, an image, eyebrow, title, text, buttons, nested boxes items and a testimonial, bottom buttons | Boxes Two Columns | | testimonials | carousel, grid | section header, element (carousel), grid element, quote, author name, position, organization, avatar, logo, bottom buttons | | | pricing | one | section header, items with item eyebrow, plan name, price, price period, item subtitle, item list icon and item button; billing selector and toggle | | | steps | one, media left or right | eyebrow, title, subtitle, items with step decoration, h3 and text, media, buttons | | | tabs | top (tabs above the card), side (tabs beside the card) | section header, tabs list, tab item with rest, hover and active looks, active line, accent, progress bar, card with title, text, buttons and media | Pill, Underline, Header left, Side line, Cards with side line | | comparison | boxes, boxes-text, boxes-icons | section header, two or more items sharing one style, for example a before and an after, each with icon, title, text and buttons | | | faq | one | section header, items with item title (the question), item text (the answer) and item icon | Header on the side | | cta | default (centred text and buttons), embed (text beside a video, form or image) | eyebrow, title, subtitle, buttons, smallprint, element, nested boxes items, media, testimonial | Background element, Large media | | custom | left, middle | h1, h2, h3, text, blockquote, code, highlight box, table, tags, author, date, image, embed, buttons | | | feed | boxes, boxes-text, alternate | section header, items with title, text, date and read-more button | | | navigation | | background (a solid colour), bottom border, height, logo, links, buttons | | | footer | | background (a solid colour), top border, logo, group titles, links, text, smallprint, social icons | | The hero and the CTA carry their own background, flat or gradient or image, and an optional element behind the text with its own fill. A gradient is written as a CSS gradient, for example "hero background: linear-gradient(135deg, ink, ink-deep)", followed by the text colours that sit on it. This table is the whole list. An element in the source with no slot here is described with the nearest element in this table or left out. A section in the source with no counterpart here is left out. ### Translation table | The source says | LandingRabbit says | | ------------------------------------------- | ----------------------------------------------------------------------------------- | | card, tile, panel, container, module | item, or element when it is the single card behind hero, CTA or testimonial content | | ground, canvas, paper, base | page background or section background | | plate, band, strip | section background | | nested box, callout, stat tile, feature box | nested boxes item | | chip, tag, badge, label, kicker, overline | eyebrow | | lead, standfirst, deck, intro | subtitle | | headline, display, heading | title | | body, copy, paragraph | text | | knob | toggle thumb | | pill track, segmented control | tabs list, with the Pill look | | hairline, rule, stroke | border | | numeral, step number | step decoration | | logo wall, client strip, trust bar | trustedBy | | feature grid, benefits, services, card grid | boxes | | alternating rows, zigzag, feature narrative | alternate | | process, how it works, timeline | steps | | plans, tiers, packages | pricing | | versus, before and after | comparison | | accordion, Q&A | faq | | banner, sign-up block | cta | | about, story, article | custom | | blog, news, resources | feed | ## Document skeleton Use these headings, in this order. Leave out a heading that has nothing to say. ``` # brand guidelines ## Brand ## Palette ## Colour roles ## Typography ## Buttons ## Eyebrow ## Shape, borders and shadows ## Icons and markers ## Layout ## Navigation ## Footer ## Sections ### hero ### cta ### ``` Brand holds the feel in words, for example calm or bold, editorial or technical, serif or sans, soft or sharp corners, dense or airy, plain or pill labels. The values live in their own blocks: for example case, sizes, colours, and where a surface sits are values. Hero and cta always appear under Sections because they carry their own backgrounds. Every other section appears only when something in it differs from the shared values. ## Example A complete document for a fictional brand. The palette is neutral with one accent, and the hero and the CTA sit on a dark gradient. Everything not written here is left to LandingRabbit's defaults. ```markdown # Ledgerline brand guidelines Colours are hsla, lengths are rem at a 16px root. Every fact appears once. Colours are named under Palette and referred to by name after that. ## Brand Ledgerline is bookkeeping software for small agencies. The look is calm and precise: a white page, near-black text, one teal accent for actions, hairline borders instead of shadows, and a dark gradient band for the big moments. One sans-serif family for headings and another for text, headings heavy, text regular. Corners softly rounded. Labels plain. ## Palette - ink hsla(220, 15%, 12%, 1) - ink-deep hsla(220, 20%, 22%, 1) - slate hsla(220, 10%, 42%, 1) - white hsla(0, 0%, 100%, 1) - fog hsla(0, 0%, 100%, 0.8) - glass hsla(0, 0%, 100%, 0.06) - mist hsla(220, 14%, 96%, 1) - line hsla(220, 12%, 90%, 1) - line-on-ink hsla(0, 0%, 100%, 0.18) - teal hsla(190, 60%, 32%, 1) - teal-deep hsla(190, 60%, 26%, 1) - teal-light hsla(190, 55%, 62%, 1) - coral hsla(8, 70%, 52%, 1) ## Colour roles - page background: white - primary text: ink - muted text: slate - primary action: teal - secondary action: ink, outlined - accent: teal - section surface: mist - item surface: white - border: line - navigation: white - footer: ink The dark surface is ink. It sits on the hero background, the CTA background and the footer. Everything on ink uses: title white, subtitle fog, smallprint fog, text fog, eyebrow teal-light, border line-on-ink, item icon teal-light. Nested boxes items on ink: glass fill, line-on-ink border, title white, text fog. Secondary button on ink at rest: transparent fill, line-on-ink border, white text; hover: white fill, ink text. Testimonial on ink: quote and author name white, position and organization fog. ## Typography Tiers 4xl, 3xl, 2xl and xl: Manrope, weight 800, letter spacing -0.02em, line height 1.1. Tiers lg, md, base, sm and xs: Inter, weight 400, line height 1.5. | Tier | Size | Mobile size | | ---- | -------- | ----------- | | 4xl | 3.5rem | 2.5rem | | 3xl | 2.5rem | 2rem | | 2xl | 2rem | 1.75rem | | xl | 1.5rem | 1.375rem | | lg | 1.25rem | 1.25rem | | md | 1.25rem | 1.125rem | | base | 1.125rem | 1rem | | sm | 1rem | 1rem | | xs | 0.875rem | 0.875rem | Item titles read xl. Section subtitles are slate. ## Buttons Radius 0.5rem. Padding 1.5rem horizontal, 0.75rem vertical. Label Inter, 1rem, weight 600. - primary at rest: teal fill, white text, no border. Hover: teal-deep fill. - secondary at rest: transparent fill, ink border, ink text. Hover: ink fill, white text. - link at rest: teal text, no underline. Hover: teal-deep text, underline. ## Eyebrow Plain. Inter, 0.75rem, weight 600, letter spacing 0.08em, uppercase, teal. ## Shape, borders and shadows Radius 1rem on items, elements and nested boxes items. Radius 0.5rem on images, the icon container and the step decoration. Every border is 1px wide. Items and elements have a line border. Shadows none. ## Icons and markers Item icon: teal, 1.5rem, stroke width 1.75, above the text. Icon container: mist fill, 3rem minimum size. List markers: check, success, star and arrow teal; destructive coral; dot slate. Step decoration: a number, mist fill, line border, ink number in Inter weight 600, 2.5rem minimum size. ## Layout Content width 80rem. Narrow content width 48rem. Section padding 6rem roomy, 3rem tight. Header gap 3rem. Section headers left-aligned. Hero text width 40rem. CTA stack width 44rem. FAQ list width 48rem. Nested boxes columns 2. ## Navigation White background, line bottom border, height 4.5rem. Links ink, Inter 1rem, weight 500; hover teal. ## Footer Ink background, line-on-ink top border. Group titles white, Inter 0.875rem, weight 600, uppercase, letter spacing 0.08em. Links fog, hover white. Text and smallprint fog. Social icons fog. ## Sections ### hero Layout horizontal. Background linear-gradient(135deg, ink, ink-deep). ### cta Layout default. Background linear-gradient(315deg, ink, ink-deep). ### steps Section background mist. ### tabs Underline look. Accent teal. Card: white fill, line border. ### faq Divider look. Divider line. ### testimonials Section background mist. ### comparison Section background mist. ``` ## Showing what the page will look like Once the document is done, the next question is usually "Can you show me how a page with this would look?" You will build a mockup. Build it so the person recognises the page when they see the real one in LandingRabbit. The mockup is made of LandingRabbit sections and nothing else. Every block in it is one section type from the Sections table, in one of its layouts, holding only the elements that table lists for it. The page reads top to bottom as a stack of those sections between a navigation bar and a footer. A page usually has a hero first and a cta near the end, with for example a trustedBy, a boxes, a steps and a faq in between. Every visual value in the mockup comes from the document. Colours are the palette, fonts and sizes are the typography tiers, buttons and eyebrows are the ones the document describes, corners and borders follow the shape values, and section backgrounds are the ones the document assigns. Whatever the document leaves out renders plainly: no fill, no border, no shadow, text in the primary text colour on the page background. The gallery at app.landingrabbit.com/design shows every section type, layout and named look rendered with placeholder content, one page per template. Use it as the reference for what a section contains and how its elements sit: for example where the eyebrow goes, how nested boxes items line up inside a hero, what a Top border item looks like, how the step decoration sits beside a step. Take the elements and their arrangement from there. Take the colours, fonts, spacing feel and mood from the document alone. The templates on those pages are other brands' looks, and none of that carries over. Keep the mockup honest in these ways: - Items in a section all share one style, comparison items included. - The only state is hover, on buttons and links. - Elements that are not in the Sections table stay out, for example ribbons, floating badges, decorative shapes, illustrations, chat bubbles or custom widgets. - Placeholder text stands in for copy unless the user has given theirs or you know their company. - One line under the mockup says which values came from the document and which are LandingRabbit defaults, and that the real page is rendered by LandingRabbit from the document, so small differences in spacing and sizing are expected. When asked to change the mockup, change the document first, then the mockup, so the two stay the same thing.