This is an inofficial guide that got inferred from the polkadot.com page

DM Serif Display (Display)

• Weight: 400 (normal & italic)
• Use for special headings and display text

DM Sans (Primary)

• Weights: 300, 400, 500, 600, 700
• Use for body text, UI elements, headings

• grey-50: #FAFAF9
• grey-100: #F5F5F4
• grey-200: #E7E5E4
• grey-300: #D6D3D1
• grey-400: #A8A29E
• grey-500: #78716C
• grey-600/700: #57534E
• grey-800: #292524
• grey-900: #1C1917
• grey-950: #0F0F0F

• Background: #FAFAF9
• Surface: #FFFFFF
• Primary text: #1C1917
• Secondary text: #57534E
• Borders: #E7E5E4

Pink Accent

• #FF2867 / rgb(255, 40, 103)
• Use for highlights and calls-to-action

• Invert light/dark values
• Light backgrounds become dark
• Dark text becomes light

Cool Gray: #E5E7EB Near Black: #0F0F0F (95% opacity)

Available in:

1. Cool gray on transparent
2. Near black on transparent
3. Cool gray on near-black background
4. Near black on cool-gray background
5. Transparent on near-black background
6. Transparent on cool-gray background

• SVG (vector, preferred)
• PNG: 256×256 and 2048×2048

Headings: DM Sans (600-700) or DM Serif Display (400)

Body: DM Sans (400)

Accent: Pink (#FF2867) sparingly for emphasis

Icons on light backgrounds: Use near-black (#0F0F0F)

Icons on dark backgrounds: Use cool-gray (#E5E7EB)