# CodeMaster design system

> CodeMaster design system measured from code-master.be: Bushcraft font, #F79A73 primary on #FFFFFF, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/code-master.be/

CodeMaster’s website (code-master.be) uses the Bushcraft font and #F79A73 as its main color on a white background. Measured by Sitepeel on November 6, 2026.

## What font does CodeMaster use?

CodeMaster uses Bushcraft (weight 900) and Lato (weights 400 and 900) on code-master.be. Page titles are 96px at weight 900 and body text is 16px. Measured on November 6, 2026.

- Bushcraft (weights 900)
- Lato (weights 400, 900)

## CodeMaster colors: palette and hex codes

CodeMaster’s main colors are #FFFFFF (white) for the background, #1C2E57 (dark blue) for text and #F79A73 (light orange) as the main accent, with #FF6563 (red) and #F5D0B1 (light orange) as other accents. Measured on November 6, 2026.

- #FFFFFF: white
- #1C2E57: dark blue
- #41455A: dark indigo
- #F79A73: light orange
- #000000: near black
- #FF6563: red
- #F5D0B1: light orange

## What is CodeMaster built with?

CodeMaster’s website (code-master.be) is built with Apache HTTP Server, Lottie and Rellax. Measured on November 6, 2026.

- Server: Apache HTTP Server
- Animation & 3D: Lottie, Rellax
- Analytics: Google Tag Manager

## Questions and answers

### What font does CodeMaster use?

CodeMaster’s website uses Bushcraft (weight 900) and Lato (weights 400 and 900). Page titles are 96px at weight 900 and body text is 16px. Measured on November 6, 2026.

### What are the CodeMaster colors and hex codes?

On code-master.be: #FFFFFF (white) for the background, #1C2E57 (dark blue) for text and #F79A73 (light orange) as the main accent, with #FF6563 (red) and #F5D0B1 (light orange) as other accents. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the CodeMaster design system?

The design system on this page is code-master.be’s, as measured on November 6, 2026: Bushcraft type, #F79A73 as the main color and 5px corners, written down as a DESIGN.md. It is not CodeMaster’s own documentation.

### What is CodeMaster built with?

CodeMaster’s website (code-master.be) is built with Apache HTTP Server, Lottie and Rellax. The full tech stack Sitepeel found: Apache HTTP Server, Lottie, Rellax and Google Tag Manager. Measured on November 6, 2026.

### What is the CodeMaster DESIGN.md?

A plain-text file with CodeMaster’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 CodeMaster’s official design system?

No. Sitepeel measured it from code-master.be’s public page on November 6, 2026. It is an independent analysis, not made or approved by CodeMaster.

### Can I use CodeMaster’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 CodeMaster’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/code-master.be/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 CodeMaster.

## The DESIGN.md file

```markdown
---
version: alpha
name: CodeMaster
description: "Light interface measured from code-master.be: Bushcraft type with Lato, light orange accents, flat surfaces and 5px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1C2E57"
  on-background: "#1C2E57"
  on-surface-variant: "#41455A"
  primary: "#F79A73"
  on-primary: "#000000"
  secondary: "#FF6563"
  tertiary: "#F5D0B1"
typography:
  headline-display:
    fontFamily: Bushcraft
    fontSize: 96px
    fontWeight: 900
    lineHeight: 1
  headline-lg:
    fontFamily: Bushcraft
    fontSize: 88px
    fontWeight: 900
    lineHeight: 1
  headline-md:
    fontFamily: Bushcraft
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1.1
  headline-sm:
    fontFamily: Bushcraft
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.1
  body-md:
    fontFamily: Lato
    fontSize: 16px
    fontWeight: 400
  body-lg:
    fontFamily: Lato
    fontSize: 19px
    fontWeight: 900
  body-sm:
    fontFamily: Lato
    fontSize: 14.5px
    fontWeight: 400
  caption:
    fontFamily: Lato
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
  label-md:
    fontFamily: Bushcraft
    fontSize: 16px
    fontWeight: 900
    lineHeight: 1.1
  headline-md-mobile:
    fontFamily: Bushcraft
    fontSize: 40px
    fontWeight: 900
    lineHeight: 1.1
  headline-lg-mobile:
    fontFamily: Bushcraft
    fontSize: 64px
    fontWeight: 900
    lineHeight: 1
rounded:
  md: 5px
spacing:
  xs: 2.24px
  md: 11.52px
  lg: 19.2px
  xl: 38.4px
components:
  button-primary:
    textColor: "{colors.background}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: 19.2px 38.4px
    height: 61px
  button-ghost:
    textColor: "{colors.background}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.md}"
    padding: 19.2px 38.4px
  link:
    textColor: "{colors.background}"
---

# CodeMaster Design System

## Overview

CodeMaster describes itself as: “Freelance web designer from Antwerp, Belgium, who offers quality web design and web development solutions for the web” The interface is light, built on **White (#FFFFFF)** with **Dark Blue (#1C2E57)** text, and **Light Orange (#F79A73)** as the main accent.

Type is set in **Bushcraft** and **Lato**. Headlines run large; body text is 16px. The surface language is flat. Corners are mostly 5px.

Measured from [code-master.be](https://code-master.be/) on November 6, 2026 at 1440×900 and 390×844 from 118 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles, plus gradient stops #FFBB71, #FF6464, #28021B, #3D0222.

- **White (#FFFFFF):** Page background. Token `background`.
- **Dark Blue (#1C2E57):** Primary text and headings, seen 9 times. Token `on-surface`.
- **Dark Indigo (#41455A):** Secondary text, seen 7 times. Token `on-surface-variant`.
- **Light Orange (#F79A73):** Brand color in logos and imagery. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Red (#FF6563):** Accent in text, fills and borders, seen 6 times. Token `secondary`.
- **Light Orange (#F5D0B1):** Accent, seen 8 times. Token `tertiary`.

## Typography

**Bushcraft** and **Lato** share the interface. Fallback stack: `Bushcraft, sans-serif`.

- **headline-display:** Bushcraft 96px at weight 900, line height 1, uppercase. Page title (h1).
- **headline-lg:** Bushcraft 88px at weight 900, line height 1 (64px on mobile). Section headings (h2).
- **headline-md:** Bushcraft 64px at weight 900, line height 1.1 (40px on mobile). Sub-section headings.
- **headline-sm:** Bushcraft 40px at weight 900, line height 1.1. Card and feature titles.
- **body-md:** Lato 16px at weight 400. Body text.
- **body-lg:** Lato 19px at weight 900. Lead paragraphs.
- **body-sm:** Lato 14.5px at weight 400. Secondary and small text.
- **caption:** Lato 11px at weight 400, line height 1.6. Captions and fine print.
- **label-md:** Bushcraft 16px at weight 900, line height 1.1. Buttons, navigation and labels.

## Layout

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

- **Scale:** xs 2.24px, md 11.52px, lg 19.2px, xl 38.4px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

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

- **md (5px):** 20 elements.

## Components

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

- **button-primary (“Let's get started”):** transparent fill, #FFFFFF text, 19.2px/900, 5px radius, padding 19.2px 38.4px.
- **button-ghost (“Let's get started”):** transparent fill, #FFFFFF text, 19.2px/900, 5px radius, padding 19.2px 38.4px.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 2 levels: #1C2E57, #41455A.
- Do use #F79A73 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (11.52px, 19.2px).
- Do use 5px corners on most elements.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Bushcraft and Lato.
- Don't use #F79A73 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.25s. Longer ambient animations run 1s.

- **Easing:** `ease-in-out`.

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

```