> ## Oymyakon DS index > Fetch the full index at: https://super-dollop-pzmo65r.pages.github.io/llms.txt > HTML preview: https://super-dollop-pzmo65r.pages.github.io/typography.html > Source: tokens/rules/typography-rules.md, tokens/generated/typography.css --- # Typography Rules (Oymyakon DS ยท Typography 3.3.0) Source: Figma โ€” `๐Ÿ•น๏ธ Oymyakon 3.20.0 (components)`. All text styles live in the **Styles panel** (Text Styles). The `SP` variable collection contains universal sizing tokens. | Category | Purpose | |---|---| | `Heading` | Heading styles โ€” from Promo to Heading 4 | | `Body` | Main content โ€” Promo Body, Body Paragraph, Main Body, Compact Body | | `Link` | Underlined links โ€” Main Link, Compact Link | | `Caption` | Small text โ€” technical data, legal copy | | `SP` | Universal sizing tokens: spacing, radius, border, sizing, font-size, line-height | Read these rules **before every task** that involves typography: when building a component, describing layout in a spec, or reviewing designs. --- ## 0. General Principles ### 0.1 Oymyakon Typefaces The DS uses two typefaces: | Typeface | Role | |---|---| | `PP Agrandir` | Display / Promo โ€” large headings (Promo Heading, Heading 1, Heading 2). Weight `700` (Bold) only. | | `Suisse Intl` | UI โ€” everything else: Heading 3โ€“4, Body, Link, Caption. Weights: `400` (Regular), `600` (SemiBold), `700` (Bold). | **Rule**: PP Agrandir is used only for large headings. Never apply it to body text or small UI elements. The single button that carries it is `Main CTA`, through `Heading 2`; every other button label is Suisse Intl. ### 0.2 Where to Find in Figma - `Styles panel` โ†’ `Text Styles` section โ€” all text styles. - `Variables panel` โ†’ `SP` collection โ€” spacing variables with three scaling modes. ### 0.3 Style Naming Format: `Group/Name`, where Group is the category (`Heading`, `Body`, `Link`, `Caption`). ``` Heading/Promo Heading Heading/Heading 1 Body/Main Body Link/Main Link Caption/Caption ``` ### 0.4 Description Tone - Style purpose descriptions are neutral. - Each line is one rule or one value. - Inside specs โ€” English. Chat communication โ€” Russian. --- ## 1. Typography System Structure ### 1.1 Hierarchy ``` PP Agrandir (Display) โ””โ”€โ”€ Promo Heading 40px / 44lh / 700 โ””โ”€โ”€ Heading 1 32px / 36lh / 700 โ””โ”€โ”€ Heading 2 24px / 28lh / 700 Suisse Intl (UI) โ””โ”€โ”€ Heading 3 20px / 28lh / 700 โ””โ”€โ”€ Heading 4 17px / 20lh / 600 โ””โ”€โ”€ Promo Body 20px / 28lh / 400 โ””โ”€โ”€ Body Paragraph 16px / 24lh / 400 โ””โ”€โ”€ Main Body 16px / 20lh / 400 โ””โ”€โ”€ Compact Body 14px / 16lh / 400 โ””โ”€โ”€ Main Link 16px / 20lh / 400 + underline โ””โ”€โ”€ Compact Link 14px / 16lh / 400 + underline โ””โ”€โ”€ Caption 12px / 16lh / 400 ``` ### 1.2 Two System Levels 1. **Text Styles** โ€” styles in the Styles panel. Applied directly to text layers. Contain `fontFamily`, `fontWeight`, `fontSize`, `lineHeight`, `letterSpacing`, `textDecoration`. 2. **SP tokens (Spacing)** โ€” numeric variables in the `SP` collection. Control spacing, sizing, and gaps. Have three modes: `100%` (base), `130%` (large), `150%` (maximum). --- ## 2. `Heading` Group 5 heading styles. The first three use PP Agrandir, the last two use Suisse Intl. | Token | Font | Weight | Size | Line Height | Letter Spacing | Usage | |---|---|---|---|---|---|---| | `Heading/Promo Heading` | PP Agrandir | 700 | 40px | 44px | 0% | Large screen heading โ€” promo materials, stories | | `Heading/Heading 1` | PP Agrandir | 700 | 32px | 36px | 0% | Primary screen heading โ€” map status screens, standalone screens, rating modals | | `Heading/Heading 2` | PP Agrandir | 700 | 24px | 28px | 0% | Second-level heading for nested sections; the `Main CTA` button label | | `Heading/Heading 3` | Suisse Intl | 700 | 20px | 28px | 0% | Third level โ€” cannot be the main heading of a page or bottom sheet | | `Heading/Heading 4` | Suisse Intl | 600 | 17px | 20px | 0% | Highlighted states in pricing lists; small headings; emphasized parts of body text; the `L` button label | **Heading selection rules:** 1. `Promo Heading` / `Heading 1` โ€” screen level only. Do not use inside cards or lists. 2. `Heading 2` as button text โ€” only for `Main CTA`, the screen-level action. Button labels by size: `Main CTA` โ†’ `Heading 2`, `L` โ†’ `Heading 4`, `M` and `S` โ†’ `Main Body`. The label follows the **size**, not the `Style` axis โ€” a `Style=Primary` button at `M` still uses `Main Body`. 3. `Heading 3` cannot be the sole primary heading of a screen or bottom sheet โ€” nested use only. 4. `Heading 4` โ€” emphasis within text, not a standalone block. --- ## 3. `Body` Group 4 styles for main content. All use Suisse Intl. | Token | Font | Weight | Size | Line Height | Letter Spacing | Usage | |---|---|---|---|---|---|---| | `Body/Promo Body` | Suisse Intl | 400 | 20px | 28px | 0% | Body text on promo screens | | `Body/Body Paragraph` | Suisse Intl | 400 | 16px | 24px | 0% | Long text blocks with increased line spacing | | `Body/Main Body` | Suisse Intl | 400 | 16px | 20px | 0% | Subtitles; the `M` and `S` button labels | | `Body/Compact Body` | Suisse Intl | 400 | 14px | 16px | 0% | Dense UI elements: switch, chips. Not for primary text | **Body selection rules:** 1. Default for body content โ€” `Main Body`. 2. `Body Paragraph` โ€” only for long-form reads and documents where multi-line readability matters. 3. `Promo Body` โ€” only for promo screens paired with `Heading/Promo Heading` or `Heading 1`. 4. `Compact Body` โ€” exclusively for dense components. Do not use as a substitute for `Main Body` to save space. --- ## 4. `Link` Group 2 link styles. Visually identical to Body styles but with `textDecoration: underline`. | Token | Font | Weight | Size | Line Height | Text Decoration | Usage | |---|---|---|---|---|---|---| | `Link/Main Link` | Suisse Intl | 400 | 16px | 20px | underline | Links within body text, inline navigation | | `Link/Compact Link` | Suisse Intl | 400 | 14px | 16px | underline | Links inside dense components (chips, tags, small blocks) | **Rules:** 1. Links always have `underline` โ€” do not replace with color as the sole indicator. 2. `Main Link` matches `Body/Main Body` โ€” use in the same contexts. 3. `Compact Link` matches `Body/Compact Body` โ€” use in the same dense components. 4. Link color โ€” `TextAndIcon/Accent` (see `color-rules.md`, section 3). --- ## 5. `Caption` Group 1 style for small technical text. | Token | Font | Weight | Size | Line Height | Usage | |---|---|---|---|---|---| | `Caption/Caption` | Suisse Intl | 400 | 12px | 16px | Technical data, long legal copy, footnotes | **Rules:** 1. `Caption` โ€” only for supplementary content that is not the primary content. 2. Minimum text size in the DS โ€” 12px (`Caption`). Sizes below 12px are not permitted. 3. Caption color โ€” `TextAndIcon/Secondary` (see `color-rules.md`, section 3). --- ## 6. SP Collection (Spacing) Numeric variables for spacing and sizing. The `SP` collection in the Variables panel. Three scaling modes: | Mode | Multiplier | Purpose | |---|---|---| | `100%` | ร—1.0 | Base (standard display) | | `130%` | ร—1.3 | Large text (system setting) | | `150%` | ร—1.5 | Maximum (accessibility) | ### 6.1 Base Steps (100% ratio) Grid step โ€” **4px**. Available values: | Token | Value (100%) | |---|---| | `SP/100% ratio/s0` | 0px | | `SP/100% ratio/s2` | 2px | | `SP/100% ratio/s4` | 4px | | `SP/100% ratio/s6` | 6px | | `SP/100% ratio/s8` | 8px | | `SP/100% ratio/s10` | 10px | | `SP/100% ratio/s12` | 12px | | `SP/100% ratio/s14` | 14px | | `SP/100% ratio/s16` | 16px | | `SP/100% ratio/s20` | 20px | | `SP/100% ratio/s24` | 24px | | `SP/100% ratio/s28` | 28px | | `SP/100% ratio/s32` | 32px | | `SP/100% ratio/s36` | 36px | | `SP/100% ratio/s40` | 40px | | `SP/100% ratio/s44` | 44px | | `SP/100% ratio/s48` | 48px | | `SP/100% ratio/s52` | 52px | | `SP/100% ratio/s56` | 56px | | `SP/100% ratio/s60` | 60px | | `SP/100% ratio/s64` | 64px | | `SP/100% ratio/s68` | 68px | | `SP/100% ratio/s72` | 72px | | `SP/100% ratio/s76` | 76px | | `SP/100% ratio/s80` | 80px | | `SP/100% ratio/s84` | 84px | | `SP/100% ratio/s88` | 88px | | `SP/100% ratio/s92` | 92px | | `SP/100% ratio/s96` | 96px | > `s17` is marked `(Don't use)` โ€” do not apply. ### 6.2 Adaptive Steps (130% and 150%) `130% ratio` steps scale ร—1.3, `150% ratio` steps scale ร—1.5 from the base value. Example: `s24` โ†’ 100%: 24px / 130%: 31.2px / 150%: 36px. Important: when using SP tokens in code, always bind to the **variable** with the required multiplier, not to a raw number. ### 6.3 SP Usage Rules 1. Use only values from the `SP` scale. Arbitrary numbers are only allowed in approved exceptions. 2. 4px step โ€” the minimum unit. Values `2px` and `6px` are exceptions for border-radius and small gaps. 3. Never use `s17` (`(Don't use)` in Figma). 4. For adaptive interfaces, use SP variables with the appropriate mode โ€” do not hardcode numbers. --- ## 7. Typography Scaling Rules When switching the SP mode (100% โ†’ 130% โ†’ 150%), text styles scale differently. This is the universal rule for the entire project โ€” components, specs, generators. | Style | Rule | 100% | 130% | 150% | |---|---|---|---|---| | `Heading/Promo Heading` | fixed | 40px | 40px | 40px | | `Heading/Heading 1` | fixed | 32px | 32px | 32px | | `Heading/Heading 2` | cap at 130% | 24px | 31.2px | 31.2px | | `Heading/Heading 3` | cap at 130% | 20px | 26px | 26px | | `Heading/Heading 4` | full scaling | 17px | 22.1px | 25.5px | | `Body/Promo Body` | cap at 130% | 20px | 26px | 26px | | `Body/Body Paragraph` | full scaling | 16px | 20.8px | 24px | | `Body/Main Body` | full scaling | 16px | 20.8px | 24px | | `Body/Compact Body` | full scaling | 14px | 18.2px | 21px | | `Link/Main Link` | full scaling | 16px | 20.8px | 24px | | `Link/Compact Link` | full scaling | 14px | 18.2px | 21px | | `Caption/Caption` | full scaling | 12px | 15.6px | 18px | **Three scaling modes:** | Mode | Behavior | |---|---| | `fixed` | Size does not change at any step | | `cap130` | Grows to 130%, stays at the 130% value at the 150% step | | `full` | Scales fully: ร—1.3 at 130%, ร—1.5 at 150% | **Rules:** 1. Large headings (`Promo Heading`, `Heading 1`) are fixed โ€” they are already large enough and further growth breaks the layout. 2. `Heading 2`, `Heading 3`, `Promo Body` are capped at 130% โ€” intermediate headings must not pull visual weight away from smaller styles. 3. `Heading 4` scales fully, even though its base value of 17px falls outside the SP scale. 4. All Body, Link, and Caption styles scale fully โ€” this is critical for accessibility. --- ## 8. Elevation (Shadows) 3 shadow levels + 1 overlay for pressed states. | Token | CSS | Usage | |---|---|---| | `Elevation/S` | `box-shadow: 0px 2px 8px 0px rgba(50, 57, 65, 0.08)` | Subtle lift โ€” cards, chips | | `Elevation/M` | `box-shadow: 0px 4px 16px 0px rgba(50, 57, 65, 0.08)` | Mid level โ€” bottom sheets, modals | | `Elevation/L` | `box-shadow: 0px 1px 32px 0px rgba(50, 57, 65, 0.08)` | Maximum โ€” dropdown menus, tooltips | | `State/PressedStateOverlay` | `box-shadow: inset 999px 999px 0px 0px rgba(0, 0, 0, 0.1)` | Pressed state (inset overlay) | **Rules:** 1. Shadows escalate progressively: S โ†’ M โ†’ L. Do not apply L where S is sufficient. 2. `PressedStateOverlay` โ€” only for the pressed state of interactive elements. 3. In the Dark theme, shadows are visually weaker โ€” do not strengthen manually, do not change token values. --- ## 9. Style Selection โ€” Decision Tree 1. **Large screen heading / promo?** โ†’ `Heading/Promo Heading` or `Heading 1`. 2. **Second-level heading / `Main CTA` button label?** โ†’ `Heading/Heading 2`. 3. **Nested section heading?** โ†’ `Heading/Heading 3` or `Heading/Heading 4`. 4. **Primary content text?** โ†’ `Body/Main Body`. 5. **Long text (paragraphs)?** โ†’ `Body/Body Paragraph`. 6. **Text in compact elements (chips, switch)?** โ†’ `Body/Compact Body`. 7. **Link within text?** โ†’ `Link/Main Link` or `Link/Compact Link`. 8. **Technical data / legal copy / footnote?** โ†’ `Caption/Caption`. --- ## 10. Typography Spacing Base spacing for text blocks (values from the SP collection): | Context | SP Token | Value | |---|---|---| | Between H1 heading and body | `s16` | 16px | | Between H2 heading and body | `s12` | 12px | | Between Body Paragraph paragraphs | `s16` | 16px | | Between list items | `s8` | 8px | | Button padding (vertical) โ€” `L` | `s8` | 8px | | Button padding (vertical) โ€” `M` / `S` / `Main CTA` | โ€” | 0 โ€” height is fixed, the label is centred | | Button padding (horizontal) โ€” `L` / `M` / `S` | `s12` | 12px | | Button padding (horizontal) โ€” `Main CTA` | `s16` | 16px | | Card padding | `s16` | 16px | | Inner element gap | `s8` | 8px | --- ## 11. Accessibility (a11y) 1. Minimum size for interactive text โ€” `Body/Main Body` (16px). 2. `Caption` (12px) โ€” only for non-interactive content. 3. `TextAndIcon/Disabled` + `Caption` โ€” neither passes WCAG AA. This is acceptable per spec for disabled states. 4. Interactive text (`Link/*`) โ€” always with underline. Color as the sole indicator is not permitted. 5. SP tokens in `150%` mode โ€” for supporting system-level scaling for users with visual impairments. --- ## 12. What Is Prohibited - Applying PP Agrandir to body text, small UI elements, or any button other than `Main CTA`. - Using `Heading 3` as the sole / primary heading of a page. - Hardcoding font size without binding to a text style. - Using `s17` from the SP collection โ€” it is marked `(Don't use)`. - Setting spacing, radii, font sizes, or component sizes to values outside the SP scale (except approved exceptions: 0.5px border, 17px Heading 4). - Removing `underline` from `Link/*` โ€” links must be distinguishable by more than color alone. - Applying font sizes smaller than 12px (`Caption`) in any context. - Using an interactive element with a touch target smaller than 44px (`--sp-s44`). --- ## 13. Ready-Go Checklist Before Publishing a Design / Component - [ ] All text layers are bound to text styles (Dev Mode shows the style name, not raw values). - [ ] H1/H2 headings use PP Agrandir; H3/H4 and below use Suisse Intl. - [ ] Button labels follow the size: `Main CTA` โ€” `Heading/Heading 2`, `L` โ€” `Heading/Heading 4`, `M` and `S` โ€” `Body/Main Body`. - [ ] All links use `Link/*` with `underline`. - [ ] Spacing is bound to SP variables (`--sp-sN`), not raw numbers. - [ ] Border radii use `--sp-sN` from the SP scale. - [ ] Borders use `--sp-s2` (1px) or `--sp-s4` (2px). 0.5px dividers โ€” only as an explicit fixed value `0.5px`. - [ ] Component heights and widths use `--sp-sN`. Touch targets โ‰ฅ `--sp-s44` (44px). - [ ] Font sizes and line heights use `--sp-sN` from the SP scale. - [ ] Caption is used only for non-interactive supplementary text. - [ ] Component is verified with SP mode `130%` and `150%` (layout does not break). - [ ] Elevation is applied correctly by level S โ†’ M โ†’ L. --- ## 14. History Log | Version | Date | Author | Change | |---|---|---|---| | 1.0.0 | 2026-04-23 | Eugene Beloussov | Initial version of the rules based on `๐Ÿ•น๏ธ Oymyakon 3.20.0 (components)`. All text groups described (Heading, Body, Link, Caption), SP system with three scaling modes (100%/130%/150%), Elevation S/M/L shadows, a11y rules, and prohibitions. | | 3.1.0 | 2026-04-23 | Eugene Beloussov | SP expanded to a universal measurement scale. Section 6.4 (semantic aliases `--radius-*`, `--border-*`, `--size-*`, `--font-size-*`, `--line-height-*`) removed โ€” only raw `--sp-sN` variables are used. Updated "What Is Prohibited" and checklist sections. | | 3.2.0 | 2026-04-24 | Eugene Beloussov | Added section 7 "Typography Scaling Rules". Three modes: `fixed` (Promo Heading, H1), `cap130` (H2, H3, Promo Body), `full` (H4, all Body, Link, Caption). This rule is the universal law for the entire project. | | 3.3.0 | 2026-07-31 | Eugene Beloussov | Button typography corrected against Figma `[Button] 3.3`: the label follows the **size**, not the `Style` axis โ€” `Main CTA` โ†’ `Heading 2`, `L` โ†’ `Heading 4`, `M` / `S` โ†’ `Main Body`. The doc previously read "Primary โ€” Heading 2, all others โ€” Main Body", which misread the `Primary` colour style as the screen-level CTA. Removed the contradiction that barred PP Agrandir from every button while `Heading 2` was defined as CTA text โ€” `Main CTA` is the one exception. ยง10 button paddings realigned: vertical `s8` on `L` and 0 elsewhere, horizontal `s12` on `L`/`M`/`S` and `s16` on `Main CTA` (was a flat `s12`/`s20`). Header version synced with this changelog (read 3.1.0 while the log stood at 3.2.0). Related: `heading2` line-height fixed in the DTCG source (`1` โ†’ `1.166667`, restoring the 24 / 28 this doc already specified). | > New updates are formatted as a separate `Update X.Y` frame in the components file, then transferred to this document. --- ## Generated tokens โ€” `tokens/generated/typography.css` ```css /* ================================================================ * Oymyakon Design System โ€” Typography Tokens (typography.css) * AUTO-GENERATED by build-dtcg.js โ€” DO NOT EDIT MANUALLY * Source: tokens/src/typography/text-styles.json * ================================================================ */ :root { /* โ”€โ”€ heading โ”€โ”€ */ --text-heading-promo-heading-family: 'PP Agrandir'; --text-heading-promo-heading-weight: 700; --text-heading-promo-heading-size: 40px; --text-heading-promo-heading-line-height: 1.1; --text-heading-promo-heading-letter-spacing: 0px; --text-heading-heading1-family: 'PP Agrandir'; --text-heading-heading1-weight: 700; --text-heading-heading1-size: 32px; --text-heading-heading1-line-height: 1.125; --text-heading-heading1-letter-spacing: 0px; --text-heading-heading2-family: 'PP Agrandir'; --text-heading-heading2-weight: 700; --text-heading-heading2-size: 24px; --text-heading-heading2-line-height: 1.166667; --text-heading-heading2-letter-spacing: 0px; --text-heading-heading3-family: 'Suisse Intl'; --text-heading-heading3-weight: 700; --text-heading-heading3-size: 20px; --text-heading-heading3-line-height: 1.4; --text-heading-heading3-letter-spacing: 0px; --text-heading-heading4-family: 'Suisse Intl'; --text-heading-heading4-weight: 600; --text-heading-heading4-size: 17px; --text-heading-heading4-line-height: 1.176471; --text-heading-heading4-letter-spacing: 0px; /* โ”€โ”€ body โ”€โ”€ */ --text-body-promo-body-family: 'Suisse Intl'; --text-body-promo-body-weight: 400; --text-body-promo-body-size: 20px; --text-body-promo-body-line-height: 1.4; --text-body-promo-body-letter-spacing: 0px; --text-body-body-paragraph-family: 'Suisse Intl'; --text-body-body-paragraph-weight: 400; --text-body-body-paragraph-size: 16px; --text-body-body-paragraph-line-height: 1.5; --text-body-body-paragraph-letter-spacing: 0px; --text-body-main-body-family: 'Suisse Intl'; --text-body-main-body-weight: 400; --text-body-main-body-size: 16px; --text-body-main-body-line-height: 1.25; --text-body-main-body-letter-spacing: 0px; --text-body-compact-body-family: 'Suisse Intl'; --text-body-compact-body-weight: 400; --text-body-compact-body-size: 14px; --text-body-compact-body-line-height: 1.142857; --text-body-compact-body-letter-spacing: 0px; /* โ”€โ”€ link โ”€โ”€ */ --text-link-main-link-family: 'Suisse Intl'; --text-link-main-link-weight: 400; --text-link-main-link-size: 16px; --text-link-main-link-line-height: 1.25; --text-link-main-link-letter-spacing: 0px; --text-link-main-link-decoration: underline; --text-link-compact-link-family: 'Suisse Intl'; --text-link-compact-link-weight: 400; --text-link-compact-link-size: 14px; --text-link-compact-link-line-height: 1.142857; --text-link-compact-link-letter-spacing: 0px; --text-link-compact-link-decoration: underline; /* โ”€โ”€ caption โ”€โ”€ */ --text-caption-caption-family: 'Suisse Intl'; --text-caption-caption-weight: 400; --text-caption-caption-size: 12px; --text-caption-caption-line-height: 1.333333; --text-caption-caption-letter-spacing: 0px; } /* โ”€โ”€ Utility classes โ”€โ”€ */ .text-heading-promo-heading { font-family: var(--text-heading-promo-heading-family); font-weight: var(--text-heading-promo-heading-weight); font-size: var(--text-heading-promo-heading-size); line-height: var(--text-heading-promo-heading-line-height); letter-spacing: var(--text-heading-promo-heading-letter-spacing); } .text-heading-heading1 { font-family: var(--text-heading-heading1-family); font-weight: var(--text-heading-heading1-weight); font-size: var(--text-heading-heading1-size); line-height: var(--text-heading-heading1-line-height); letter-spacing: var(--text-heading-heading1-letter-spacing); } .text-heading-heading2 { font-family: var(--text-heading-heading2-family); font-weight: var(--text-heading-heading2-weight); font-size: var(--text-heading-heading2-size); line-height: var(--text-heading-heading2-line-height); letter-spacing: var(--text-heading-heading2-letter-spacing); } .text-heading-heading3 { font-family: var(--text-heading-heading3-family); font-weight: var(--text-heading-heading3-weight); font-size: var(--text-heading-heading3-size); line-height: var(--text-heading-heading3-line-height); letter-spacing: var(--text-heading-heading3-letter-spacing); } .text-heading-heading4 { font-family: var(--text-heading-heading4-family); font-weight: var(--text-heading-heading4-weight); font-size: var(--text-heading-heading4-size); line-height: var(--text-heading-heading4-line-height); letter-spacing: var(--text-heading-heading4-letter-spacing); } .text-body-promo-body { font-family: var(--text-body-promo-body-family); font-weight: var(--text-body-promo-body-weight); font-size: var(--text-body-promo-body-size); line-height: var(--text-body-promo-body-line-height); letter-spacing: var(--text-body-promo-body-letter-spacing); } .text-body-body-paragraph { font-family: var(--text-body-body-paragraph-family); font-weight: var(--text-body-body-paragraph-weight); font-size: var(--text-body-body-paragraph-size); line-height: var(--text-body-body-paragraph-line-height); letter-spacing: var(--text-body-body-paragraph-letter-spacing); } .text-body-main-body { font-family: var(--text-body-main-body-family); font-weight: var(--text-body-main-body-weight); font-size: var(--text-body-main-body-size); line-height: var(--text-body-main-body-line-height); letter-spacing: var(--text-body-main-body-letter-spacing); } .text-body-compact-body { font-family: var(--text-body-compact-body-family); font-weight: var(--text-body-compact-body-weight); font-size: var(--text-body-compact-body-size); line-height: var(--text-body-compact-body-line-height); letter-spacing: var(--text-body-compact-body-letter-spacing); } .text-link-main-link { font-family: var(--text-link-main-link-family); font-weight: var(--text-link-main-link-weight); font-size: var(--text-link-main-link-size); line-height: var(--text-link-main-link-line-height); letter-spacing: var(--text-link-main-link-letter-spacing); text-decoration: var(--text-link-main-link-decoration); } .text-link-compact-link { font-family: var(--text-link-compact-link-family); font-weight: var(--text-link-compact-link-weight); font-size: var(--text-link-compact-link-size); line-height: var(--text-link-compact-link-line-height); letter-spacing: var(--text-link-compact-link-letter-spacing); text-decoration: var(--text-link-compact-link-decoration); } .text-caption-caption { font-family: var(--text-caption-caption-family); font-weight: var(--text-caption-caption-weight); font-size: var(--text-caption-caption-size); line-height: var(--text-caption-caption-line-height); letter-spacing: var(--text-caption-caption-letter-spacing); } ```