# Statotech Systems design system

> Statotech Systems design system measured from statotec.com: Inter Tight font, #143466 primary, 17 color hex codes, type scale, spacing and a free DESIGN.md.

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

Statotech Systems’s website (statotec.com) uses the Inter Tight font and #143466 as its main color on a #0A0C10 background. Measured by Sitepeel on November 5, 2026.

## What font does Statotech Systems use?

Statotech Systems uses Inter Tight (weights 500 and 600) and Inter (weight 400), with IBM Plex Mono for code on statotec.com. Page titles are 84px at weight 600 (48px on phones) and body text is 14px. Measured on November 5, 2026.

- Inter Tight (weights 500, 600)
- Inter (weights 400)
- IBM Plex Mono (weights 400)

## Statotech Systems colors: palette and hex codes

Statotech Systems’s main colors are #0A0C10 (cool charcoal) for the background, #AFB8C4 (light blue) for text and #143466 (dark blue) as the main accent, with #1D4A8C (dark blue) and #9AC4FF (light blue) as other accents. Measured on November 5, 2026.

- #0A0C10: cool charcoal
- #AFB8C4: light blue
- #F5F7FA: snow
- #79838F: cool gray
- #666F7B: cool slate
- #07080B: near black
- #12161D: cool charcoal
- #143466: dark blue

## What is Statotech Systems built with?

Statotech Systems’s website (statotec.com) is built with Next.js, React, Vercel and Lucide. Measured on November 5, 2026.

- JavaScript framework: Next.js 16.4.2, React 19.3.0-canary-278794d7-2
- Analytics: PostHog, Vercel Web Analytics
- Hosting & CDN: Vercel
- Fonts & icons: Lucide

## Questions and answers

### What font does Statotech Systems use?

Statotech Systems’s website uses Inter Tight (weights 500 and 600) and Inter (weight 400), with IBM Plex Mono for code. Page titles are 84px at weight 600 (48px on phones) and body text is 14px. Measured on November 5, 2026.

### What are the Statotech Systems colors and hex codes?

On statotec.com: #0A0C10 (cool charcoal) for the background, #AFB8C4 (light blue) for text and #143466 (dark blue) as the main accent, with #1D4A8C (dark blue) and #9AC4FF (light blue) as other accents. The color palette above lists all 17 colors with their hex codes and where each one is used.

### What is the Statotech Systems design system?

The design system on this page is statotec.com’s, as measured on November 5, 2026: Inter Tight type, #143466 as the main color and pill-shaped corners, written down as a DESIGN.md. It is not Statotech Systems’s own documentation.

### What is Statotech Systems built with?

Statotech Systems’s website (statotec.com) is built with Next.js, React, Vercel and Lucide. The full tech stack Sitepeel found: Next.js, React, PostHog, Vercel Web Analytics, Vercel and Lucide. Measured on November 5, 2026.

### What is the Statotech Systems DESIGN.md?

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

No. Sitepeel measured it from statotec.com’s public page on November 5, 2026. It is an independent analysis, not made or approved by Statotech Systems.

### Can I use Statotech Systems’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 Statotech Systems’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/statotec.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 Statotech Systems.

## The DESIGN.md file

```markdown
---
version: alpha
name: Statotech Systems
description: "Dark interface measured from statotec.com: Inter Tight type with Inter, dark blue accents, tonal surfaces and pill-shaped controls."
colors:
  background: "#0A0C10"
  surface: "#0A0C10"
  on-surface: "#AFB8C4"
  on-background: "#AFB8C4"
  on-surface-strong: "#F5F7FA"
  on-surface-variant: "#79838F"
  on-surface-muted: "#666F7B"
  surface-container-low: "#07080B"
  surface-container: "#12161D"
  overlay: "#FFFFFF29"
  overlay-strong: "#FFFFFF38"
  outline: "#0A0C101A"
  outline-variant: "#FFFFFF29"
  primary: "#143466"
  on-primary: "#AFB8C4"
  inverse-surface: "#FFFFFF"
  secondary: "#1D4A8C"
  tertiary: "#9AC4FF"
  success: "#3DDC97"
typography:
  headline-display:
    fontFamily: Inter Tight
    fontSize: 84px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Inter Tight
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
  body-lg:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  label-md:
    fontFamily: Inter Tight
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.02em
  label-sm:
    fontFamily: Inter Tight
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.65
    letterSpacing: -0.01em
  code:
    fontFamily: IBM Plex Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.08em
  headline-display-mobile:
    fontFamily: Inter Tight
    fontSize: 48px
    fontWeight: 600
    lineHeight: 0.98
    letterSpacing: -0.035em
  headline-lg-mobile:
    fontFamily: Inter Tight
    fontSize: 29px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.025em
rounded:
  xs: 2px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 40px
  gutter: 8px
  section: 89.28px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-lg}"
    rounded: 1px
    padding: 0px
    height: 25px
  button-primary-hover:
    textColor: "{colors.on-surface-strong}"
  button-secondary:
    backgroundColor: "{colors.success}"
    textColor: "#04241A"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 9px 20px
    height: 35px
  button-secondary-hover:
    backgroundColor: "#5FE8AB"
  button-tertiary:
    backgroundColor: "#F7F8FA"
    textColor: "#5F8A72"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    padding: 0px
    height: 56px
  button-ghost:
    textColor: "{colors.on-surface-strong}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.full}"
    padding: 16px 30px
  link:
    textColor: "{colors.on-surface}"
---

# Statotech Systems Design System

## Overview

Statotech Systems describes itself as: “Statotech Systems builds software products and custom solutions for Zimbabwean businesses. Point of sale, school management, clinic software, and more.” The interface is dark, built on **Cool Charcoal (#0A0C10)** with **Light Blue (#AFB8C4)** text, and **Dark Blue (#143466)** as the main accent.

Type is set in **Inter Tight** and **Inter**, with **IBM Plex Mono** for code. Headlines run large with tight negative tracking; body text is 14px. Depth comes from soft drop shadows. Controls are pill-shaped.

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

## Colors

The palette has 17 roles.

- **Cool Charcoal (#0A0C10):** Page background, seen 5 times. Token `background`, CSS `--s-text`.
- **Light Blue (#AFB8C4):** Primary text and headings, seen 49 times. Token `on-surface`.
- **Snow (#F5F7FA):** Headings and emphasis, seen 9 times. Token `on-surface-strong`.
- **Cool Gray (#79838F):** Secondary text, seen 13 times. Token `on-surface-variant`.
- **Cool Slate (#666F7B):** Muted text and metadata, seen 4 times. Token `on-surface-muted`, CSS `--text-muted`.
- **Near Black (#07080B):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Cool Charcoal (#12161D):** Cards and panels, seen 3 times. Token `surface-container`, CSS `--ink-2`.
- **White 16% (#FFFFFF29):** Translucent fill for cards and controls, seen 7 times. Token `overlay`.
- **White 22% (#FFFFFF38):** Stronger translucent fill, seen 2 times. Token `overlay-strong`.
- **Cool Charcoal 10% (#0A0C101A):** Borders and dividers, seen 14 times. Token `outline`.
- **White 16% (#FFFFFF29):** Secondary dividers, seen 8 times. Token `outline-variant`.
- **Dark Blue (#143466):** Brand accent (CSS variable), seen 9 times. Token `primary`, CSS `--brand`.
- **Light Blue (#AFB8C4):** Text and icons on primary. Token `on-primary`.
- **White (#FFFFFF):** High-contrast fills, seen 9 times. Token `inverse-surface`, CSS `--s-btn-text`.
- **Dark Blue (#1D4A8C):** Accent (CSS variable). Token `secondary`.
- **Light Blue (#9AC4FF):** Accent (CSS variable). Token `tertiary`.
- **Teal (#3DDC97):** Success and positive states, seen 27 times. Token `success`, CSS `--accent`.

## Typography

**Inter Tight**, **Inter** and **IBM Plex Mono** (monospace) share the interface. Fallback stack: `Inter Tight, Inter Tight Fallback, ui-sans-serif, system-ui`.

- **headline-display:** Inter Tight 84px at weight 600, line height 0.98, tracking -0.035em (48px on mobile). Page title (h1).
- **headline-lg:** Inter Tight 48px at weight 600, line height 1.1, tracking -0.025em (29px on mobile). Section headings (h2).
- **body-md:** Inter 14px at weight 400, line height 1.65. Body text.
- **body-lg:** Inter 15px at weight 400, line height 1.6. Lead paragraphs.
- **label-lg:** Inter 16px at weight 400, line height 1.65. Large buttons and tabs.
- **label-md:** Inter Tight 15px at weight 600, line height 1.25, tracking -0.02em. Buttons, navigation and labels.
- **label-sm:** Inter Tight 14px at weight 500, line height 1.65, tracking -0.01em. Small labels and badges.
- **code:** IBM Plex Mono 11px at weight 400, line height 1.65, tracking 0.08em. Code and technical values.

## Layout

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

- **Scale:** xs 4px, sm 8px, md 16px, lg 20px, xl 40px.
- **Sections:** 89.28px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Breakpoints:** 380px, 560px, 640px, 900px, 1024px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.7) 0px 10px 24px -10px`
- `rgba(255, 255, 255, 0.035) 0px 0px 0px 12px, rgba(0, 0, 0, 0.85) 0px 22px 54px -18px`
- `rgba(10, 12, 16, 0.05) 0px 1px 2px 0px, rgba(10, 12, 16, 0.14) 0px 14px 30px -12px`

Hairline rings and inset highlights also appear: `color(srgb 0.431373 0.658824 1 / 0.22) 0px 0px 0px 3px`.

## Shapes

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

- **full (9999px):** 144 elements.
- **xs (2px):** 32 elements.
- **lg (16px):** 28 elements.
- **md (12px):** 24 elements.
- **xl (20px):** 12 elements.
- **sm (8px):** 8 elements.

## Components

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

- **button-primary (“Products”):** #143466 fill, #AFB8C4 text, 15px/500, 1px radius, padding 0px.
- **button-primary-hover:** background #143466, text #F5F7FA on hover.
- **button-secondary (“Sign in”):** #3DDC97 fill, #04241A text, 15px/600, 999px radius, padding 9px 20px.
- **button-secondary-hover:** background #5FE8AB, text #04241A on hover.
- **button-tertiary (“STATOTECH POS”):** #F7F8FA fill, #5F8A72 text, 16px/400, 16px radius, padding 0px, border 1px solid #FFFFFF29, shadow `rgba(0, 0, 0, 0.7) 0px 10px 24px -10px`.
- **button-ghost (“Explore products”):** transparent fill, #F5F7FA text, 16px/600, 999px radius, padding 16px 30px, border 1px solid #FFFFFF38.
- **link:** transparent fill, #AFB8C4 text, padding 0px.

## Do's and Don'ts

- Do use #0A0C10 for the page and lift surfaces in small steps: #07080B, #12161D.
- Do keep text in 4 levels: #AFB8C4, #F5F7FA, #79838F, #666F7B.
- Do use #143466 as the brand accent: header, logo and key highlights.
- Do set headlines in Inter Tight with tight tracking (-0.035em).
- Do reuse the measured spacing steps (8px, 16px, 20px).
- Do make buttons and chips fully rounded (9999px); most other elements use 2px corners.
- Don't use #666F7B for body text; it reaches 3.84:1 on #0A0C10. Keep it for large text or metadata.
- Don't introduce new font families beyond Inter Tight, Inter and IBM Plex Mono.
- Don't use #143466 for large backgrounds or body text.
- Don't make interface transitions slower than 0.24s.

## Motion

Interface transitions are quick: 0.24s. Longer ambient animations run 3.4s, 5.2s, 70s.

- **Easing:** `cubic-bezier(0.2, 0, 0, 1)`, `linear`, `cubic-bezier(0.34, 1.4, 0.64, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```