Get started

Setup & theming

How MED·Kit is configured — loading the tokens, declaring a tone with data-theme, pointing domain accents, and the Tailwind v4 mapping.

Get the system

github.com/ergulmehmet92/MEDKIT-design-system

MED·Kit ships as plain CSS tokens plus theme-aware React components — no build step, no framework lock-in. Everything a consumer needs is in the repository:

repository structure

MEDKIT-design-system/
├── styles.css          # global entry — @imports every token file
├── tokens/
│   ├── fonts.css       # Inter (Google Fonts) + mono stack
│   ├── colors.css      # scales, dual themes, domain signals
│   ├── typography.css  # weights, scale, display steps, tracking
│   ├── spacing.css     # 4px steps, section rhythm, measures
│   ├── radii.css       # corners, borders, shadows, glass blur
│   └── motion.css      # easing, durations, composed transitions
├── components/         # theme-aware React primitives (+ .d.ts, prompts)
├── guidelines/         # foundation specimen cards
├── ui_kits/
│   ├── portfolio/      # full recreation of mehmetergul.com
│   └── studio/         # multi-domain content hub (scale proof)
└── SKILL.md            # agent-skill front matter for Claude Code

Load the tokens

styles.css

css — two ways in

/* Option A — link the system stylesheet directly. */
@import "medkit/styles.css";

/* Option B — what this site does: the token set is inlined at the
   top of src/app/globals.css, so tokens ship with the app bundle
   and Tailwind can map utilities onto them. Inter loads via
   next/font and feeds the --font-inter variable. */

Declare a tone

data-theme

The dual-tone system is one attribute. Every semantic role is redefined per theme, so nesting a paper region inside an ink page re-themes every component within it.

html — tone switching

<!-- 1 · Declare the app's default tone once, at the root. -->
<html data-theme="ink">

<!-- 2 · Re-tone any region — components adapt with no props. -->
<section data-theme="paper">
  <!-- a reading surface: warm bg, dark ink, rust-600 accent -->
</section>

Point a domain accent

data-stream

html — domain signals

<!-- Give a content stream its signature accent. -->
<section id="work" data-stream="content">   <!-- warm amber  -->
<section id="thoughts" data-stream="editorial"> <!-- rust    -->
<section id="processes" data-stream="craft">    <!-- steel   -->

<!-- The eyebrow tick, Badge tone="accent", and
     Button variant="accent" all inherit --accent locally. -->
<h2 class="section-eyebrow">Recent work</h2>

Tailwind v4 mapping

globals.css

On this site the semantic roles are exposed as Tailwind utilities. Scale tokens whose names collide with Tailwind namespaces (--text-*, --tracking-*, --leading-*, --radius-* steps) deliberately stay out of @theme — the equivalent utilities carry those values, and the raw variables remain available for inline styles.

css — utility mapping

/* globals.css — Tailwind v4 mapping. Semantic colors use plain
   @theme so utilities resolve to var(--color-*) and follow
   [data-theme] switching at runtime. */
@theme {
  --color-bg: var(--ink-900);          /* bg-bg            */
  --color-bg-elevated: var(--ink-800); /* bg-bg-elevated   */
  --color-fg: var(--ink-100);          /* text-fg          */
  --color-fg-muted: var(--ink-400);    /* text-fg-muted    */
  --color-border: var(--ink-700);      /* border-border    */
  /* … */
}

@theme inline {
  --font-sans: var(--font-inter);      /* next/font variable */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
}

Use the components

src/components/ui

tsx — consuming primitives

// Primitives are ported 1:1 into the app at src/components/ui/.
import { Button } from "@/components/ui/Button";
import { Badge } from "@/components/ui/Badge";
import { Card } from "@/components/ui/Card";

<Card surface="panel">
  <Badge tone="live" variant="dot">In motion</Badge>
  <Button variant="glass">Get in touch</Button>
</Card>

The authoring rule underneath it all: components and pages read semantic tokens only — never raw hex, never hues outside the signal set. That is what lets one quiet brand stretch across the portfolio, a blog, and video surfaces without becoming generic.