Wear the badge

The *Space badge for your README, your site or your app. Pick the wording, pick the ground, copy the snippet.

Wording

A project you are working on now, in the open, with the room watching.

Ground

The HTML and web-component badges follow the reader’s own colour scheme whatever you pick here. This sets the image, and the side each of those starts from.

Currently being built at *Space

That is the real image, served from /badge.svg — link it wherever you like; it needs nothing from this site to render.

Copy one

Every one of these points at https://starspace-website.pages.dev. Nothing loads a font, a stylesheet or a tracker from us.

Markdown

For a README on GitHub. It embeds the image above, so it stays fixed to the ground you picked — a README has no media queries to follow.

[![Currently being built at *Space](https://starspace-website.pages.dev/badge.svg?variant=building&theme=dark)](https://starspace.group)

HTML

Real text rather than an image, so it scales with the page and reads to a screen reader. Follows the reader’s colour scheme on its own.

<!-- Currently being built at *Space -->
<style>
.starspace-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #3a3a3a;border-radius:999px;background:#14161a;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c8cdd4;text-decoration:none}
.starspace-badge img{width:16px;height:16px;flex:none}
.starspace-badge b{font-weight:600;color:#ffffff}
.starspace-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .starspace-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .starspace-badge b{color:#1a1a1a}
}
</style>
<a class="starspace-badge" href="https://starspace.group" target="_blank" rel="noopener">
  <img src="https://starspace-website.pages.dev/badge-mark.png" alt="" width="16" height="16" />
  <span>Currently being built at</span>
  <b>*Space</b>
</a>

Web component

Two lines, no CSS to paste. The badge renders in a shadow root, so your styles cannot reach it and its styles cannot leak out.

<!-- One line. Follows the reader's colour scheme on its own. -->
<script src="https://starspace-website.pages.dev/badge.js" async></script>
<starspace-badge variant="building"></starspace-badge>

React

A component and the CSS it needs.

export function StarSpaceBadge() {
  return (
    <a
      className="starspace-badge"
      href="https://starspace.group"
      target="_blank"
      rel="noopener noreferrer"
    >
      <img src="https://starspace-website.pages.dev/badge-mark.png" alt="" width={16} height={16} />
      <span>Currently being built at</span>
      <b>*Space</b>
    </a>
  );
}

/* Pair with this CSS (a module, Tailwind layer, or a plain stylesheet):
.starspace-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #3a3a3a;border-radius:999px;background:#14161a;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c8cdd4;text-decoration:none}
.starspace-badge img{width:16px;height:16px;flex:none}
.starspace-badge b{font-weight:600;color:#ffffff}
.starspace-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .starspace-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .starspace-badge b{color:#1a1a1a}
}
*/

Svelte

Drop it in anywhere.

<a class="starspace-badge" href="https://starspace.group" target="_blank" rel="noopener">
  <img src="https://starspace-website.pages.dev/badge-mark.png" alt="" width="16" height="16" />
  <span>Currently being built at</span>
  <b>*Space</b>
</a>

<style>
.starspace-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #3a3a3a;border-radius:999px;background:#14161a;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c8cdd4;text-decoration:none}
.starspace-badge img{width:16px;height:16px;flex:none}
.starspace-badge b{font-weight:600;color:#ffffff}
.starspace-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .starspace-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .starspace-badge b{color:#1a1a1a}
}
</style>

Vue

Single-file component, scoped styles.

<template>
  <a class="starspace-badge" href="https://starspace.group" target="_blank" rel="noopener">
    <img :src="mark" alt="" width="16" height="16" />
    <span>Currently being built at</span>
    <b>*Space</b>
  </a>
</template>

<script setup>
const mark = 'https://starspace-website.pages.dev/badge-mark.png';
</script>

<style scoped>
.starspace-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .75rem;
  border:1px solid #3a3a3a;border-radius:999px;background:#14161a;
  font:500 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#c8cdd4;text-decoration:none}
.starspace-badge img{width:16px;height:16px;flex:none}
.starspace-badge b{font-weight:600;color:#ffffff}
.starspace-badge span{letter-spacing:.08em;text-transform:uppercase;font-size:10.5px}
@media (prefers-color-scheme:light){
  .starspace-badge{border-color:#dee2e6;background:#ffffff;color:#5a6169}
  .starspace-badge b{color:#1a1a1a}
}
</style>