Typography
Heading three
Body copy renders at text-base in text-gray-900, with mb-6 and leading-[1.75]. Here is alink utility and here is some emphasis plus strong text.
- Unordered list item — marker is
text-gray-400 - Second item with a longer line so wrapping and the
pl-2indent are visible
- Ordered list item — marker is
font-semibold - Second item
Buttons
Variants
Sizes
Surfaces & radius
rounded-smlink-card hover
rounded-mdbuttons, inputs, inline code
rounded-lgnav links, dialogs
rounded-xlimages, cards
rounded-fullavatars, icon buttons
Backgrounds
link-card & thumbnail-shadow
Colors
bg-white
bg-zinc-50
bg-gray-100
bg-gray-200
bg-black
blue-600
Syntax tokens
--sh-identifier--sh-sign--sh-property--sh-entity--sh-jsxliterals--sh-string--sh-keyword--sh-comment
Code
const answer = 42console.log(answer)// line numbers come from counter(sh-line-number)Reveal animation
Breakpoint indicator
Current breakpoint:base < 390px