kargul.studio design system

---
version: alpha
name: kargul.studio
description: "Light monochrome interface measured from kargul.studio: Geist type, tonal surfaces and 28.8px corners."
colors:
  background: "#EFEFEF"
  surface: "#EFEFEF"
  on-surface: "#232323"
  on-background: "#232323"
  on-surface-variant: "#707070"
  on-surface-muted: "#9D9D9D"
  surface-container-low: "#FFFFFF"
  overlay: "#23232366"
  outline: "#DBDBDB"
  outline-variant: "#F5F5F53D"
  primary: "#232323"
  on-primary: "#EFEFEF"
  secondary: "#1DAF61"
typography:
  headline-display:
    fontFamily: Geist
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.07
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: Geist
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -0.03em
  body-md:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: -0.01em
  label-lg:
    fontFamily: Geist
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
  label-md:
    fontFamily: Geist
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.008em
  label-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.57
  headline-display-mobile:
    fontFamily: Geist
    fontSize: 28.5px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.03em
  headline-lg-mobile:
    fontFamily: Geist
    fontSize: 28.5px
    fontWeight: 700
    lineHeight: 1.16
    letterSpacing: -0.03em
rounded:
  xs: 16px
  sm: 18px
  md: 28.8px
  lg: 36px
  xl: 38px
spacing:
  xs: 2.17px
  sm: 7.5px
  md: 12px
  lg: 18px
  xl: 56px
  gutter: 24px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    padding: 18px 24px
    height: 54px
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    padding: 12px 18px
    height: 42px
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
    padding: 11px 0px
  card:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    padding: 12px 18px
  link:
    textColor: "{colors.on-surface-muted}"
---

# kargul.studio Design System

## Overview

kargul.studio describes itself as: “A design and engineering partner for scale-ups and enterprise products.” The interface is light, built on **Mist (#EFEFEF)** with **Charcoal (#232323)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Geist**. Headlines run large with tight negative tracking; body text is 18px. Depth comes from soft drop shadows. Corners are mostly 28.8px.

Measured from [kargul.studio](https://kargul.studio/) on October 30, 2026 at 1440×900 and 390×844 from 323 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 11 roles.

- **Mist (#EFEFEF):** Page background, seen 5 times. Token `background`, CSS `--primary-foreground`.
- **Charcoal (#232323):** Primary text and headings, seen 51 times. Token `on-surface`, CSS `--card-foreground`.
- **Slate (#707070):** Secondary text, seen 19 times. Token `on-surface-variant`.
- **Gray (#9D9D9D):** Muted text and metadata, seen 36 times. Token `on-surface-muted`, CSS `--dark-muted`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 26 times. Token `surface-container-low`, CSS `--card`.
- **Charcoal 40% (#23232366):** Translucent fill for cards and controls, seen 29 times. Token `overlay`.
- **Silver (#DBDBDB):** Borders and dividers, seen 10 times. Token `outline`, CSS `--divider`.
- **Snow 24% (#F5F5F53D):** Secondary dividers, seen 1 time. Token `outline-variant`.
- **Charcoal (#232323):** Primary buttons and calls to action, seen 87 times. Token `primary`, CSS `--card-foreground`.
- **Mist (#EFEFEF):** Text and icons on primary. Token `on-primary`.
- **Green (#1DAF61):** Accent in text, fills and borders, seen 2 times. Token `secondary`, CSS `--success`.

## Typography

**Geist** carries the whole interface. Fallback stack: `Geist, Geist Fallback`.

- **headline-display:** Geist 52px at weight 700, line height 1.07, tracking -0.03em (28.5px on mobile). Page title (h1).
- **headline-lg:** Geist 36px at weight 700, line height 1.16, tracking -0.03em (28.5px on mobile). Section headings (h2).
- **body-md:** Geist 18px at weight 700, line height 1.33, tracking -0.01em. Body text.
- **label-lg:** Geist 16px at weight 500, line height 1.5. Large buttons and tabs.
- **label-md:** Geist 15px at weight 700, line height 1.2, tracking -0.008em. Buttons, navigation and labels.
- **label-sm:** Geist 14px at weight 500, line height 1.57. Small labels and badges.

## Layout

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

- **Scale:** xs 2.17px, sm 7.5px, md 12px, lg 18px, xl 56px.
- **Gaps:** 24px is the most common gap in flex and grid layouts.
- **Breakpoints:** 375px, 400px, 450px.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(35, 35, 35, 0.08) 0px 8px 32px 0px`

## Shapes

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

- **md (28.8px):** 28 elements.
- **sm (18px):** 20 elements.
- **xl (38px):** 16 elements.
- **lg (36px):** 8 elements.
- **xs (16px):** 4 elements.

## Components

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

- **button-primary (“Start a project”):** #232323 fill, #EFEFEF text, 15px/700, 3.35544e+07px radius, padding 18px 24px.
- **button-outline (“Start a project”):** #FFFFFF fill, #232323 text, 13px/700, 3.35544e+07px radius, padding 12px 18px.
- **button-ghost (“Cookie settings”):** transparent fill, #232323 text, 14px/700, 3.35544e+07px radius, padding 11px 0px.
- **card:** #FFFFFF fill, #232323 text, 13px/700, 3.35544e+07px radius, padding 12px 18px.
- **link:** transparent fill, #9D9D9D text, padding 0px.

## Do's and Don'ts

- Do use #EFEFEF for the page and lift surfaces in small steps: #FFFFFF.
- Do keep text in 3 levels: #232323, #707070, #9D9D9D.
- Do let contrast carry emphasis; primary actions use #232323 on #EFEFEF.
- Do set headlines in Geist with tight tracking (-0.03em).
- Do reuse the measured spacing steps (7.5px, 12px, 18px).
- Do use 28.8px corners on most elements; larger surfaces also use 18px, 38px and 36px.
- Don't use #707070 for body text; it reaches 4.31:1 on #EFEFEF. Keep it for large text or metadata.
- Don't use #9D9D9D for body text; it reaches 2.36:1 on #EFEFEF. Keep it for large text or metadata.
- Don't introduce new font families beyond Geist.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.3s, 0.5s. Longer ambient animations run 2.05s, 1s.

- **Easing:** `cubic-bezier(0.76, 0, 0.24, 1)`, `cubic-bezier(0.7, 0, 0, 1)`, `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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