Typography
Typography uses system-first sans and monospace families. Heading roles combine size, tight line height, emphasis, and restrained tracking without loading a mandatory web font.
| Kind | Token | Value / reference | CSS variable |
|---|---|---|---|
| Primitive | font.family.mono | ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | --combric-primitive-font-family-mono |
| Primitive | font.family.sans | Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif | --combric-primitive-font-family-sans |
| Primitive | font.size.2xl | 2rem | --combric-primitive-font-size-2xl |
| Primitive | font.size.lg | 1.25rem | --combric-primitive-font-size-lg |
| Primitive | font.size.md | 1rem | --combric-primitive-font-size-md |
| Primitive | font.size.sm | 0.875rem | --combric-primitive-font-size-sm |
| Primitive | font.size.xl | 1.5rem | --combric-primitive-font-size-xl |
| Primitive | font.size.xs | 0.75rem | --combric-primitive-font-size-xs |
| Primitive | font.weight.bold | 700 | --combric-primitive-font-weight-bold |
| Primitive | font.weight.medium | 500 | --combric-primitive-font-weight-medium |
| Primitive | font.weight.regular | 400 | --combric-primitive-font-weight-regular |
| Primitive | font.weight.semibold | 600 | --combric-primitive-font-weight-semibold |
| Primitive | letter.spacing.normal | 0 | --combric-primitive-letter-spacing-normal |
| Primitive | letter.spacing.tight | -0.01em | --combric-primitive-letter-spacing-tight |
| Primitive | line.height.body | 1.5 | --combric-primitive-line-height-body |
| Primitive | line.height.relaxed | 1.65 | --combric-primitive-line-height-relaxed |
| Primitive | line.height.tight | 1.2 | --combric-primitive-line-height-tight |
| Semantic | font.family.body | font.family.sans → Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif | --combric-font-family-body |
| Semantic | font.family.code | font.family.mono → ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace | --combric-font-family-code |
| Semantic | font.size.body | font.size.md → 1rem | --combric-font-size-body |
| Semantic | font.size.heading.lg | font.size.2xl → 2rem | --combric-font-size-heading-lg |
| Semantic | font.size.heading.md | font.size.xl → 1.5rem | --combric-font-size-heading-md |
| Semantic | font.size.heading.sm | font.size.lg → 1.25rem | --combric-font-size-heading-sm |
| Semantic | font.size.small | font.size.sm → 0.875rem | --combric-font-size-small |
| Semantic | font.weight.body | font.weight.regular → 400 | --combric-font-weight-body |
| Semantic | font.weight.emphasis | font.weight.semibold → 600 | --combric-font-weight-emphasis |
| Semantic | letter.spacing.heading | letter.spacing.tight → -0.01em | --combric-letter-spacing-heading |
| Semantic | line.height.body | line.height.body → 1.5 | --combric-line-height-body |
| Semantic | line.height.heading | line.height.tight → 1.2 | --combric-line-height-heading |