tradik Design System

Downloads

Drop the CSS into any Tradik app and you get the system end-to-end — same tokens, same components, same accessibility guarantees.

Use the CSS bundle

One file, no build step required. Hot-link from this site, or self-host the file from your own infra.

1. Hot-link (fastest)

<link rel="stylesheet" href="https://designstyles.tradik.com/tokens/tradik.css">

2. Self-host

# download the bundle
curl -O https://designstyles.tradik.com/tokens/tradik.css

# serve from /static/css/tradik.css in your app
<link rel="stylesheet" href="/static/css/tradik.css">

3. Variables only

If your app already has its own reset/components and you only want our tokens (CSS custom properties):

<link rel="stylesheet" href="https://designstyles.tradik.com/tokens/tokens.css">

4. Tokens as JSON (for tooling)

Flat key/value map for Style Dictionary, Figma plugins, or build-time codegen.

curl https://designstyles.tradik.com/tokens/tokens.json

Files

FileUseSize
tradik.css Drop-in: tokens + reset + components (buttons, inputs, cards, tables, badges, pager, utils). ~14 KB
tokens.css Variables only — for apps that bring their own components. ~4 KB
tokens.json Flat key/value tokens — for codegen or design tooling. ~4 KB

Component HTML cheatsheet

After loading tradik.css, use these class names — no JS, no framework required.

<!-- Buttons -->
<button class="tradik-btn tradik-btn-primary">Primary</button>
<button class="tradik-btn tradik-btn-secondary">Secondary</button>
<button class="tradik-btn tradik-btn-ghost">Ghost</button>
<button class="tradik-btn tradik-btn-danger">Delete</button>

<!-- Form field -->
<div class="tradik-field">
  <label for="email">Email</label>
  <input id="email" type="email" class="tradik-input" />
  <small>We never share your address.</small>
</div>

<!-- Card -->
<article class="tradik-card tradik-card-elevated">
  <h3>Card title</h3>
  <p>Card body.</p>
</article>

<!-- Table -->
<div class="tradik-table-wrap">
  <table class="tradik-table">
    <thead><tr><th>Name</th><th class="num">Total</th></tr></thead>
    <tbody><tr><td>Atlas</td><td class="num">12,481</td></tr></tbody>
  </table>
</div>

<!-- Badge -->
<span class="tradik-badge tradik-badge-success">Live</span>

Brand assets

Favicons