Brandemic · New Design System

foundations

One family. Three weights.

Manrope is the only type family in this design. Use regular 400 for body copy, medium 500 for headings and labels, and bold 700 for emphasis. The native font/primary variable binds to Manrope. Font files use swap.

colors

Brand colours. Image-led project palettes.

Native variables live in Brandemic New Design — Manrope. Purple and green are brand accents; ink and surface form the dark canvas. Project carousel accents are generated from each CMS thumbnail automatically.

typography

Type scale.

text-size-large-new-design — Strategists, designers, writers and developers.

text-size-regular-new-design — Strategists, designers, writers and developers.

text-size-small-new-design — Strategists, designers, writers and developers.

layout

Client-First structure.

page-wrapper → main-wrapper → section component → padding-global → container-large → section content. Existing site utility names are preserved; new-design suffixes isolate this new design. Each component owns an underscore namespace: home-hero_, home-projects_, home-team_, home-testimonials_, home-blog_, new-navbar_ and new-footer_. Use is-* combo classes for states.

buttons

Buttons and interaction states.

Hover brightens the filled CTA and changes text links to green. Keyboard focus uses a 2px green outline with a 5px offset. Disabled carousel controls expose aria-disabled. The menu exposes aria-expanded, closes with Escape, and keeps keyboard focus within the open mobile panel.

components

Reusable native components.

cms

Adding content without editing code.

For a new project, add its thumbnail, name, summary and portfolio URL in Portfolios, enable Featured, and set its Order. The new carousel reads the rendered CMS cards, samples the image, and creates its selectors automatically. Team members and blog posts use their existing collections. Testimonials remain static in their reusable component.

The colour sampler uses a small anonymous canvas read from the CMS image. Dominant visible colours generate the accent and darker surface. It ignores near-white, near-black and transparent pixels. If an image cannot be read because of loading or cross-origin restrictions, it keeps a neutral palette and marks the card’s data-palette-status. No CMS API keys run in the browser.

motion

Motion and responsive behaviour.

The source interactions are reused for native project, team, awards, testimonial and blog carousels, hero video, services folders, toolkit, FAQ and dialogs. The hero uses the existing Brandemic showreel video. Reduced-motion preferences stop continuous animation, simplify transitions and use the static hero poster.

Review mobile 390px, tablet 768px, landscape tablet 1024px, desktop 1440px and large desktop 1920px. Native breakpoint styles cover layout; the documented advanced component handles precise source media queries and SVG motion.

code

Where the scripts live.

New Homepage → Page Settings → Before </body>: Brandemic New Design — CMS image palette, native carousels, menu and section interactions. Page Settings → Head: legacy initializer isolation, registered Manrope faces and CMS layout adapters. The original site-wide scripts remain installed.

New Style Guide uses the shared navigation/footer controller only. Advanced CSS is in New Design / Advanced Styles, split into six labelled embeds. The sixth holds CMS integration and visual QA adjustments. Source reference: brandemic-home-page main commit 2f04674f4dc4261e4617dbffb286a7566d832732. Cleanup removed superseded declarations and verified zero computed-style differences across five widths.