Raster example

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/rsms.me -->
<!-- Extracted: 2026-09-24T09:51:29.340Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Raster example"
description: "Raster example presents a professional web presence."
colors:
  neutral: "#787878"
  surface: "#ffffff"
  on-surface: "#000000"
typography:
  display-lg:
    fontFamily: "Inter var"
    fontSize: "33.6px"
    fontWeight: "720"
    lineHeight: "36px"
    letterSpacing: "-1.68px"
  headline-lg:
    fontFamily: "Inter var"
    fontSize: "26.4px"
    fontWeight: "700"
    lineHeight: "36px"
    letterSpacing: "-0.792px"
  headline-md:
    fontFamily: "Inter var"
    fontSize: "16.8px"
    fontWeight: "700"
    lineHeight: "18px"
    letterSpacing: "-0.336px"
  headline-sm:
    fontFamily: "Inter var"
    fontSize: "13.2px"
    fontWeight: "700"
    lineHeight: "18px"
    letterSpacing: "-0.1584px"
  body-md:
    fontFamily: "Inter var"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "-0.12px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
---

# Raster example — Design System

## Overview

Raster example presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 10 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| background | `#ffffff` | White |
| text | `#000000` | Black |
| muted | `#787878` | Gray |

## Typography

Type is set in Inter var, Inter var, iaw-mono-var, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter var | body | self-hosted | 400 |
| Inter var | heading | self-hosted | 670, 700, 720 |
| iaw-mono-var | mono | self-hosted | 430 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Inter var | 33.6px | 720 | 36px | -1.68px |
| Heading 2 | Inter var | 26.4px | 700 | 36px | -0.792px |
| Heading 3 | Inter var | 16.8px | 700 | 18px | -0.336px |
| Heading 4 | Inter var | 13.2px | 700 | 18px | -0.1584px |
| Body | Inter var | 12px | 400 | 18px | -0.12px |

### Conventions

- Heading case — sentence-case
- Body line-height — 18px
- Monospace — iaw-mono-var

## Layout

- Base spacing unit — `2px`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/rsms.me) | 100% |

## Sources

- Official brand guidelines — https://presspage.com/blog/what-is-a-press-kit-and-what-should-be-in-yours-examples
- Live brand page — https://extractvibe.com/brand/rsms.me
- Raw JSON — https://extractvibe.com/api/brand/rsms.me
- DESIGN.md (this file) — https://extractvibe.com/api/brand/rsms.me/design.md
- Extracted — 2026-09-24T09:51:29.340Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md