8 results

Preview
Brutal Chip
Thick rules and uppercase
Preview
Chic Chip
Serif type and a thin rule
Preview
Dense Chip
Tight gaps and mono type
Preview
Editorial Chip
Measure against a heading
Preview
Filter Chip
A selectable chip
Preview
Hash Chip
A short word led by a hash mark
Preview
Modern Chip
Red on a short white plane
Preview
Soft Chip
Large radii and a pale plane

Hash Chip

A short word led by a hash mark

Preview

PaletteNight

HTML

<p>layout</p>

CSS

:root {
  --ink: #e7eaf1;
  --paper: #141820;
  --accent: #7aa2ff;
  --accent-2: #9b8cff;
  --on-accent: #10131a;
  --muted: #8b93a7;
  --line: #2c3342;
  --chip: #1d2330;
}

p {
  display: inline-flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  background: var(--chip);
  color: var(--ink);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}

p::before {
  content: "#";
  color: var(--accent);
}

Tailwind

<style>
:root {
  --ink: #e7eaf1;
  --paper: #141820;
  --accent: #7aa2ff;
  --accent-2: #9b8cff;
  --on-accent: #10131a;
  --muted: #8b93a7;
  --line: #2c3342;
  --chip: #1d2330;
}

p::before {
  content: "#";
  color: var(--accent);
}
</style>
<p class="inline-flex gap-[0.15rem] m-0 p-[0.2rem_0.5rem] rounded-[0.3rem] bg-[var(--chip)] text-[var(--ink)] font-[ui-monospace,_monospace] text-[0.8rem]">layout</p>