Design Primitive

Fundamental visual/interaction building block.

html

<div class="prim prim--box">
  <div class="prim__shape prim__shape--box" style="width:48px;height:48px;background:#E8A020;"></div>
  <div class="prim__shape prim__shape--text" style="font-size:48px;color:#E8A020;">Aa</div>
  <div class="prim__shape prim__shape--icon" style="width:48px;height:48px;background:#E8A020;"></div>
  
  <p class="prim__composed prim__composed--box">Box &rarr; composes into Card, Panel, Avatar frame</p>
  <p class="prim__composed prim__composed--text">Text &rarr; composes into Label, Heading, Caption</p>
  <p class="prim__composed prim__composed--icon">Icon &rarr; composes into Button icon, Status dot</p>
  
</div>
<style>
.prim { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 260px; box-sizing: border-box; text-align: center; }
.prim__shape { display: none; margin: 0 auto 14px; }
.prim__shape--box { border-radius: 10px; }
.prim__shape--icon { border-radius: 50%; }
.prim__shape--text { font-weight: 700; }
.prim--box .prim__shape--box, .prim--text .prim__shape--text, .prim--icon .prim__shape--icon { display: block; }
.prim__composed { display: none; margin: 0; font-size: 12px; color: #24143099; }
.prim--box .prim__composed--box, .prim--text .prim__composed--text, .prim--icon .prim__composed--icon { display: block; }
</style>

tailwind

<div class="primtw primtw--box font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[260px] box-border text-center">
  <div class="primtw__shape primtw__shape--box hidden mx-auto mb-3.5 rounded-[10px]" style="width:48px;height:48px;background:#E8A020;"></div>
  <div class="primtw__shape primtw__shape--text hidden mx-auto mb-3.5 font-bold" style="font-size:48px;color:#E8A020;">Aa</div>
  <div class="primtw__shape primtw__shape--icon hidden mx-auto mb-3.5 rounded-full" style="width:48px;height:48px;background:#E8A020;"></div>
  
  <p class="primtw__composed primtw__composed--box hidden m-0 text-xs text-[#24143099]">Box &rarr; composes into Card, Panel, Avatar frame</p>
  <p class="primtw__composed primtw__composed--text hidden m-0 text-xs text-[#24143099]">Text &rarr; composes into Label, Heading, Caption</p>
  <p class="primtw__composed primtw__composed--icon hidden m-0 text-xs text-[#24143099]">Icon &rarr; composes into Button icon, Status dot</p>
  
</div>
<style>
.primtw--box .primtw__shape--box, .primtw--text .primtw__shape--text, .primtw--icon .primtw__shape--icon { display: block; }
.primtw--box .primtw__composed--box, .primtw--text .primtw__composed--text, .primtw--icon .primtw__composed--icon { display: block; }
</style>

react

export function DesignPrimitive({
  primitive = "box",
  size = 48,
  accent = "#E8A020",
  showComposedInto = true,
}) {
  const composed = {
    box: "Box \u2192 composes into Card, Panel, Avatar frame",
    text: "Text \u2192 composes into Label, Heading, Caption",
    icon: "Icon \u2192 composes into Button icon, Status dot",
  }[primitive];
  const shape = primitive === "text"
    ? <div style={{ fontSize: size, color: accent, fontWeight: 700, margin: "0 auto 14px" }}>Aa</div>
    : <div style={{ width: size, height: size, background: accent, margin: "0 auto 14px", borderRadius: primitive === "icon" ? "50%" : 10 }} />;
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 260, boxSizing: "border-box", textAlign: "center" }}>
      {shape}
      {showComposedInto && <p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>{composed}</p>}
    </div>
  );
}