Make

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/make.com -->
<!-- Extracted: 2026-10-14T11:15:41.984Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Make"
description: "AI Workflow Automation Software & Tools | Make presents a professional web presence."
colors:
  primary: "#8f4bd2"
  tertiary: "#bc5fed"
  neutral: "#69586c"
  surface: "#ffffff"
  on-surface: "#342237"
  on-surface-secondary: "#69586c"
  border: "#000000"
typography:
  display-lg:
    fontFamily: "Satoshi"
    fontSize: "60px"
    fontWeight: "500"
    lineHeight: "72px"
    letterSpacing: "-1.2px"
  headline-lg:
    fontFamily: "Satoshi"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  headline-md:
    fontFamily: "Satoshi"
    fontSize: "30px"
    fontWeight: "500"
    lineHeight: "38.001px"
  headline-sm:
    fontFamily: "Satoshi"
    fontSize: "14px"
    fontWeight: "700"
    lineHeight: "21px"
  body-md:
    fontFamily: "Satoshi"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#8f4bd2"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "10.496px 18px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#8f4bd2"
    borderWidth: "1px"
    boxShadow: "rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset, rgba(10, 13, 18, 0.18) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.12) 0px 0px 0px 2px inset"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#69586c"
    rounded: "8px"
    padding: "10.496px 18px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#dad4da"
    borderWidth: "1px"
    boxShadow: "rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset"
  button-outline:
    textColor: "#ffffff"
    rounded: "8px"
    padding: "12px 20px"
    fontSize: "16px"
    fontWeight: "500"
    borderWidth: "2px"
    boxShadow: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.18) 0px 0px 0px 1px inset"
---

# Make — Design System

## Overview

AI Workflow Automation Software & Tools | Make 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 79 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#8f4bd2` | Slate Blue |
| accent / tertiary | `#bc5fed` | Medium Orchid |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#342237` | Charcoal |
| secondary text | `#69586c` | Dim Gray |
| border | `#000000` | Black |
| muted | `#69586c` | Dim Gray |

## Typography

Type is set in Satoshi, Satoshi, Satoshi Variable, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Satoshi | body | self-hosted | 400, 500 |
| Satoshi | heading | self-hosted | 400, 500, 700 |
| Satoshi Variable | body | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Satoshi | 60px | 500 | 72px | -1.2px |
| Heading 2 | Satoshi | 16px | 400 | 24px | — |
| Heading 3 | Satoshi | 30px | 500 | 38.001px | — |
| Heading 4 | Satoshi | 14px | 700 | 21px | — |
| Body | Satoshi | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset` |
| card | `rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset, rgba(10, 13, 18, 0.18) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.12) 0px 0px 0px 2px inset` |
| button | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px -1px 0px 0px inset` |
| button | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.18) 0px 0px 0px 1px inset` |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(255, 255, 255))`
- `linear-gradient(270deg, color(srgb 0 0 0 / 0) 0%, color(srgb 1 1 1 / 0.00552297) 8.07%, color(srgb 1 1 1 / 0.0217837) 15.54%, color(srgb 1 1 1 / 0.04832) 22.5%, color(srgb 1 1 1 / 0.0846696) 29.04%, color(srgb 1 1 1 / 0.13037) 35.26%, color(srgb 1 1 1 / 0.18496) 41.25%, color(srgb 1 1 1 / 0.247976) 47.1%, color(srgb 1 1 1 / 0.318957) 52.9%, color(srgb 1 1 1 / 0.39744) 58.75%, color(srgb 1 1 1 / 0.482963) 64.74%, color(srgb 1 1 1 / 0.575064) 70.96%, color(srgb 1 1 1 / 0.67328) 77.5%, color(srgb 1 1 1 / 0.77715) 84.46%, color(srgb 1 1 1 / 0.88621) 91.93%, rgb(255, 255, 255) 100%)`
- `linear-gradient(90deg, color(srgb 0 0 0 / 0) 0%, color(srgb 1 1 1 / 0.00552297) 8.07%, color(srgb 1 1 1 / 0.0217837) 15.54%, color(srgb 1 1 1 / 0.04832) 22.5%, color(srgb 1 1 1 / 0.0846696) 29.04%, color(srgb 1 1 1 / 0.13037) 35.26%, color(srgb 1 1 1 / 0.18496) 41.25%, color(srgb 1 1 1 / 0.247976) 47.1%, color(srgb 1 1 1 / 0.318957) 52.9%, color(srgb 1 1 1 / 0.39744) 58.75%, color(srgb 1 1 1 / 0.482963) 64.74%, color(srgb 1 1 1 / 0.575064) 70.96%, color(srgb 1 1 1 / 0.67328) 77.5%, color(srgb 1 1 1 / 0.77715) 84.46%, color(srgb 1 1 1 / 0.88621) 91.93%, rgb(255, 255, 255) 100%)`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#8f4bd2`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `10.496px 18px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #8f4bd2`
- Shadow — `rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset, rgba(10, 13, 18, 0.18) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.12) 0px 0px 0px 2px inset`
- Sample copy — "Get started free"

**Secondary**

- Background — `#ffffff`
- Text — `#69586c`
- Radius — `8px`
- Padding — `10.496px 18px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #dad4da`
- Shadow — `rgba(10, 13, 18, 0.05) 0px 1px 2px 0px, rgba(10, 13, 18, 0.05) 0px -2px 0px 0px inset`
- Sample copy — "Talk to sales"

**Outline**

- Text — `#ffffff`
- Radius — `8px`
- Padding — `12px 20px`
- Font size — `16px`
- Font weight — `500`
- Shadow — `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px, rgba(0, 0, 0, 0.05) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.18) 0px 0px 0px 1px inset`
- Sample copy — "Understood"

## 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/make.com) | 100% |
| favicon | — | png | [link](brands/make.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/make.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/make.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/make.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/make.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/make.com/logo-5.png) | 95% |
| primary | dark | svg | [link](brands/make.com/logo-6.svg) | 85% |
| primary | dark | svg | [link](brands/make.com/logo-7.svg) | 85% |
| primary | dark | svg | [link](brands/make.com/logo-8.svg) | 85% |
| primary | dark | svg | [link](brands/make.com/logo-9.svg) | 85% |
| primary | dark | svg | [link](brands/make.com/logo-10.svg) | 85% |

## Sources

- Official brand guidelines — https://make.com/press
- Live brand page — https://extractvibe.com/brand/make.com
- Raw JSON — https://extractvibe.com/api/brand/make.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/make.com/design.md
- Extracted — 2026-10-14T11:15:41.984Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

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