# Mel·lif·lu·ous — Design Guidelines
Version 1.1 · Theme 2.0.0
Human page: https://mel-lif-lu-ous.com/design-guidelines/
CSS: https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/tokens.css

## Foundation
Purpose: To turn what I hear, remember and encounter into music, and make a place for other people inside it.
Vision: A practice that stays open: to unfamiliar places, new collaborators and different ways of bringing sound to life.
Mission: I compose and perform with violin, voice, live loops and field recordings, developing work through residencies, recordings and interactive sound installations.
Voice & mood: Intimate, Curious, Poetic, Textural, Playful
The approved homepage hero is the visual foundation. Preserve its wording, imagery, motion and linked photographs.
The site introduces Lara’s violin, voice, live looping, composition and residencies, with a clear invitation to follow on Instagram.

## Audience
Listeners and followers: People discovering the music, returning to new work, or following Lara’s practice over time.
Presenters and residency hosts: Curators, venues and hosts looking for a clear sense of the work, its context and how Lara collaborates.
Creative collaborators: Musicians, artists, filmmakers and place-based practitioners exploring a possible shared project.

## Logo
Three horizontal wordmarks, then three circle marks. One 1px card outline contains preview and caption; plain underlined format links. Supplied artwork only.
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-green.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-green.png
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-light.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-light.png
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-dark.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-horizontal-dark.png
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-green.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-green.png
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-light.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-light.png
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-dark.svg
https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/mel-logo-circle-dark.png

## Photography
Real photographs of Lara’s practice, people and places. Preserve natural colour. No stock or generated imagery. Photographs link to the source stories.
Optional supplied raster textures are supporting resources, not the main visual direction. Previews: assets-Patterns/thumbs/

## Icons
Phosphor Light utility icons; retain descriptive filenames and licence. Library: https://mel-lif-lu-ous.com/icon-library/

## Colour
Dark homepage surfaces support the photography. Light surfaces support reading. Pale mint marks actions, with dark green text.

## Type
Display | .hero__h1 | 112px above 760px; 56px at 760px and below. Homepage only; intentionally fixed at each breakpoint.
Title | .mel-title | --type-h1
H1 | .display-h2; .mel-section-title | --type-h2
H2 | .mel-heading | --type-h3
H3 | .mel-small-heading | --type-h4
Lead | .mel-lead | --type-lead
Body LG | .hero__lead | --type-body-lg
Body MD | .body-copy | --type-body
Body SM | .mel-meta | --type-small
Eyebrow | .eyebrow | --type-micro
Menu | .nav__drawer-link | --type-small · mobile drawer, uppercase via CSS
Button | .btn | The actual button component; source: site.css.
Newsreader: expressive headings. Inter: body and interface. Lead is distinct from Body LG. Desktop header uses icon links; the mobile drawer uses .nav__drawer-link.
Use sentence case; Design Guidelines is the shared document title. Apply eyebrow and mobile-menu capitals through CSS.

## Layout
Hierarchy: Keep the hero as the single Display statement. Title is for page covers. H1 is the 32–40px section role, shared by .display-h2, .mel-section-title and the chapter titles inside it. H2 is the 24px .mel-heading role used for the personal introduction, The Art of Becoming, and album/journal card titles. H3 is the 20px supporting heading. Visual names are distinct from semantic HTML: homepage sections remain h2 and their cards remain h3.
Spacing: Use --space-section for stories and content sections, --space-section-compact for the performance and closing invitation, and --space-section-content between an introduction and its grid. Keep heading-to-copy spacing closer than section-to-section spacing.
Reading: Keep prose left aligned and within 54ch. Center only the closing invitation. Balance headings naturally; preserve deliberate line breaks in the opening statement.
Listening: One Bandcamp player serves all three albums: choosing an album swaps the player rather than stacking three embeds. Keep the album picker, the player, and the Story & credits / Open in Bandcamp links together as one unit.
Flow: Hero, personal introduction, the three project chapters (Wildroot & Amber, Spákonufell, Talking to the Trees), performance video, selected listening, The Art of Becoming and process notes, then keep in touch. Each is a distinct section; keep the album clearly identified as a working title.
Surfaces: Follow the --qp-home-* sequence from darkest to lightest. Use light heading and body tokens, mint eyebrows and underlined light links. Keep the gradient on the homepage; guideline specimens and reading pages retain their own surfaces.
Generous editorial spacing; distinct residency stories; compact selected listening. Flat surfaces. No decorative grey separators.
Keep the section-navigation rule, desktop Foundation dividers, 1px complete logo-card outlines, functional borders and keyboard focus.
Keep greys in one row with local scrolling on small screens. Typography samples left, metadata right; stack on mobile.

## Interface
Use clear text labels for navigation and media choices. Keep keyboard focus visible. One shared player updates when a visitor chooses an album or video. Remove non-essential movement when reduced motion is requested.

## Buttons
Pale mint primary button with dark green text; underlined reading/listening/download links. Check contrast against each actual surface.

## CSS tokens
{
    "--qp-canvas": "#0f0e0e",
    "--qp-canvas-soft": "#fafafa",
    "--qp-surface-card": "#1a1817",
    "--qp-surface-strong": "#f0efed",
    "--qp-surface-dark": "#0c0a09",
    "--qp-home-intro": "#181615",
    "--qp-home-residencies": "#242221",
    "--qp-home-japan": "#282625",
    "--qp-home-iceland": "#2c2a29",
    "--qp-home-trees": "#2e2c2b",
    "--qp-home-making": "#302e2d",
    "--qp-home-listening": "#3c3a39",
    "--qp-home-journal": "#484645",
    "--qp-home-follow": "#545251",
    "--qp-home-footer": "#605e5d",
    "--space-section": "clamp(4rem, 2.5rem + 5vw, 7rem)",
    "--space-section-compact": "clamp(3rem, 2rem + 3.333vw, 5rem)",
    "--space-section-content": "clamp(2rem, 1.5rem + 1.667vw, 3rem)",
    "--qp-ink": "#f5f4f2",
    "--qp-ink-deep": "#292524",
    "--qp-body": "#4e4e4e",
    "--qp-muted": "#a8a29e",
    "--qp-muted-soft": "#57534e",
    "--qp-hairline": "rgba(255, 255, 255, 0.1)",
    "--qp-hairline-strong": "var(--qp-grey-4)",
    "--qp-primary-1": "#38524b",
    "--qp-primary-2": "#50756b",
    "--qp-primary-3": "#859e97",
    "--qp-primary-4": "#b9c8c4",
    "--qp-primary-5": "#eef1f0",
    "--qp-cta": "#c6efe3",
    "--qp-cta-dark": "#1e6b57",
    "--qp-cta-light": "#e8f8f2",
    "--qp-brand": "var(--qp-primary-1)",
    "--qp-brand-light": "var(--qp-primary-3)",
    "--qp-brand-dark": "#2a3f3a",
    "--qp-mint": "#b4e5c3",
    "--qp-cyan": "#00c8e6",
    "--qp-sand": "#deb887",
    "--qp-error": "#dc2626",
    "--qp-info": "#2563eb",
    "--qp-grey-1": "var(--qp-muted)",
    "--qp-grey-2": "var(--qp-muted-soft)",
    "--qp-grey-3": "var(--qp-hairline)",
    "--qp-grey-4": "#d4d4d4",
    "--qp-grey-5": "#e3e3e3",
    "--qp-mist": "var(--qp-canvas)",
    "--qp-white": "var(--qp-surface-card)",
    "--qp-white-solid": "#ffffff",
    "--qp-forest": "var(--qp-brand)",
    "--qp-forest-lt": "var(--qp-brand-light)",
    "--qp-forest-dk": "var(--qp-brand-dark)",
    "--qp-icon-surface": "#1a1a18",
    "--qp-toc-bg": "rgba(237, 237, 237, 0.92)",
    "--qp-toc-bg-dark": "rgba(13, 20, 16, 0.88)",
    "--qp-dark-toggle-bg": "#1e2e22",
    "--qp-border-on-dark": "rgba(255, 255, 255, 0.18)",
    "--scrim-hero-strong": "rgba(49, 49, 49, 0.96)",
    "--scrim-hero-mid": "rgba(49, 49, 49, 0.60)",
    "--scrim-hero-soft": "rgba(49, 49, 49, 0.25)",
    "--qp-on-dark-soft": "rgba(245, 245, 245, 0.72)",
    "--qp-on-dark-muted": "rgba(245, 245, 245, 0.6)",
    "--qp-on-dark-subtle": "rgba(245, 245, 245, 0.4)",
    "--qp-border-on-dark-soft": "rgba(245, 245, 245, 0.08)",
    "--qp-border-on-dark-strong": "rgba(245, 245, 245, 0.28)",
    "--qp-bg-raised-on-dark-soft": "rgba(255, 255, 255, 0.06)",
    "--qp-bg-raised-on-dark": "rgba(255, 255, 255, 0.10)",
    "--qp-bg-raised-on-dark-hover": "rgba(255, 255, 255, 0.18)",
    "--qp-bg-scrim": "rgba(237, 237, 237, 0.93)",
    "--qp-bg-scrim-solid": "rgba(237, 237, 237, 0.97)",
    "--qp-bg-hover-tint": "rgba(49, 49, 49, 0.04)",
    "--qp-annotate-fg": "var(--qp-brand)",
    "--qp-annotate-bg": "rgba(56, 82, 75, 0.1)",
    "--qp-annotate-border": "rgba(56, 82, 75, 0.28)",
    "--qp-focus-ring": "rgba(49, 49, 49, 0.18)",
    "--qp-focus-ring-soft": "rgba(49, 49, 49, 0.14)",
    "--font-display": "\"Newsreader\", Georgia, \"Times New Roman\", serif",
    "--font-sans": "\"Inter\", system-ui, -apple-system, \"Segoe UI\", Helvetica, Arial, sans-serif",
    "--fw-light": "300",
    "--fw-regular": "400",
    "--fw-medium": "500",
    "--fw-semibold": "600",
    "--fw-bold": "700",
    "--type-display": "clamp(2.75rem, 1.625rem + 3.75vw,  5rem)",
    "--type-h1": "clamp(2.6rem,  1.5rem   + 3.667vw, 4.8rem)",
    "--type-h2": "clamp(2rem,    1.75rem  + 0.833vw, 2.5rem)",
    "--type-h3": "1.5rem",
    "--type-h4": "1.25rem",
    "--type-body-lg": "1.125rem",
    "--type-body": "1rem",
    "--type-small": "0.875rem",
    "--type-micro": "0.75rem",
    "--type-lead": "1.5rem",
    "--type-italic": "2.25rem",
    "--type-display-lh": "1.05",
    "--type-display-ls": "-0.03em",
    "--type-h1-lh": "1.06",
    "--type-h2-lh": "1.15",
    "--type-h3-lh": "1.3",
    "--type-h4-lh": "1.4",
    "--type-body-lg-lh": "1.6",
    "--type-body-lh": "1.65",
    "--type-small-lh": "1.55",
    "--type-micro-lh": "1.45",
    "--type-lead-lh": "1.5",
    "--ls-tight-lg": "-0.04em",
    "--ls-tight-md": "-0.03em",
    "--ls-tight-sm": "-0.025em",
    "--ls-tight-xs": "-0.02em",
    "--ls-wide-xs": "0.02em",
    "--ls-wide-sm": "0.08em",
    "--ls-wide-md": "0.1em",
    "--ls-wide-lg": "0.12em",
    "--ls-wide-xl": "0.14em",
    "--ls-code-xs": "0.2px",
    "--ls-code-sm": "0.3px",
    "--ls-code-md": "0.5px",
    "--ls-code-lg": "0.6px",
    "--ls-code-xl": "0.8px",
    "--ls-code-2xl": "1.2px",
    "--sp-1": "4px",
    "--sp-0_5": "2px",
    "--sp-0_25": "1px",
    "--sp-2": "8px",
    "--sp-3": "12px",
    "--sp-4": "16px",
    "--sp-5": "24px",
    "--sp-6": "32px",
    "--sp-7": "40px",
    "--sp-8": "48px",
    "--sp-9": "64px",
    "--sp-10": "80px",
    "--sp-11": "96px",
    "--sp-12": "128px",
    "--sp-13": "160px",
    "--sp-14": "200px",
    "--sp-15": "220px",
    "--sp-16": "240px",
    "--sp-1_5": "6px",
    "--sp-2_5": "10px",
    "--sp-3_5": "14px",
    "--sp-4_5": "18px",
    "--sp-5_5": "22px",
    "--sp-6_5": "28px",
    "--sp-7_5": "56px",
    "--sp-8_5": "72px",
    "--sp-9_5": "88px",
    "--sp-neg-2_5": "-10px",
    "--sz-wrap-max": "1280px",
    "--sz-content-max": "640px",
    "--sz-icon": "40px",
    "--sz-icon-lg": "56px",
    "--sz-swatch-chip-h": "140px",
    "--sz-spec-col": "200px",
    "--sz-hero-h": "240px",
    "--sz-family-min": "160px",
    "--sz-card-min": "180px",
    "--sz-card-shell-min": "176px",
    "--sz-elev-card-min": "220px",
    "--sz-elev-shell-min": "120px",
    "--sz-radii-box": "96px",
    "--sz-pill-demo-w": "180px",
    "--sz-circle-demo": "84px",
    "--sz-pattern-demo-min": "340px",
    "--sz-spacebar-h": "56px",
    "--sz-space-bar-h": "var(--sz-spacebar-h)",
    "--sz-toggle-w": "38px",
    "--sz-toggle-h": "22px",
    "--sz-toggle-knob": "16px",
    "--sz-toggle-knob-left": "19px",
    "--sz-slider-thumb": "18px",
    "--sz-nav-btn-h": "34px",
    "--sz-form-btn-h": "40px",
    "--sz-textarea-min": "100px",
    "--sz-slider-track-h": "6px",
    "--radius-none": "0",
    "--radius-2xs": "3px",
    "--radius-xs": "4px",
    "--radius-s": "6px",
    "--radius-sm": "8px",
    "--radius-m": "10px",
    "--radius-md": "12px",
    "--radius-card": "14px",
    "--radius-lg": "16px",
    "--radius-feature": "20px",
    "--radius-shell": "22px",
    "--radius-xl": "24px",
    "--radius-pill": "999px",
    "--radius-circle": "50%",
    "--shadow-lift": "rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.15) 0 15px 35px -5px",
    "--shadow-deep": "rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.25) 0 15px 35px -5px",
    "--shadow-xs": "0 1px 2px rgba(23, 23, 23, 0.08)",
    "--shadow-inset-hairline": "inset 0 -1px 0 rgba(12, 10, 9, 0.08)",
    "--shadow-sm": "0 1px 3px rgba(12, 10, 9, 0.15)",
    "--shadow-float": "0 8px 24px rgba(23, 23, 23, 0.12), 0 1px 2px rgba(23, 23, 23, 0.08)",
    "--gradient-shell": "linear-gradient(135deg, rgba(41, 37, 36, 0.3) 0%, rgba(12, 10, 9, 0.12) 50%, rgba(41, 37, 36, 0.2) 100%)",
    "--ease-std": "ease",
    "--dur-fast": "140ms",
    "--dur-std": "220ms",
    "--dur-slow": "400ms"
}