# Samuel Onuha design system

> Samuel Onuha design system measured from samuelonuha.com: Aspekta font, #FFFFFF primary on #000000, 9 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/samuelonuha.com/

Samuel Onuha’s website (samuelonuha.com) uses the Aspekta font and #FFFFFF as its main color on a black background. Measured by Sitepeel on November 7, 2026.

## What font does Samuel Onuha use?

Samuel Onuha uses Aspekta (weight 400) on samuelonuha.com. Page titles are 80px at weight 400 (40px on phones) and body text is 16px. Measured on November 7, 2026.

- Aspekta (weights 400)

## Samuel Onuha colors: palette and hex codes

Samuel Onuha’s main colors are #000000 (near black) for the background, #CACFD8 (cool silver) for text and #FFFFFF (white) as the main accent, with #4D70FF (indigo) as another accent. Measured on November 7, 2026.

- #000000: near black
- #CACFD8: cool silver
- #FFFFFF: white
- #525866: dark blue
- #424344: graphite
- #4D70FF: indigo

## What is Samuel Onuha built with?

Samuel Onuha’s website (samuelonuha.com) is built with Webflow, jQuery, Swiper, Cloudflare and YouTube. Measured on November 7, 2026.

- JavaScript framework: jQuery 3.5.1
- UI & CSS: Swiper
- Hosting & CDN: Cloudflare
- Media: YouTube
- Site builder & CMS: Webflow
- Fonts & icons: Google Fonts, Iconify

## Questions and answers

### What font does Samuel Onuha use?

Samuel Onuha’s website uses Aspekta (weight 400). Page titles are 80px at weight 400 (40px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the Samuel Onuha colors and hex codes?

On samuelonuha.com: #000000 (near black) for the background, #CACFD8 (cool silver) for text and #FFFFFF (white) as the main accent, with #4D70FF (indigo) as another accent. The color palette above lists all 9 colors with their hex codes and where each one is used.

### What is the Samuel Onuha design system?

The design system on this page is samuelonuha.com’s, as measured on November 7, 2026: Aspekta type, #FFFFFF as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Samuel Onuha’s own documentation.

### What is Samuel Onuha built with?

Samuel Onuha’s website (samuelonuha.com) is built with Webflow, jQuery, Swiper, Cloudflare and YouTube. The full tech stack Sitepeel found: jQuery, Swiper, Cloudflare, YouTube, Webflow, Google Fonts, Iconify, Google Analytics and Google Tag Manager. Measured on November 7, 2026.

### What is the Samuel Onuha DESIGN.md?

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

No. Sitepeel measured it from samuelonuha.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by Samuel Onuha.

### Can I use Samuel Onuha’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 Samuel Onuha’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/samuelonuha.com/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 Samuel Onuha.

## The DESIGN.md file

```markdown
---
version: alpha
name: Samuel Onuha
description: "Dark monochrome interface measured from samuelonuha.com: Aspekta type, flat surfaces and pill-shaped controls."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#CACFD8"
  on-background: "#CACFD8"
  on-surface-strong: "#FFFFFF"
  on-surface-variant: "#525866"
  overlay: "#222222CF"
  outline: "#424344"
  primary: "#FFFFFF"
  on-primary: "#525866"
  secondary: "#4D70FF"
typography:
  headline-display:
    fontFamily: Aspekta
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg:
    fontFamily: Aspekta
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Aspekta
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: Aspekta
    fontSize: 18px
    fontWeight: 400
    lineHeight: 2.1
  body-sm:
    fontFamily: Aspekta
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  headline-display-mobile:
    fontFamily: Aspekta
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
  headline-lg-mobile:
    fontFamily: Aspekta
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
rounded:
  sm: 2px
  md: 12px
  lg: 99px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 64px
  gutter: 16px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.full}"
    padding: 10px 24px
    height: 43px
---

# Samuel Onuha Design System

## Overview

The interface is dark, built on **Near Black (#000000)** with **Cool Silver (#CACFD8)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Aspekta**. Headlines run large; body text is 16px. The surface language is flat. Controls are pill-shaped.

Measured from [samuelonuha.com](https://samuelonuha.com/) on November 7, 2026 at 1440×900 and 390×844 from 148 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **Near Black (#000000):** Page background, seen 1 time. Token `background`, CSS `--base-color-neutral--black`.
- **Cool Silver (#CACFD8):** Primary text and headings, seen 25 times. Token `on-surface`, CSS `--text-color--text-primary`.
- **White (#FFFFFF):** Headings and emphasis, seen 11 times. Token `on-surface-strong`, CSS `--background-color--background-alternate`.
- **Dark Blue (#525866):** Secondary text, seen 2 times. Token `on-surface-variant`, CSS `--base-color-brand--trout`.
- **Charcoal 81% (#222222CF):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Graphite (#424344):** Borders and dividers, seen 9 times. Token `outline`.
- **White (#FFFFFF):** Primary buttons and calls to action, seen 35 times. Token `primary`, CSS `--background-color--background-alternate`.
- **Dark Blue (#525866):** Text and icons on primary. Token `on-primary`.
- **Indigo (#4D70FF):** Accent in text, fills and borders, seen 3 times. Token `secondary`.

## Typography

**Aspekta** carries the whole interface. Fallback stack: `Aspekta, sans-serif`. Other loaded fonts: Acme.

- **headline-display:** Aspekta 80px at weight 400, line height 1.2 (40px on mobile). Page title (h1).
- **headline-lg:** Aspekta 48px at weight 400, line height 1.2 (36px on mobile). Section headings (h2).
- **body-md:** Aspekta 16px at weight 400, line height 1.5. Body text.
- **body-lg:** Aspekta 18px at weight 400, line height 2.1. Lead paragraphs.
- **body-sm:** Aspekta 14px at weight 400, line height 1.5. Secondary and small text.

## Layout

Spacing is mostly on a 4px grid (74% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 64px.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Breakpoints:** 479px, 500px, 640px, 767px, 768px, 854px, 936px, 991px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #424344 borders.

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 28 elements.
- **md (12px):** 24 elements.
- **sm (2px):** 4 elements.
- **lg (99px):** 4 elements.

## Components

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

- **button-primary (“Learn More”):** #FFFFFF fill, #525866 text, 14px/400, 999px radius, padding 10px 24px, border 1px solid #000000.

## Do's and Don'ts

- Do use #000000 for the page.
- Do keep text in 3 levels: #CACFD8, #FFFFFF, #525866.
- Do let contrast carry emphasis; primary actions use #FFFFFF on #000000.
- Do reuse the measured spacing steps (8px, 16px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 12px corners.
- Don't use #525866 for body text; it reaches 2.95:1 on #000000. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Aspekta.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.375s.

## Motion

Interface transitions are quick: 0.375s, 0.3s, 0.2s.

- **Easing:** `ease`.

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

```