Eyebrow Text Lab · Visual Playground

01 — Classic

Uppercase Spaced

The most common eyebrow pattern — small uppercase text with generous letter-spacing. Sets context above a heading without competing for attention.

letter-spacing + text-transform CAPS

What We Do

Design Systems That Scale

We build component libraries that grow with your product and keep teams aligned.

Our Mission

Making the Web Accessible

Every user deserves a seamless experience regardless of ability or device.

Case Study

Rebuilding Checkout

How we reduced cart abandonment by 35% through progressive disclosure.

New Feature

Real-Time Collaboration

Edit together, see changes instantly, and never lose sync with your team.

<div class="eb-caps rose">What We Do</div>
<h2 class="eb-heading">Design Systems That Scale</h2>
<p class="eb-sub">Description text...</p>

.eb-caps {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eb-caps.rose { color: rgba(244,63,94,.7); }
.eb-caps.blue { color: rgba(59,130,246,.7); }
.eb-caps.amber { color: rgba(245,158,11,.7); }
.eb-caps.teal { color: rgba(20,184,166,.7); }

02 — Badge Style

Pill Badge

Eyebrow text inside a rounded pill with a tinted background. Adds visual weight and makes the label feel like a category or status tag.

border-radius + background tint PILL

New Release

Version 4.0 Is Here

Faster builds, smaller bundles, and a redesigned developer experience.

Premium

Pro Analytics Dashboard

Advanced charts, custom reports, and real-time data for power users.

Verified

SOC 2 Compliant

Your data is protected by enterprise-grade security and encryption.

Trending

Most Popular This Week

The templates and components developers are using right now.

<div class="eb-pill blue">
  <i class="ph ph-sparkle"></i> New Release
</div>
<h2 class="eb-heading">Version 4.0 Is Here</h2>
<p class="eb-sub">Description...</p>

.eb-pill {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.eb-pill.blue {
  background: rgba(59,130,246,.12);
  color: #93c5fd;
  border: 1px solid rgba(59,130,246,.15);
}
.eb-pill i { font-size: 14px; }

03 — Decorative Line

Line Accent

A small decorative line before (or around) the eyebrow text. Adds a strong visual anchor and draws the eye to the section label.

::before pseudo-element line LINE

About Us

A Decade of Innovation

Founded in 2014, we've grown from a garage startup to serving millions globally.

Services

What We Offer

Full-stack development, design, and consulting for modern web products.

Featured Work

Selected Projects

A curated collection of our best work from the past year.

Our Process

How We Build

A proven four-step methodology that delivers results every time.

<!-- Left line -->
<div class="eb-line amber">About Us</div>

<!-- Centered lines on both sides -->
<div class="eb-line-center">Our Process</div>

<h2 class="eb-heading">Heading Text</h2>

.eb-line {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.eb-line::before {
  content: ''; width: 32px; height: 2px;
}
.eb-line.amber::before { background: #f59e0b; }

/* Centered: lines on both sides */
.eb-line-center {
  display: flex; align-items: center; gap: 16px;
}
.eb-line-center::before,
.eb-line-center::after {
  content: ''; height: 1px; width: 32px;
  background: rgba(139,92,246,.3);
}

04 — Icon Pairing

Icon Prefix

A small icon placed before the eyebrow text to reinforce the category or topic. Works as bare icons or icons inside circles.

Phosphor icon + text ICON

Getting Started

Quick Start Guide

Go from zero to deployed in under five minutes with our CLI tool.

Security

Enterprise-Grade Protection

End-to-end encryption, SSO, and compliance certifications built in.

Performance

Blazing Fast Delivery

Sub-50ms response times with edge caching across 200+ global nodes.

Integrations

Connect Everything

100+ native integrations with the tools your team already uses.

<!-- Bare icon -->
<div class="eb-icon blue">
  <i class="ph ph-rocket-launch"></i> Getting Started
</div>

<!-- Icon in circle -->
<div class="eb-icon-circle amber">
  <span class="icon-wrap">
    <i class="ph ph-lightning"></i>
  </span> Performance
</div>

<h2 class="eb-heading">Heading Text</h2>

.eb-icon {
  display: inline-flex;
  align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eb-icon i { font-size: 16px; }
.eb-icon.blue { color: rgba(59,130,246,.7); }
.eb-icon.blue i { color: #3b82f6; }

/* Circle variant */
.eb-icon-circle .icon-wrap {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  background: rgba(245,158,11,.12);
  color: #f59e0b; font-size: 14px;
}

05 — Color Effect

Gradient Text

Eyebrow text filled with a CSS gradient using background-clip. A bold, modern look that adds color energy without being overwhelming.

background-clip: text GRADIENT

Introducing

The Future of Design

AI-powered tools that understand your brand and generate on-brand designs instantly.

Developer Tools

Built for Speed

TypeScript-first SDK with auto-generated types and inline documentation.

Platform Update

Smarter Analytics

ML-driven insights that surface the metrics that matter most to your business.

Community

Join 50K+ Creators

Connect, learn, and build with the largest community of independent makers.

<div class="eb-gradient">Introducing</div>
<div class="eb-gradient purple">Developer Tools</div>
<div class="eb-gradient teal">Platform Update</div>
<div class="eb-gradient sunset">Community</div>

<h2 class="eb-heading">Heading Text</h2>

.eb-gradient {
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: inline-block;
  background: linear-gradient(135deg, #f43f5e, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eb-gradient.purple {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eb-gradient.teal {
  background: linear-gradient(135deg, #14b8a6, #3b82f6);
  /* same clip properties */
}

06 — Section Numbers

Numbered Eyebrow

A section number paired with a label, separated by a line or inside a circle. Commonly used for step-by-step or multi-section landing pages.

Number + divider + label NUMBERED

01 Discovery

Understanding Your Goals

We start by listening. Deep-dive interviews to understand your users, market, and vision.

02 Design

Crafting the Experience

Wireframes, prototypes, and user testing to validate every design decision.

03 Development

Building with Precision

Clean, tested code delivered in sprints with continuous integration.

01 Getting Started

Create Your Account

Sign up in seconds, no credit card required. Start building immediately.

<!-- With divider line -->
<div class="eb-numbered blue">
  <span class="eb-num">01</span>
  <span class="eb-num-divider"></span>
  Discovery
</div>

<!-- With circle number -->
<div class="eb-numbered blue">
  <span class="eb-num-circle">01</span>
  Getting Started
</div>

<h2 class="eb-heading">Heading Text</h2>

.eb-numbered {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.eb-num {
  font-family: 'DM Serif Display', serif;
  font-size: 20px; color: #3b82f6;
}
.eb-num-divider {
  width: 1px; height: 20px;
  background: rgba(59,130,246,.3);
}
.eb-num-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  background: rgba(59,130,246,.15);
  color: #93c5fd;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
}

07 — Multi-Tag

Tag + Dot Separator

Multiple eyebrow labels separated by dots or slashes. Great for showing category, date, read time, or other metadata above a heading.

Dot / slash separators TAGS

Design Tutorial 8 Min Read

Mastering Color Theory

A practical guide to choosing colors that work together and convey the right emotion.

Engineering Apr 2025 Advanced

Optimizing React Renders

Techniques for eliminating unnecessary re-renders and keeping your app snappy.

Product / Announcement / 2025

Introducing Teams

Collaborate in real-time with shared workspaces, permissions, and audit logs.

5 min Guide Featured

Getting Started Guide

Everything you need to know to be productive in your first 10 minutes.

<!-- Dot separators -->
<div class="eb-tags blue">
  <span class="eb-tag-item">Design</span>
  <span class="eb-tag-dot"></span>
  <span class="eb-tag-item">Tutorial</span>
  <span class="eb-tag-dot"></span>
  <span class="eb-tag-item">8 Min Read</span>
</div>

<!-- Slash separators -->
<div class="eb-tags teal">
  <span class="eb-tag-item">Product</span>
  <span class="eb-tag-slash">/</span>
  <span class="eb-tag-item">Announcement</span>
</div>

.eb-tags {
  display: flex;
  align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
}
.eb-tag-item {
  text-transform: uppercase;
  letter-spacing: .06em;
}
.eb-tags.blue .eb-tag-item {
  color: rgba(59,130,246,.6);
}
.eb-tag-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(59,130,246,.3);
}
.eb-tag-slash {
  color: rgba(255,255,255,.1);
  font-size: 13px;
}

08 — Motion

Animated Eyebrow

Eyebrow text with entrance or looping animations — pulse glow, slide-in, typewriter, and underline reveal. Use sparingly for hero sections.

@keyframes animations ANIMATED

Now Available

Pulse Glow Effect

Subtle opacity pulsing draws attention without being distracting. Great for "new" labels.

Latest Update

Slide-In Entrance

Eyebrow slides up from below with a fade. Clean entrance for scroll-triggered sections.

What we do best —

Typewriter Effect

Characters appear one by one with a blinking cursor. High-impact for hero sections.

Featured Project

Underline Reveal

A line scales in from left to right beneath the text. Elegant and minimal animation.

<!-- Pulse glow -->
<div class="eb-anim-glow">
  <i class="ph ph-sparkle"></i> Now Available
</div>

<!-- Slide in -->
<div class="eb-anim-slide">Latest Update</div>

<!-- Typewriter -->
<div class="eb-anim-type">What we do best &mdash;</div>

<!-- Underline reveal -->
<div class="eb-anim-underline">Featured Project</div>

/* Pulse Glow */
.eb-anim-glow {
  color: rgba(168,85,247,.7);
  animation: ebPulse 2s ease-in-out infinite;
}
@keyframes ebPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

/* Slide In */
.eb-anim-slide {
  animation: ebSlideIn .6s ease-out both;
}
@keyframes ebSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Typewriter */
.eb-anim-type {
  font-family: 'Space Mono', monospace;
  border-right: 2px solid rgba(20,184,166,.5);
  white-space: nowrap; overflow: hidden;
  width: 0;
  animation:
    ebType 2s steps(20) .5s forwards,
    ebBlink .7s step-end infinite;
}
@keyframes ebType { to { width: 22ch; } }
@keyframes ebBlink { 50% { border-color: transparent; } }

/* Underline Reveal */
.eb-anim-underline {
  position: relative; padding-bottom: 4px;
}
.eb-anim-underline::after {
  content: ''; position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: #f59e0b;
  transform: scaleX(0);
  transform-origin: left;
  animation: ebUnderline .8s ease-out .3s forwards;
}
@keyframes ebUnderline { to { transform: scaleX(1); } }