Logos

The Apliteni wordmark — green leaf icon plus apliteni wordmark in Poppins. Three variants:

/logo.svg

white fill · for dark backgrounds

/logo-dark.svg

dark fill · for light backgrounds

/logo-email.png

252×72 raster · for HTML emails (Mail.app strips SVG data URLs)

Rules

• Clear space: keep at least 8px (= --space-sm) of empty space around the mark on every side.
• Minimum size: 126×36 on web, 96×27 in tight UI affordances. Below that, use just the leaf.
• Don't: recolor the wordmark, add effects, stretch the aspect ratio, or rebuild it in another typeface.
• Email: the PNG raster's pixel aspect must match the <img> tag aspect (252×72 → width="126" height="36"), or Mail.app distorts it.

Colors

Background

Surface

Border

Text

Brand

Keitaro

Typography

Font families

Type scale

Spacing

Radius

Shadows

Glows

For AI agents

This page is the canonical source of Apliteni design tokens. Flat URLs at the site root cover every consumer:

• https://style.apliteni.com/ — this page (humans)
• https://style.apliteni.com/tokens.json — nested JSON (agents)
• https://style.apliteni.com/tokens.css — CSS variables (downstream code)
• https://style.apliteni.com/logo.svg — wordmark (white, for dark backgrounds)
• https://style.apliteni.com/logo-dark.svg — wordmark (dark, for light backgrounds)
• https://style.apliteni.com/logo-email.png — wordmark raster, 252×72, for HTML emails

Drop tokens into an agent prompt

Fetch the JSON, paste it into the system prompt:

curl -s https://style.apliteni.com/tokens.json

Use CSS variables in real code

Import once at the layout level, reference variables everywhere:

<link rel="stylesheet" href="https://style.apliteni.com/tokens.css">

.hero {
  background: var(--color-background);
  color: var(--color-text-primary);
  border: 1px solid var(--color-brand-purple);
}

Generate static artifacts (SVG, PPTX, PDF)

When CSS variables aren't supported (slide decks, PDFs, raster images), inline hex values from the JSON:

const tokens = await fetch('https://style.apliteni.com/tokens.json').then(r => r.json());
const heroFill = tokens.color.brand.purple;  // "#6a2dcc"
const bodyFont = tokens.fontFamily.apliteni; // ["Poppins", "system-ui", "sans-serif"]

JSON shape (excerpt)

{
  "color": {
    "background": "#121212",
    "brand": {
      "purple": "#6a2dcc"
    }
  },
  "space": {
    "xs": "4px",
    "sm": "8px"
  },
  "radius": {
    "sm": "4px",
    "pill": "9999px"
  },
  "fontFamily": {
    "apliteni": [
      "Poppins",
      "system-ui",
      "sans-serif"
    ]
  }
}

Source

Tokens live as DTCG $type/$value JSON in apliteni/claude-apliteni-plugin/tokens/. Style Dictionary compiles them on every push to main; this page is regenerated by scripts/build-page.js.