Typography Token

Named typography value.

--heading-lg: bold 24px;

Sample text

Sample text

Sample text

html

<div class="typok">
  <code class="typok__code">--heading-lg: bold 24px;</code>
  <p class="typok__sample typok__sample--regular" style="font-size:24px;color:#241430;">Sample text</p>
  <p class="typok__sample typok__sample--medium" style="font-size:24px;color:#241430;">Sample text</p>
  <p class="typok__sample typok__sample--bold" style="font-size:24px;color:#241430;">Sample text</p>
</div>
<style>
.typok { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.typok__code { display: block; margin-bottom: 16px; padding: 8px 10px; background: #24143012; border-radius: 6px; font: 11px/1.4 ui-monospace, monospace; }
.typok__sample { display: none; margin: 0; }
.typok--x{}
.typok .typok__sample--regular { font-weight: 400; }
.typok .typok__sample--medium { font-weight: 600; }
.typok .typok__sample--bold { font-weight: 800; }
.typok--regular .typok__sample--regular, .typok--medium .typok__sample--medium, .typok--bold .typok__sample--bold { display: block; }
</style>

tailwind

<div class="typoktw typoktw--bold font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border">
  <code class="block mb-4 px-2.5 py-2 bg-[#24143012] rounded-md text-[11px] font-mono">--heading-lg: bold 24px;</code>
  <p class="typoktw__sample typoktw__sample--regular hidden m-0 font-normal" style="font-size:24px;color:#241430;">Sample text</p>
  <p class="typoktw__sample typoktw__sample--medium hidden m-0 font-semibold" style="font-size:24px;color:#241430;">Sample text</p>
  <p class="typoktw__sample typoktw__sample--bold hidden m-0 font-extrabold" style="font-size:24px;color:#241430;">Sample text</p>
</div>
<style>
.typoktw--regular .typoktw__sample--regular, .typoktw--medium .typoktw__sample--medium, .typoktw--bold .typoktw__sample--bold { display: block; }
</style>

react

export function TypographyToken({
  name = "heading-lg",
  sizeValue = 24,
  weight = "bold",
  accent = "#241430",
}) {
  const fontWeight = { regular: 400, medium: 600, bold: 800 }[weight];
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <code style={{ display: "block", marginBottom: 16, padding: "8px 10px", background: "#24143012", borderRadius: 6, font: "11px/1.4 ui-monospace, monospace" }}>--{name}: {weight} {sizeValue}px;</code>
      <p style={{ margin: 0, fontSize: sizeValue, color: accent, fontWeight }}>Sample text</p>
    </div>
  );
}