Colour

Visual colour value.

html

<div class="co-wrap">
  <div class="co-row">
    <div class="co-chip" style="background:#BFD9F2;">bg</div>
    <div class="co-chip" style="color:#BFD9F2;">text</div>
    <div class="co-chip" style="border-color:#BFD9F2;">border</div>
  </div>
  <p class="co-caption">One value, #BFD9F2, applied wherever a colour property accepts it.</p>
</div>
<style>
.co-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }
.co-row { display: flex; gap: 10px; }
.co-chip { flex: 1; height: 64px; border-radius: 8px; border: 3px solid transparent; background: #FAF7F2; display: flex; align-items: center; justify-content: center; font-weight: 700; box-sizing: border-box; }
.co-caption { margin: 12px 0 0; font-size: 12px; color: #241430cc; }
</style>

tailwind

<div class="font-sans text-[#241430] w-[300px]">
  <div class="flex gap-2.5">
    <div class="flex-1 h-16 rounded-lg border-[3px] border-transparent flex items-center justify-center font-bold box-border" style="background:#BFD9F2;">bg</div>
    <div class="flex-1 h-16 rounded-lg border-[3px] border-transparent bg-[#FAF7F2] flex items-center justify-center font-bold box-border" style="color:#BFD9F2;">text</div>
    <div class="flex-1 h-16 rounded-lg bg-[#FAF7F2] flex items-center justify-center font-bold box-border border-[3px]" style="border-color:#BFD9F2;">border</div>
  </div>
  <p class="mt-3 text-xs text-[#241430]/80">One value, #BFD9F2, applied wherever a colour property accepts it.</p>
</div>

react

export function ColourDemo({
  colorValue = "#BFD9F2",
  onBackground = true,
  onText = true,
  onBorder = true,
}) {
  const chip = { flex: 1, height: 64, borderRadius: 8, border: "3px solid transparent", background: "#FAF7F2", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 700, boxSizing: "border-box" };
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", width: 300 }}>
      <div style={{ display: "flex", gap: 10 }}>
        <div style={{ ...chip, background: onBackground ? colorValue : "#e5e5e5" }}>bg</div>
        <div style={{ ...chip, color: onText ? colorValue : "#999999" }}>text</div>
        <div style={{ ...chip, borderColor: onBorder ? colorValue : "#cccccc" }}>border</div>
      </div>
      <p style={{ marginTop: 12, fontSize: 12, color: "#241430cc" }}>One value, {colorValue}, applied wherever a colour property accepts it.</p>
    </div>
  );
}