# Design Monks design system

> Design Monks design system measured from designmonks.co: Redhatdisplay Variablefont Wght font, 13 color hex codes, type scale and spacing. Free DESIGN.md file.

Canonical page: https://sitepeel.dev/design-md/designmonks.co/

Design Monks’s website (designmonks.co) uses the Redhatdisplay Variablefont Wght font and #712EFF as its main color on a #0A0A0A background. Measured by Sitepeel on November 5, 2026.

## What font does Design Monks use?

Design Monks uses Redhatdisplay Variablefont Wght (weight 700) and Outfit Variablefont Wght (weight 400) on designmonks.co. Page titles are 48px at weight 700 (28px on phones) and body text is 16px. Measured on November 5, 2026.

- Redhatdisplay Variablefont Wght (weights 700)
- Outfit Variablefont Wght (weights 400)

## Design Monks colors: palette and hex codes

Design Monks’s main colors are #0A0A0A (near black) for the background, #FAFAFA (snow) for text and #712EFF (vivid violet) as the main accent, with #45238C (dark violet) and #592DB5 (violet) as other accents. Measured on November 5, 2026.

- #0A0A0A: near black
- #FAFAFA: snow
- #D4D4D4: silver
- #525252: slate
- #712EFF: vivid violet
- #45238C: dark violet
- #592DB5: violet
- #7D40FF: violet

## What is Design Monks built with?

Design Monks’s website (designmonks.co) is built with Finsweet Attributes, Webflow, jQuery, Splide and Swiper. Measured on November 5, 2026.

- JavaScript framework: jQuery 3.5.1
- Animation & 3D: GSAP 3.15.0, GSAP MotionPath 3.15.0, GSAP Observer 3.15.0, GSAP ScrollTrigger 3.15.0
- Analytics: Meta Pixel 2.9.435, Microsoft Clarity, Google Analytics, Google Tag Manager
- Hosting & CDN: Cloudflare, bunny.net
- Site builder & CMS: Finsweet Attributes, Webflow
- UI & CSS: Splide 4.1.4, Swiper 11.2.10

## Questions and answers

### What font does Design Monks use?

Design Monks’s website uses Redhatdisplay Variablefont Wght (weight 700) and Outfit Variablefont Wght (weight 400). Page titles are 48px at weight 700 (28px on phones) and body text is 16px. Measured on November 5, 2026.

### What are the Design Monks colors and hex codes?

On designmonks.co: #0A0A0A (near black) for the background, #FAFAFA (snow) for text and #712EFF (vivid violet) as the main accent, with #45238C (dark violet) and #592DB5 (violet) as other accents. The color palette above lists all 13 colors with their hex codes and where each one is used.

### What is the Design Monks design system?

The design system on this page is designmonks.co’s, as measured on November 5, 2026: Redhatdisplay Variablefont Wght type, #712EFF as the main color and 8px corners, written down as a DESIGN.md. It is not Design Monks’s own documentation.

### What is Design Monks built with?

Design Monks’s website (designmonks.co) is built with Finsweet Attributes, Webflow, jQuery, Splide and Swiper. The full tech stack Sitepeel found: jQuery, GSAP, GSAP MotionPath, GSAP Observer, GSAP ScrollTrigger, Lenis, Meta Pixel, Cloudflare, Finsweet Attributes and Microsoft Clarity. Measured on November 5, 2026.

### What is the Design Monks DESIGN.md?

A plain-text file with Design Monks’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Design Monks’s official design system?

No. Sitepeel measured it from designmonks.co’s public page on November 5, 2026. It is an independent analysis, not made or approved by Design Monks.

### Can I use Design Monks’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Design Monks’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/designmonks.co/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Design Monks.

## The DESIGN.md file

```markdown
---
version: alpha
name: Design Monks
description: "Dark interface measured from designmonks.co: Redhatdisplay Variablefont Wght type with Outfit Variablefont Wght, vivid violet accents, flat surfaces and 8px corners."
colors:
  background: "#0A0A0A"
  surface: "#0A0A0A"
  on-surface: "#FAFAFA"
  on-background: "#FAFAFA"
  on-surface-variant: "#D4D4D4"
  on-surface-muted: "#525252"
  overlay: "#0F73F826"
  overlay-strong: "#1313131C"
  outline: "#525252"
  outline-variant: "#FFFFFF1A"
  primary: "#712EFF"
  on-primary: "#FAFAFA"
  secondary: "#45238C"
  tertiary: "#592DB5"
  link: "#7D40FF"
typography:
  headline-display:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.2
  headline-lg:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
  headline-md:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.2
  title-lg:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.018em
  body-md:
    fontFamily: Outfit Variablefont Wght
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.022em
  body-lg:
    fontFamily: Outfit Variablefont Wght
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.02em
  body-sm:
    fontFamily: Outfit Variablefont Wght
    fontSize: 8px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.045em
  title-lg-mobile:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
  headline-sm-mobile:
    fontFamily: Redhatdisplay Variablefont Wght
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
rounded:
  xs: 3px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 32px
spacing:
  xs: 3px
  sm: 6px
  md: 12px
  lg: 20px
  xl: 60px
  gutter: 8px
  section: 100px
  margin: 94px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 0px
    height: 56px
  button-secondary:
    backgroundColor: "#A8A8A8"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.sm}"
    padding: 0px 32px
    height: 56px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: 0px
    padding: 5px
  input-field:
    textColor: "{colors.on-surface}"
    rounded: 0px
    padding: 12px 0px
  card:
    backgroundColor: "#BAE5FF"
    textColor: "{colors.link}"
    rounded: "{rounded.lg}"
    padding: 20px 20px 20px 40px
  link:
    textColor: "{colors.link}"
---

# Design Monks Design System

## Overview

Design Monks describes itself as: “Design Monks is a UI/UX and product design agency helping startups, SaaS and enterprise brands grow with research-led design. Book a free call.” The interface is dark, built on **Near Black (#0A0A0A)** with **Snow (#FAFAFA)** text, and **Vivid Violet (#712EFF)** as the main accent.

Type is set in **Redhatdisplay Variablefont Wght** and **Outfit Variablefont Wght**. Headlines run large; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Corners are mostly 8px.

Measured from [designmonks.co](https://www.designmonks.co/) on November 5, 2026 at 1440×900 and 390×844 from 407 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 13 roles, plus gradient stops #592DB5, #7D40FF.

- **Near Black (#0A0A0A):** Page background, seen 4 times. Token `background`, CSS `--_theme---base--text--text`.
- **Snow (#FAFAFA):** Primary text and headings, seen 65 times. Token `on-surface`, CSS `--_theme---base--text--text-button`.
- **Silver (#D4D4D4):** Secondary text, seen 22 times. Token `on-surface-variant`, CSS `--text--text-light-gray`.
- **Slate (#525252):** Muted text and metadata, seen 23 times. Token `on-surface-muted`, CSS `--_theme---base--text--text-secondary`.
- **Vivid Blue 15% (#0F73F826):** Translucent fill for cards and controls, seen 8 times. Token `overlay`, CSS `--_theme---base--surface--surface-enabled`.
- **Charcoal 11% (#1313131C):** Stronger translucent fill, seen 8 times. Token `overlay-strong`.
- **Slate (#525252):** Borders and dividers, seen 4 times. Token `outline`, CSS `--_theme---base--text--text-secondary`.
- **White 10% (#FFFFFF1A):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Vivid Violet (#712EFF):** Primary buttons and calls to action, seen 1 time. Token `primary`.
- **Snow (#FAFAFA):** Text and icons on primary. Token `on-primary`.
- **Dark Violet (#45238C):** Accent in logos and imagery. Token `secondary`.
- **Violet (#592DB5):** Accent (CSS variable). Token `tertiary`, CSS `--_color---solid--primary--700`.
- **Violet (#7D40FF):** Inline links, seen 1 time. Token `link`.

## Typography

**Redhatdisplay Variablefont Wght** and **Outfit Variablefont Wght** share the interface. Fallback stack: `Redhatdisplay Variablefont Wght, Arial, sans-serif`. Other loaded fonts: Playfairdisplay Variablefont Wght, Outfit, PT Sans, Playfair Display.

- **headline-display:** Redhatdisplay Variablefont Wght 48px at weight 700, line height 1.2 (28px on mobile). Page title (h1).
- **headline-lg:** Redhatdisplay Variablefont Wght 40px at weight 700, line height 1.2. Section headings (h2).
- **headline-md:** Redhatdisplay Variablefont Wght 32px at weight 700, line height 1.2. Sub-section headings.
- **headline-sm:** Redhatdisplay Variablefont Wght 24px at weight 700, line height 1.2 (20px on mobile). Card and feature titles.
- **title-lg:** Redhatdisplay Variablefont Wght 20px at weight 700, line height 1.2, tracking 0.018em (16px on mobile). Small titles.
- **body-md:** Outfit Variablefont Wght 16px at weight 400, line height 1.5, tracking 0.022em. Body text.
- **body-lg:** Outfit Variablefont Wght 18px at weight 400, line height 1.5, tracking 0.02em. Lead paragraphs.
- **body-sm:** Outfit Variablefont Wght 8px at weight 400, line height 1.5, tracking 0.045em. Secondary and small text.

## Layout

Spacing does not follow a strict grid: 62% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 3px, sm 6px, md 12px, lg 20px, xl 60px.
- **Sections:** 100px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Page margin:** 94px on each side of full-width sections.
- **Breakpoints:** 350px, 400px, 479px, 480px, 667px, 668px, 767px, 768px, 991px, 1280px, 1440px, 1920px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights:

- `rgba(255, 255, 255, 0.72) 0px 1.6px 3px 0px inset`

A few raised panels add a soft drop shadow: `rgba(0, 0, 0, 0.2) 0px 16px 5px 0px, rgba(255, 255, 255, 0.09) 0px 8px 24px 0px inset`.

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **sm (8px):** 80 elements.
- **lg (16px):** 40 elements.
- **xs (3px):** 32 elements.
- **md (12px):** 28 elements.
- **xl (32px):** 24 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Let's Talk”):** #712EFF fill, #FAFAFA text, 16px/700, 8px radius, padding 0px.
- **button-secondary (“Let's Talk”):** #A8A8A8 fill, #FAFAFA text, 14px/400, 8px radius, padding 0px 32px, shadow `rgba(255, 255, 255, 0.72) 0px 1.6px 3px 0px inset`.
- **button-ghost (“More”):** transparent fill, #FAFAFA text, 16px/400, padding 5px.
- **input-field (“John Doe”):** transparent fill, #FAFAFA text, 17px/400, padding 12px 0px.
- **card:** #BAE5FF fill, #7D40FF text, 14px/400, 16px radius, padding 20px 20px 20px 40px.
- **link:** transparent fill, #7D40FF text, padding 0px.

## Do's and Don'ts

- Do use #0A0A0A for the page.
- Do keep text in 3 levels: #FAFAFA, #D4D4D4, #525252.
- Do reserve #712EFF for primary actions and key highlights.
- Do reuse the measured spacing steps (6px, 12px, 20px).
- Do use 8px corners on most elements; larger surfaces also use 16px, 3px and 12px.
- Don't use #525252 for body text; it reaches 2.53:1 on #0A0A0A. Keep it for large text or metadata.
- Don't use heavy drop shadows; keep depth to hairline rings.
- Don't introduce new font families beyond Redhatdisplay Variablefont Wght and Outfit Variablefont Wght.
- Don't use #712EFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.35s.

## Motion

Interface transitions are quick: 0.2s, 0.35s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/designmonks.co/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```