29:["$","div",null,{"children":[["$","div","0",{"className":"mb-8","children":["$undefined",["$","p",null,{"className":"text-text-dim leading-relaxed mb-4","children":[["$","$1","g0-0",{"children":"Tailwind ships a carefully tuned colour palette with 10 shades of 22 colours. Each colour is available for text (`text-blue-500`), backgrounds (`bg-blue-500`), borders (`border-blue-500`), and more."}]]}],"$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Colour and typography classes"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"\n

Muted body text

Page heading

\nAccent text\n\n\n

White card

Light grey background

Blue filled section

\n\n\n

Card with border

Bottom divider

"}]}]]}],"$undefined","$undefined","$undefined"]}],["$","div","1",{"className":"mb-8","children":[["$","h2",null,{"id":"typography-utilities","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Typography utilities"}],"$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Text styling reference"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"\ntext-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl\n\n\nfont-normal font-medium font-semibold font-bold\n\n\nleading-none leading-tight leading-normal leading-relaxed leading-loose\n\n\ntracking-tight tracking-normal tracking-wide\n\n\ntext-left text-center text-right\n\n\nunderline line-through no-underline\nuppercase lowercase capitalize"}]}]]}],"$undefined","$undefined","$undefined"]}],["$","div","2",{"className":"mb-8","children":[["$","h2",null,{"id":"the-colour-shade-system","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"The colour shade system"}],"$undefined","$undefined","$undefined","$undefined",["$","div",null,{"className":"flex gap-3 p-4 rounded border border-amber/20 bg-amber-muted/15 mb-4","children":[["$","div",null,{"className":"w-5 h-5 rounded border border-amber/40 bg-amber-muted flex items-center justify-center shrink-0 mt-0.5","children":["$","span",null,{"className":"text-amber text-xs font-bold","children":"!"}]}],["$","div",null,{"children":[["$","p",null,{"className":"text-xs font-semibold text-amber mb-0.5","children":"50 is lightest, 950 is darkest"}],["$","p",null,{"className":"text-sm text-text-dim leading-relaxed","children":"gray-50 is near-white, gray-500 is mid-grey, gray-900 is near-black. For body text on white: gray-700 or gray-800. For muted labels: gray-500. For headings: gray-900. For backgrounds: gray-50 or gray-100."}]]}]]}],"$undefined"]}],["$","div","3",{"className":"mb-8","children":["$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"]}]]}]

Colours and Typography