---
title: "Mews design system"
variant: extended
source: https://www.mews.com/en
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/mews-com-en)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Mews · Design System

> Hospitality software, presented in bold black and bright pink

**Theme:** light · **Industry:** saas · **Source:** https://www.mews.com/en · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Mews pairs oversized black-and-white typography with lively hospitality imagery and small, vivid accent colors. Alternating white and black sections keep a long SaaS homepage legible while product cards and proof points make the software tangible.

## North star

Use assertive black-and-white typography and spacious, modular layouts, reserving vivid accents for actions and product storytelling.

## Overview

The page uses a mostly white canvas, interrupted by large black product and testimonial sections that create a clear rhythm. Black carries the main headings, body text, inverse panels, and much of the navigation; bright pink identifies announcement and demo actions, with occasional lime and pale blue surfaces adding contrast to product and results modules. Söhne’s compact, clean sans-serif character supports both oversized, tightly tracked headlines and readable explanatory copy. The hero is a two-column composition: a black text panel beside warm, human hospitality footage with floating interface examples. Below it, restrained customer logos and pale card tiles give way to denser product showcases. Layouts stay aligned to a centered content area, but vary between grids, wide splits, and single-column statements. Thin gray rules separate content without introducing heavy shadows; rounded pills make CTAs and labels distinct.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | brand | Primary text, navigation, hero panel, inverse product sections, footer, and key CTA surfaces. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light-section background, and text on black inverse panels. |
| Soft Charcoal | `#333231` | `--color-soft-charcoal` | neutral | Muted supporting copy, especially in the footer and secondary text. |
| Quiet Gray | `#cccccc` | `--color-quiet-gray` | neutral | Minor low-contrast interface details and subtle dividers; not a defining brand color. |
| Rule Gray | `#e5e5e5` | `--color-rule-gray` | semantic | Fine borders and hairlines around cards, navigation, and section boundaries. |
| Candy Pink | `#ffc5ee` | `--color-candy-pink` | accent | Announcement strip, primary demo buttons, and occasional highlighted product surfaces. |
| Cloud Lilac | `#f4f5f9` | `--color-cloud-lilac` | surface | Pale category tiles and compact year badges against the white canvas. |
| Electric Lime | `#e8ff5b` | `--color-electric-lime` | accent | Bright product and hospitality-results media panels; use as a vivid supporting accent. |
| Warm Stone | `#8c8a87` | `--color-warm-stone` | neutral | Muted category pills and secondary interface details, not the main page palette. |
| Ice Blue | `#d2f4ff` | `--color-ice-blue` | surface | Occasional pale blue product card or data panel. |
| Night Charcoal | `#161616` | `--color-night-charcoal` | neutral | Deep secondary dark surface within inverse modules and footer details. |
| Footer Coal | `#1a1a1a` | `--color-footer-coal` | neutral | Subtle dark footer elements that sit close to the primary black. |
| Muted Silver | `#999999` | `--color-muted-silver` | neutral | Low-emphasis footer text and secondary information. |
| Hot Pink | `#ff83da` | `--color-hot-pink` | accent | Secondary pink accent in navigation, cards, and footer details; use sparingly. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#ffc5ee` (Candy Pink) · `--color-surface-3` → `#f4f5f9` (Cloud Lilac) · `--color-surface-4` → `#d2f4ff` (Ice Blue) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#333231` (Soft Charcoal) · `--color-border` → `#e5e5e5` (Rule Gray) · `--color-accent` → `#ffc5ee` (Candy Pink) · `--color-accent-2` → `#ff83da` (Hot Pink) · `--color-on-accent` → `#000000` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#ffc5ee` | 14.47:1 | AAA |
| `#000000` | `#f4f5f9` | 19.28:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#ffc5ee` | 1.45:1 | fail |
| `#ffffff` | `#f4f5f9` | 1.09:1 | fail |
| `#333231` | `#ffffff` | 12.79:1 | AAA |
| `#333231` | `#000000` | 1.64:1 | fail |
| `#333231` | `#ffc5ee` | 8.82:1 | AAA |
| `#333231` | `#f4f5f9` | 11.74:1 | AAA |

### Gradients

- `conic-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 56.1078%, rgba(0, 0, 0, 0.2) 56.1078%, rgba(0, 0, 0, 0.2) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| soehne | `--font-body` | webfont | 400, 700, 600, 900 | All page typography, from headlines and body copy to navigation, labels, and buttons. | Inter |

- **soehne:** Bold, compact headlines use tight negative tracking; body remains open and readable. Eyebrows are bold uppercase.

### Type scale — Major Third (ratio ≈ 1.278, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 700 | 1.1 | -0.015em | — | soehne | Hero headline and prominent page-level statement. |
| h2 | 40px | 700 | 1.1 | -0.025em | — | soehne | Major section headings, including product and impact sections. |
| h3 | 32px | 700 | 1.15 | -0.025em | — | soehne | Feature-card and content-module headings. |
| h4 | 28px | 700 | 1.2 | -0.01em | — | soehne | Smaller subheadings inside product and editorial modules. |
| body | 18px | 400 | 1.5 | 0.01em | — | soehne | Primary explanatory copy and longer descriptions. |
| caption | 16px | 400 | 1.5 | 0 | — | soehne | Supporting labels, attribution, and compact metadata. |
| button | 16px | 400 | 1.5 | 0 | — | soehne | Demo actions and other prominent interactive controls. |
| nav | 16px | 400 | 1.5 | 0 | — | soehne | Primary navigation and utility links. |
| eyebrow | 13px | 700 | 1.5 | 0.03em | uppercase | soehne | Uppercase section labels such as product categories and integrations. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 6, 7, 8, 10, 12, 14, 16, 20, 21, 24, 32, 36, 44, 48, 80 px.
- Section rhythm 32px · element gap 10px · card padding 16px · max content width 1278px.

The page is organized within a centered content area measured at a 1278px maximum width, with a compact overall density and clear alignment. The hero and main product stories use two-column splits; customer types, product capabilities, and awards use multi-column grids. Wide black bands interrupt white content sections, while testimonials and FAQ content use a single-column focus. Section spacing follows a repeated rhythm rather than oversized empty gaps; cards align consistently, with varied asymmetry reserved for product showcases and results.

## Shape & elevation

- Radius: button `9999px` · input `6px` · card `4px` · media `6px` · badge `9999px` · nav `9999px` · link `8px` · xs `4px` · sm `6px` · md `8px` · pill `9999px`
- Shadow `hairline` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat: strong black and white surface changes establish hierarchy, not drop shadows. Fine gray borders define cards, input edges, and section rules. Rounded pills distinguish buttons, badges, and category labels, while media frames and product cards use modest rounding. Floating UI within the hero is part of the showcased imagery, not a general shadow-heavy card style.

## Imagery

Real hospitality photography and video dominate the hero and customer stories, using warm orange and natural skin tones against the otherwise monochrome interface. Software screenshots and mobile UI are layered over product panels to make features concrete. Awards and customer marks appear as small graphic assets; vivid lime, pink, and blue backgrounds mostly belong to media or data modules rather than the core canvas.

## Components

### Announcement strip

Full-width pink top banner with a compact product announcement, small brand mark, and forward arrow.

### Primary navigation

White header with the wordmark, horizontal links, utility actions, and a pink pill-shaped demo CTA.

### Split hero

Black rounded text panel paired with warm hospitality video or photography, with white headline, supporting copy, and pink CTA.

### Category cards

Pale gray tiles arranged in a grid, each with a small icon, bold audience label, short copy, and compact link.

### Product showcase

Black section with asymmetric feature panels, vivid pink, lime, or blue media surfaces, and embedded software screenshots.

### Results module

Bright hospitality case-study panel paired with contrasting metric bars and large percentage figures.

### FAQ accordion

Warm off-white question area with thin horizontal rules, stacked questions, and compact plus/minus controls.

### Footer

Large black multi-column link area with award marks, newsletter band, small legal links, and muted supporting text.

### Measured component styles

- **Primary button** (“NEW Mews Channel Manager, powered by Sit”): background #ffc5ee · text #000000 · radius 0px · padding 0px · 400 16px soehne
- **Secondary button** (“PROPERTY MANAGEMENT”): background #8c8c8c · text #ffffff · radius 3.35544e+07px · padding 0px 12px · 400 16px soehne
- **Link** (“Hotels Everything your hotel needs to ru”): background #f4f5f9 · text #000000 · radius 8px · padding 48px 44px · 400 16px soehne
- **Input**: background #ffffff · text #000000 · border 1px solid #cc69ae · radius 6px · padding 12px 20px · 400 16px soehne · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Card** (“Best Housekeeping Software 2026”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 0px · padding 32px 0px · 400 16px soehne
- **Badge** (“2026”): background #f4f5f9 · text #000000 · radius 3.35544e+07px · padding 0px 10px · 600 11px soehne · uppercase
- **Navigation item** (“EN EN EN-GB FR DE ES NL IT Search Contac”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px soehne

## Do

- Use black and white as the dominant page colors.
- Reserve Candy Pink (#ffc5ee) for primary calls to action and announcement emphasis.
- Use oversized, bold headlines with compact line breaks.
- Pair product UI with real hospitality scenes where appropriate.
- Break long content into clear white and black section bands.
- Use thin borders and pill shapes instead of heavy card shadows.

## Don't

- Do not turn every section into a dark panel.
- Do not use bright accents as large, continuous page backgrounds.
- Do not add gradients or decorative shadows without a clear interface purpose.
- Do not crowd the hero with extra copy or competing calls to action.
- Do not make cards visually heavier than their content.
- Do not use generic stock imagery that obscures the hospitality context.

## Agent prompt

Build a new page in the Mews visual style: a clean white canvas (#ffffff), confident Deep Ink (#000000) typography, and selective Candy Pink (#ffc5ee) accents for primary actions. Use Söhne or a close sans-serif substitute such as Inter, with bold, tightly tracked display headings and readable body copy. Create a centered, modular layout with clear spacing, alternating white and black section bands, and a mix of split feature panels and compact grids. Ground software claims in real hospitality photography or video, and pair product screens with restrained supporting surfaces such as Cloud Lilac (#f4f5f9), Electric Lime (#e8ff5b), and Ice Blue (#d2f4ff). Keep elevation minimal: thin Rule Gray (#e5e5e5) borders, flat surfaces, and rounded pill CTAs. Preserve strong contrast and a clear content hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column hero with black text panel and warm product video; centered within the page. | Primary demo CTA, Announcement link, Product-category pills | Black rounded panel, White display headline, Pink pill buttons, Floating product UI |
| 2 | logo-cloud | Centered proof statement above a horizontal row of customer logos. | Customer proof link | Minimal logo row, White background, Centered text |
| 3 | category-nav | Section heading beside a multi-column grid of pale audience cards. | Audience-specific links, Browse by property type | Pale gray cards, Small icons, Compact card links |
| 4 | feature-grid | Black full-width band with asymmetric product feature panels in two columns. | Product capability links, Feature discovery | Black canvas, Pink, lime, and blue media panels, Embedded interface screenshots |
| 5 | testimonials | Single-column quotation centered in a black band. | Testimonial carousel controls, Customer attribution | Large white quote, Pink-orange quote marks, Compact pagination |
| 6 | stats | White section with introductory copy and a wide, colorful case-study and metric composition. | Case-study link, Metric-led proof, Carousel arrows | Lime case-study panel, Contrasting metric bars, Large percentage figures |
| 7 | integrations | Open white section with a left-aligned heading and concise integrations call to action. | Browse integrations | Small uppercase eyebrow, Bold heading, Minimal link treatment |
| 8 | gallery | Horizontal grid of award badges and labels on a white background. | Award recognition | Small award graphics, Compact captions, Light dividers |
| 9 | faq | Single-column accordion inside a warm off-white section. | Expandable answers, Plus and minus controls | Thin row dividers, Compact controls, Soft warm background |
| 10 | cta | Centered black conversion panel with a bold headline, three short steps, and a CTA. | Book a demo, Three-step reassurance | Large white headline, Numbered process labels, Pink pill CTA |
| 11 | footer | Large black footer with multiple link columns, award rows, newsletter form, and legal details. | Newsletter signup, Language selector, Footer navigation | Multi-column links, Pink newsletter band, Muted legal links, Award marks |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/mews-com-en