@violetprotocol/nudge-components/src/atoms/Typography/Typography.css

Components for Nudge's websites and applications.

.typography-h1 {
  @apply text-[60px] leading-[60px] tracking-[-.04] font-dmsans;
}

.typography-h2 {
  @apply text-[48px] leading-[48px] tracking-[-.04] font-dmsans;
}

.typography-h3 {
  @apply text-[40px] leading-[48px] tracking-[-.03] font-dmsans;
}

.typography-h4 {
  @apply text-[36px] leading-[40px] tracking-[-.02] font-dmsans;
}

.typography-h5 {
  @apply text-[30px] leading-[36px] tracking-[-.02] font-dmsans;
}

.typography-display-xl {
  @apply text-[96px] leading-[96px] tracking-[-.04] font-dmsans;
}

.typography-display-lg {
  @apply text-[72px] leading-[72px] tracking-[-.04] font-dmsans;
}

.typography-display-md {
  @apply text-[64px] leading-[64px] tracking-[-.04] font-dmsans;
}

.typography-display-sm {
  @apply text-[48px] leading-[48px] tracking-[-.04] font-dmsans;
}

.typography-display-xs {
  @apply text-[36px] leading-[36px] tracking-[-.04] font-dmsans;
}

.typography-p-tiny {
  @apply text-[10px] leading-[16px] font-inter;
}

.typography-p-xs {
  @apply text-[12px] leading-[16px] tracking-[-.04] font-inter;
}

.typography-p-sm {
  @apply text-[14px] leading-[20px] tracking-[-.04] font-inter;
}

.typography-p {
  @apply text-[16px] leading-[24px] tracking-[-.04] font-inter;
}

.typography-p-leading {
  @apply text-[18px] leading-[28px] tracking-[-.04] font-inter;
}

.typography-p-subheading-sm {
  @apply text-[20px] leading-[28px] tracking-[-.04] font-inter;
}

.typography-p-subheading {
  @apply text-[24px] leading-[32px] tracking-[-.04] font-inter;
}

.typography-p-brand-sm {
  @apply font-bold text-[14px] leading-[20px] tracking-[-.04] font-inter;
}