open-design/skills/replit-deck/references/components.md

Components · replit-deck

Small shared primitives you'll compose slides from. None of these should be edited per-slide beyond the [REPLACE] content slots. If you find yourself rewriting the CSS of a component, you're fighting the theme — pick a different layout instead.

---

meta-bar

Top-row brand / context / page. Every slide has one.

<div class="meta-bar">
  <span>[REPLACE] BRAND · CONTEXT</span>
  <span>[REPLACE] NN / NN</span>
</div>

• Mono, uppercase, 11px, tracked 0.1em, --muted color.
• On vance, meta-bar sits inside the black top band (.vance-top) and gets 3 columns.

---

eyebrow

Section kicker above the slide headline.

<p class="eyebrow">SECTION EYEBROW · OPTIONAL DATE</p>
<p class="eyebrow accent">COLORED VARIANT</p>

• Default: --muted.
• .eyebrow.accent → --accent color. Use once per slide, sparingly.
• On atlas/holm add a em-dash prefix: —   CHAPTER ONE ….

---

numeric display (.num, .num-label, .num-delta)

The single most important primitive for helix / world / atlas.

<div>
  <div class="num-label">Annual Recurring Revenue</div>
  <div class="num">$1.37B</div>
  <div class="num-delta">▲ 38% YoY</div>
</div>

• .num is the display typeface, 48–84px, line-height 1, tight tracking.
• .num-delta is mono, --accent color. Use ▲ / ▼ Unicode — never an emoji.
• Don't wrap a number in a colored background. Number = chromatic anchor.

---

bevel-frame (bevel only)

Dashed neon rectangle with corner dots.

<div class="bevel-frame">
  <!-- product photo or campaign image inside -->
</div>

• Already has ::before / ::after neon dots on diagonal corners.
• Do NOT fill the frame with neon. Frame is 1px dashed border; fill is image or muted bg.

---

world-marker (world-* only)

Small yellow square used inline next to section titles.

<span class="world-marker"></span>

• 14×14px, flat color, no animation.
• Appears at most twice on one slide.

---

atlas-dot (atlas only)

Small vermilion disc used as chapter mark or list bullet.

<span class="atlas-dot"></span>

• 10×10px. Smaller (6×6) variant manually sized for the inline EXHIBIT 04.B tag.

---

bh-card (bluehouse only)

Colored card in the consumer-grid row.

<div class="bh-card peach">…</div>
<div class="bh-card coral">…</div>
<div class="bh-card lavender">…</div>

• peach = flat warm sand.
• coral = coral→peach 135° gradient.
• lavender = cool lavender→blue 180° gradient.
• Interior: flex column, justify-content: space-between — put icons/meta top, numbers bottom.
• Always border-radius: 24px, always 4:3 aspect unless explicitly broken for layout reasons.

---

progress + counter chrome (auto)

You do not author these. The seed ships with:

<div class="deck-progress" id="deck-progress"></div>
<div class="deck-counter"  id="deck-counter">1 / 3</div>
<div class="deck-hint">← / → · scroll · swipe</div>

…and the <script> auto-updates on scroll / key. Leave them alone.

---

Content-type cross-reference

Content you need to show	Primitive(s)
A single number	.num alone, centered
A row of metrics	.num-label + .num + .num-delta, grid-6
A brand wordmark	plain <span> in meta-bar, serif display, 22-32px
A section divider	centered .h-hero on a slide of its own (same theme — never swap data-theme mid-deck)
A call-out stat with context	.num (big) + .lead (small) paired
A pull-quote	.h-xl in display serif, — Attribution in mono small-caps

---

What not to component-ify

Resist creating: .card.featured, .hero-v2, .metric-fancy. These bloat the seed and make the deck drift toward "shadcn demo". The 10 layouts × 8 themes already compose into >50 distinct slide archetypes — that's enough.