mkdev — Design System

Foundations

Colors

Two brand colors — aubergine for structure, orange for energy. Six neutrals do the rest of the work. Click any color to copy its hex.

Brand

Aubergine

Headlines, nav, primary structure

#593A4E

Orange

CTAs, links, picked states, accents

#F59937

Neutrals

ink

Body text

#444444

Typography

Single family — Rubik — in three weights. Tokens are named by role, not by px, so you pick by purpose: title, headline, body.

title

32 / 56 · medium

Innovate faster

Main page title

subtitle

30 / 56 · regular

We partner with you

Page subtitle, inner-page title

headline

22 / 32 · regular

Cloud Native GitOps

Card & list headlines

cta

20 / 32 · medium · caps

Schedule a call

Buttons, action links, nav

body

18 / 28 · light

We do not pursue a status of partner with the Big Tech.

Primary basic text

card

18 / 26 · light

On-site or remote training on a variety of topics.

Card descriptions, italic quotes

list

18 / 24 · light

Bulleted list item with consistent rhythm

Bulleted-list items

paragraph

18 / 22 · light

Tight multi-line paragraphs without too much breathing room

Two-or-more lines

pill

16 / 24 · medium · caps

Workshops · Audits · Cases

Labels, small nav

input

16 / 20 · light

Form input field text

Inputs, tech-block body

caption

14 / 18 · light

Agreement text and expert info

Agreement, expert info

Weights

Aa Bb Cc

light · 300

Body, paragraphs

Aa Bb Cc

regular · 400

Headlines, subtitles

Aa Bb Cc

medium · 500

CTAs, page titles, labels

Spacing

8-pt grid. Inner spacing tends to use 8/16/24; section gaps use 40/48; major page rhythm jumps to 80/100/104.

8px

inner padding, list indent

16px

tight gaps

24px

card padding, expert indent

32px

card & section internal

40px

component gaps

48px

block separation

52px

card→card vertical

80px

section break

100px

page rhythm

104px

section bottom

Border radius

btn 5px · buttons, inputs

card 20px · cards, labels

Components

Buttons

Primary action. 40h, 5px radius, orange fill, white caps text in medium weight. Three canonical widths: 610 / 320 / 293.

<button class="h-btn w-btn-md bg-orange text-white font-medium uppercase rounded-btn text-cta tracking-wider">
  Checkout
</button>

Action link block

Soft body copy on white, anchored by a full-width orange caps link at the bottom. Width matches a card column (320w).

We know how things should look and work in the best possible way and could help you to get there.

Schedule a call

Cards

All cards: 320w, 20px radius, 1px stroke. Picked = orange stroke; unpicked = light gray.

Workshop card

Workshops

On-site or remote training on a variety of topics. In 1–3 days we will bring your team up to speed with selected technologies and methodologies.

Workshops

On-site or remote training on a variety of topics. In 1–3 days we will bring your team up to speed with selected technologies and methodologies.

Service card with NEW ribbon

NEW

Cloud Native GitOps

Modern, declarative way to deploy applications to Kubernetes

Corporate: Soon

Individuals: Soon

NEW

Cloud Native GitOps

Modern, declarative way to deploy applications to Kubernetes

Corporate: Soon

Individuals: Soon

Cloud Native GitOps

Modern, declarative way to deploy applications to Kubernetes

Corporate: Soon

Individuals: Soon

Client logos

200×60 each, on a 1400×250 soft-gray strip. Unpicked = monochrome dim; picked = full color.

Forms & labels

Input field

Company name:

I agree to mkdev storing and processing my personal data, within the guidelines of its privacy policy.

Label pill

New Featured Soon

Bulleted list

You learn as we go
We strive to ensure that our solutions not only meet immediate needs of your application or business, but also lay a solid foundation for your growth.
Want a workshop tailored to your specific needs? Contact us >

Patterns

Header

Footer

mkdev

Services

Account

Social

▶

𝕏

✈