05 · Library

Components

Every element the system calls for, rendered live on the page. Open the source to copy the markup, there’s no framework to install.

Pill buttons

Three variants, all rounded-full with a 1.5px border. On hover, default and prominent fill with the accent color and invert text to background. Filled is always in the accent state.

Default Prominent Filled

Hover any button to see the fill + arrow nudge .pill · .pill-default / .pill-prominent / .pill-filled

<!-- Usage -->
<a href="#" class="pill pill-prominent">
  Read
  <svg class="arrow-icon" viewBox="0 0 16 16" fill="none">
    <path d="M4 12L12 4M12 4H5M12 4V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</a>

Cards

1px border, rounded-2xl (16px), generous padding. The optional 40×3 accent line above the title is the only color flourish the card carries.

With accent line

Used when the card opens a group of content, or when it needs a small hit of color to separate it from its neighbors.

Without accent line

The default card. Reach for this first, the accent line is the exception, not the rule.

Hover either card to see the border darken .card

Section labels

11–12px, weight 500, uppercase, tracked wider, in --text-faint. Every major section opens with one. They sit above the heading, never beside it.

02 · Foundations

Example heading

Label → heading → accent line. In that order, on every page. .section-label

Accent line

40 × 3px, rounded-full, in --accent. Sits 24px below every page’s h1 and below section headings where a color flourish is wanted. Nothing else in the system carries this shape.

Heading above

Always 40×3. Never longer, never thicker. .accent-line

Blinking cursor

3px wide, 1.1em tall, in --accent, with step-end timing so the blink is hard on/off (no fade). On shibin.co, it sits right after “AI” in the hero subhead, nothing else. CSS only, no JavaScript.

I build with AI

Live on this page .cursor · @keyframes blink

/* tokens.css */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor {
  display: inline-block;
  width: 3px; height: 1.1em;
  background: var(--accent);
  margin-left: 4px;
  top: 0.22em; position: relative;
  border-radius: 1px;
  animation: blink 1s step-end infinite;
}