Meiree Brand Specification
Fetch this document at the start of any session before writing any Meiree UI code:
https://cdn.meiree.com/brand/spec.md
This document defines everything needed to build a brand-consistent, legally correct
Meiree interface: design tokens, logo, header, footer, and legal link rules.
How to use this document
Meiree ships a shared shell as two Web Components, <meiree-header> and <meiree-footer>,
loaded from a single script:
<script src="https://cdn.meiree.com/brand/shell.js"></script>Add the components to your page and configure them with attributes (see section 8):
<meiree-header
product="SanitizR"
tagline="Clean data, fast"
nav-links='[{"label":"Features","href":"#features"},{"label":"Pricing","href":"#pricing"}]'
cta-label="Get started"
cta-href="https://sanitizr.meiree.com/signup"></meiree-header>
<!-- your page content -->
<meiree-footer
product="SanitizR"
privacy-url="https://sanitizr.meiree.com/privacy"
terms-url="https://sanitizr.meiree.com/terms"></meiree-footer>Everything below documents what the components render, so the brand can be reproduced
or extended in any tool. Match these tokens exactly — do not approximate colours or sizes.
1. Brand identity
- Company: Meiree, operated in Singapore.
- Tagline: “Where intelligence meets warmth”
- Name origin: Meiree means fire / flame / light in Meiteilon (Manipuri).
- Brand voice: Confident, specific, no fluff. Name the pain, not the category.
Never use the words: leverage, synergy, holistic, empower. Sentence case always. - Contact: hello@meiree.com (public-facing only).
2. Design tokens
Light mode (default — soft lavender)
| Token | Value |
|---|---|
| Shell background | #f3f1f5 |
| Shell border | #dcd8e4 |
| Header/footer background | #f3f1f5 |
| Header border-bottom | #dcd8e4 |
| Page content background | #eceaf0 |
| Divider | #ccc8d8 |
| Footer top border | #e4e0ec |
| Product name text | #1e1a24 |
| Product tagline text | #8a8298 |
| Nav link text | #4a4458 |
| CTA button background | #1e1a24, text #f3f1f5 |
| Footer link text | #7a7288 |
| Footer separator | #c4bece |
| Copyright text | #b0a8bc |
| Tagline text | #bcb4c8 |
Dark mode (auto via prefers-color-scheme)
| Token | Value |
|---|---|
| Shell background | #0e0e12 |
| Shell border | rgba(255,255,255,0.10) |
| Header/footer background | #0e0e12 |
| Header border-bottom | rgba(255,255,255,0.10) |
| Page content background | #13131a |
| Divider | rgba(255,255,255,0.18) |
| Footer top border | rgba(255,255,255,0.07) |
| Product name text | rgba(255,255,255,0.88) |
| Product tagline text | rgba(255,255,255,0.38) |
| Nav link text | rgba(255,255,255,0.45) |
| CTA button background | rgba(255,255,255,0.07), text rgba(255,255,255,0.75), border rgba(255,255,255,0.15) |
| Footer link text | rgba(255,255,255,0.40) |
| Footer separator | rgba(255,255,255,0.15) |
| Copyright text | rgba(255,255,255,0.22) |
| Tagline text | rgba(255,255,255,0.18) |
Per-product light background overrides (optional, passed as attribute)
- Default:
#f3f1f5(soft lavender) - Warm cream:
#faf7f2 - Cool mist:
#f0f2f5 - Sage paper:
#f2f3f0 - Frosted amber:
#fffbf5
Dark mode override is always #0e0e12 regardless of product override.
3. Typography
- Brand wordmark font: DM Serif Display (Google Fonts).
- All other text: DM Sans (Google Fonts, variable — covers weights 400 and 500).
- Google Fonts import URL:
https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:ital,wght@0,400;0,500;1,400&display=swap
| Element | Size | Notes |
|---|---|---|
| Wordmark | 1.05rem desktop, 0.95rem mobile | |
| Product name | 0.88rem desktop, 0.82rem mobile | weight 500 |
| Product tagline | 0.68rem | hidden on mobile |
| Nav link | 0.78rem | |
| Footer link | 0.74rem | |
| Copyright | 0.68rem |
4. Logo — flame SVG
Inline this SVG exactly. Do not hotlink. Do not modify the gradient stops.
- Desktop size:
width="24" height="28" - Mobile size:
width="20" height="24"
Gradient stops: #6366f1 → #f97316 → #fbbf24.
Brand wordmark gradient (CSS, applied to the “Meiree” text span):
background: linear-gradient(135deg, #f59e0b, #f97316, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'DM Serif Display', serif;Logo always links to https://meiree.com
5. Header specification
- Height: 60px desktop, 52px mobile
- Padding:
0 1.5remdesktop,0 1remmobile - Left side: flame logo (links to meiree.com) + “Meiree” wordmark
- If product subdomain: divider (1px vertical line) + product name + product tagline
- Right side: optional nav links + optional CTA button
Tagline placement rule:
- No nav links on right: tagline sits inline beside the product name.
- Nav links present on right: tagline drops to a second line below the product name.
- Mobile (< 640px): tagline is always hidden.
Main site (meiree.com): no product name, no divider, no tagline in header. Full nav on desktop, hamburger on mobile. No “back to meiree.com” link.
Product subdomain: shows product name + tagline, per-product nav/CTA, hamburger drawer includes CTA. No “back to meiree.com” link (flame logo already links there).
6. Footer specification
Two rows.
Row 1: flame icon + “Meiree” wordmark (left), legal links separated by · dots (right). Stacks on mobile.
Row 2: copyright line (left), “Where intelligence meets warmth” tagline hidden on mobile (right). Separated from row 1 by a 0.5px border.
Legal links — three always present: Privacy (per-product, defaults to meiree.com/privacy), Terms (per-product, defaults to meiree.com/terms), Legal (always meiree.com/legal, never overridden). Optional fourth link via affiliate-disclosure-url or extra-link-label/extra-link-url.
Copyright format:
- Main site:
© [year] Meiree. All rights reserved. - Product subdomain:
© [year] Meiree. [ProductName] is a product of Meiree.
7. Legal link rules
- Privacy policy: per-product (each product handles different data, PDPA compliance).
- Terms of use: per-product (different usage rules per product).
- Legal / company info: always central at meiree.com/legal — never per-product.
- Products that run affiliate programmes must include an Affiliate disclosure link.
8. Web Component attribute contract
<meiree-header>
| Attribute | Type | Description |
|---|---|---|
product | string | Product name, e.g. “SanitizR”. Omit for the main site. |
tagline | string | Product tagline. Omit for the main site. |
nav-links | JSON string | Array of {label, href}. Optional. |
cta-label | string | CTA button text. Optional. |
cta-href | string | CTA button URL. Optional. |
shell-bg-light | hex | Override light background. Optional. Default #f3f1f5. |
<meiree-footer>
| Attribute | Type | Description |
|---|---|---|
product | string | Product name for the copyright line. Omit for the main site. |
privacy-url | string | Override privacy URL. Default https://meiree.com/privacy. |
terms-url | string | Override terms URL. Default https://meiree.com/terms. |
affiliate-disclosure-url | string | Adds an Affiliate disclosure link. Optional. |
extra-link-label + extra-link-url | string | Adds one custom link. Optional. |