design.md

AI-ready Markdown · Human-readable · 116 tokens

Preview

# dev.to Design Tokens

> Generated by UI Archive — https://ui-archive.com/dev.to
> Snapshot: 2026-11-15
> Format: W3C DTCG compatible — suitable for Cursor, Lovable, Claude Code, and other AI coding agents

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-base | #090909 | Defined in :root as --base |
| --color-base-80 | #3d3d3d | Defined in :root as --base-80 |
| --color-base-60 | #717171 | Defined in :root as --base-60 |
| --color-base-40 | #a3a3a3 | Defined in :root as --base-40 |
| --color-base-20 | #d6d6d7 | Defined in :root as --base-20 |
| --color-button-outlined-bg-hover | rgba(0, 0, 0, 0.035) | Defined in :root as --button-outlined-bg-hover |
| --color-button-ghost-inverted-bg-hover | rgba(255, 255, 255, 0.15) | Defined in :root as --button-ghost-inverted-bg-hover |
| --color-syntax-declaration-color | #f39c12 | Defined in :root as --syntax-declaration-color |
| --color-syntax-literal-color | #dda0dd | Defined in :root as --syntax-literal-color |
| --color-syntax-error-color | #f9690e | Defined in :root as --syntax-error-color |
| --color-syntax-name-color | #7ed07e | Defined in :root as --syntax-name-color |

## Typography

| Token | Font Family | Size |
|-------|-------------|------|
| --font-size-helveticaneue-condensedbold | HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, Helvetica Neue Bold Condensed, HelveticaNeueBold, HelveticaNeue-Bold, Helvetica Neue Bold, HelveticaNeue, Helvetica Neue, TeXGyreHerosCnBold, Helvetica, Tahoma, Geneva, Arial Narrow, Arial, sans-serif | calc(15px + 0.2vw) |
| --font-size-helveticaneue-condensedbold-2 | HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, Helvetica Neue Bold Condensed, HelveticaNeueBold, HelveticaNeue-Bold, Helvetica Neue Bold, HelveticaNeue, Helvetica Neue, TeXGyreHerosCnBold, Helvetica, Tahoma, Geneva, Arial Narrow, Arial, sans-serif | 19px |
| --font-size-sfmono-regular | SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace | 0.9em |
| --font-size-helveticaneue-condensedbold-3 | HelveticaNeue-CondensedBold, HelveticaNeueBoldCondensed, HelveticaNeue-Bold-Condensed, Helvetica Neue Bold Condensed, HelveticaNeueBold, HelveticaNeue-Bold, Helvetica Neue Bold, HelveticaNeue, Helvetica Neue, TeXGyreHerosCnBold, Helvetica, Tahoma, Geneva, Arial Narrow, Arial, sans-serif | 1.3em |
…