Raw Tokens

Raw tokens are the numerical foundation layer in your design token system. They are the actual calculated values that come directly from your base size and ratio without any semantic meaning attached. In the context of a modular type scale they are the rem values like 0.625rem for the smallest caption size all the way up to 3.8125rem for your largest display size. These values are generated once using simple multiplication and division then stored as the source of truth. Semantic tokens reference them to add role based names. Component tokens reference the semantic ones to allow context specific adjustments. The separation is what makes the system scalable across teams and platforms. One change in the raw layer can update hundreds of instances across Figma files CSS variables and native code without breaking the contracts that designers and engineers rely on every day.

Raw tokens are not the names you use in conversation or in code on a daily basis. They are not text-body or heading-h1 or card-subtitle. Those are semantic tokens that carry the intent and hierarchy information your team needs. Raw tokens are not the overrides you apply to specific components like button-large-text-size. Those belong one layer higher in the component token group. They are not something you expose to the entire design team in Figma. Doing so invites designers to pick numbers instead of thinking in roles which defeats the purpose of the modular scale entirely. Raw tokens are not arbitrary choices pulled from thin air or a moodboard. They must be the direct output of your chosen base and ratio or the mathematical consistency that makes the scale work disappears. If your raw tokens are being edited by more than one person or referenced directly in production code your token architecture has already failed.

The best concrete example comes straight from the modular type scale article itself. A 16 pixel base with a 1.25 ratio generates the following raw values after rounding to sensible steps. The scale runs 10 13 16 20 25 31 39 49 61 pixels. Converted to rem for web use that becomes 0.625rem 0.8125rem 1rem 1.25rem 1.5625rem 1.9375rem 2.4375rem 3.0625rem and 3.8125rem. In the JSON these live under font-size.raw with keys 100 through 900. The semantic layer then maps caption to raw.100 body to raw.300 h1 to raw.800 and so on. This exact pattern appears in production at Stripe where their 2023 design system update used raw tokens to power both their dense product interfaces and their more dramatic marketing pages. Material Design 3 followed a similar approach in 2022 with their raw scale feeding semantic roles like display-large headline-small and body-medium. Tailwind ships with t-shirt sizes that function as raw tokens until you layer semantic aliases on top which most mature teams eventually do. Vercel does the same inside Geist with their tight 1.125 ratio for admin dashboards. At a client project in late 2023 we replaced 41 scattered px values with this 9 step raw scale. The result was immediate. Figma text styles stayed in sync with the Tailwind classes. When we adjusted the base to 17 pixels for accessibility the entire system updated in one pull request. The three layer diagram with RAW SEMANTIC and COMPONENT slabs connected by rules shows exactly how the information flows. Raw is the bottom slab that everything else rests on. This structure paid dividends during the 2024 redesign at a SaaS company we advised. Their previous system had designers creating custom text styles for every new campaign. Once the raw tokens were in place with semantic aliases the new campaign assets could be built in half the time because the scale was self enforcing.

You should use raw tokens when defining the initial system architecture or when performing maintenance on the foundation during quarterly reviews. Use them in the token generation tools like Style Dictionary that transform your JSON into platform specific files for Figma Tailwind iOS and Android. Use them when introducing new modes such as a compact density mode that swaps the raw values from 1.25 ratio to 1.125 while keeping all semantic names identical. This is exactly how advanced teams support both dense admin panels and comfortable reading modes without duplicating their component library. Do not use raw tokens for daily design work. Designers should never select from the raw collection in Figma. They should use the semantic text styles that reference the raws behind the scenes. Do not use raw tokens in component code. Engineers should reference the semantic or component tokens so that future changes to the scale do not require code changes. Avoid raw tokens on very small projects or marketing landing pages that have a short lifespan and limited team involvement. In those cases the overhead of a full token system may slow you down unnecessarily. Once your product grows beyond a handful of screens or your team grows beyond a handful of people the raw layer becomes essential infrastructure that prevents the slow drift into inconsistency.

Raw tokens are the silent foundation that turns your modular type scale from a nice to have into an unbreakable contract across design and code.