Design guidelines changedconnectors/building/mcp-apps/design-guidelines
Nearest release: v2.1.283, published under an hour after upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.
Upstream edited this page at 25 Sep 2026 18:00 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 28 Sep 2026 22:07 UTC.
Upstream edited
Recorded here
Lines+91added
Lines−91removed
From line
293
where the diff opens
First seen
14 Aug 2026
this site's first read of the page
Recorded edits4to this page, all time
The whole hunk
from line 293, old and new numbered
/
from line 293
293293
294294Color tokens cover backgrounds, text, and borders, and semantic accent colors signal status. All tokens automatically adapt to light and dark mode.
295295
296| | Light mode | Dark mode |
297| :--------------------------- | :-------------- | :-------------- |
298| **Background** | | |
299| `color-background-primary` | `#FFFFFF` | `#30302E` |
300| `color-background-secondary` | `#F5F4ED` | `#262624` |
301| `color-background-tertiary` | `#FAF9F5` | `#141413` |
302| `color-background-inverse` | `#141413` | `#FAF9F5` |
303| `color-background-ghost` | `#FFFFFF (0%)` | `#30302E (0%)` |
304| `color-background-info` | `#D6E4F6` | `#253E5F` |
305| `color-background-danger` | `#F7ECEC` | `#602A28` |
306| `color-background-success` | `#E9F1DC` | `#1B4614` |
307| `color-background-warning` | `#F6EEDF` | `#483A0F` |
308| `color-background-disabled` | `#FFFFFF (50%)` | `#30302E (50%)` |
309| **Text** | | |
310| `color-text-primary` | `#141413` | `#FAF9F5` |
311| `color-text-secondary` | `#3D3D3A` | `#C2C0B6` |
312| `color-text-tertiary` | `#73726C` | `#9C9A92` |
313| `color-text-inverse` | `#FFFFFF` | `#141413` |
314| `color-text-ghost` | `#73726C (50%)` | `#9C9A92 (50%)` |
315| `color-text-info` | `#3266AD` | `#80AADD` |
316| `color-text-danger` | `#7F2C28` | `#EE8884` |
317| `color-text-success` | `#265B19` | `#7AB948` |
318| `color-text-warning` | `#5A4815` | `#D1A041` |
319| `color-text-disabled` | `#141413 (50%)` | `#FAF9F5 (50%)` |
320| **Border** | | |
321| `color-border-primary` | `#1F1E1D (40%)` | `#DEDCD1 (40%)` |
322| `color-border-secondary` | `#1F1E1D (30%)` | `#DEDCD1 (30%)` |
323| `color-border-tertiary` | `#1F1E1D (15%)` | `#DEDCD1 (15%)` |
324| `color-border-inverse` | `#FFFFFF (30%)` | `#141413 (15%)` |
325| `color-border-ghost` | `#1F1E1D (0%)` | `#DEDCD1 (0%)` |
326| `color-border-info` | `#4682D5` | `#4682D5` |
327| `color-border-danger` | `#A73D39` | `#CD5C58` |
328| `color-border-success` | `#437426` | `#599130` |
329| `color-border-warning` | `#805C1F` | `#A87829` |
330| `color-border-disabled` | `#1F1E1D (10%)` | `#DEDCD1 (10%)` |
331| **Ring** | | |
332| `color-ring-primary` | `#141413 (70%)` | `#FAF9F5 (70%)` |
333| `color-ring-secondary` | `#3D3D3A (70%)` | `#C2C0B6 (70%)` |
334| `color-ring-inverse` | `#FFFFFF (70%)` | `#141413 (70%)` |
335| `color-ring-info` | `#3266AD (50%)` | `#80AADD (50%)` |
336| `color-ring-danger` | `#A73D39 (50%)` | `#CD5C58 (50%)` |
337| `color-ring-success` | `#437426 (50%)` | `#599130 (50%)` |
338| `color-ring-warning` | `#805C1F (50%)` | `#A87829 (50%)` |
296| | Light mode | Dark mode |
297| :- | :- | :- |
298| **Background** | | |
299| `color-background-primary` | `#FFFFFF` | `#30302E` |
300| `color-background-secondary` | `#F5F4ED` | `#262624` |
301| `color-background-tertiary` | `#FAF9F5` | `#141413` |
302| `color-background-inverse` | `#141413` | `#FAF9F5` |
303| `color-background-ghost` | `#FFFFFF (0%)` | `#30302E (0%)` |
304| `color-background-info` | `#D6E4F6` | `#253E5F` |
305| `color-background-danger` | `#F7ECEC` | `#602A28` |
306| `color-background-success` | `#E9F1DC` | `#1B4614` |
307| `color-background-warning` | `#F6EEDF` | `#483A0F` |
308| `color-background-disabled` | `#FFFFFF (50%)` | `#30302E (50%)` |
309| **Text** | | |
310| `color-text-primary` | `#141413` | `#FAF9F5` |
311| `color-text-secondary` | `#3D3D3A` | `#C2C0B6` |
312| `color-text-tertiary` | `#73726C` | `#9C9A92` |
313| `color-text-inverse` | `#FFFFFF` | `#141413` |
314| `color-text-ghost` | `#73726C (50%)` | `#9C9A92 (50%)` |
315| `color-text-info` | `#3266AD` | `#80AADD` |
316| `color-text-danger` | `#7F2C28` | `#EE8884` |
317| `color-text-success` | `#265B19` | `#7AB948` |
318| `color-text-warning` | `#5A4815` | `#D1A041` |
319| `color-text-disabled` | `#141413 (50%)` | `#FAF9F5 (50%)` |
320| **Border** | | |
321| `color-border-primary` | `#1F1E1D (40%)` | `#DEDCD1 (40%)` |
322| `color-border-secondary` | `#1F1E1D (30%)` | `#DEDCD1 (30%)` |
323| `color-border-tertiary` | `#1F1E1D (15%)` | `#DEDCD1 (15%)` |
324| `color-border-inverse` | `#FFFFFF (30%)` | `#141413 (15%)` |
325| `color-border-ghost` | `#1F1E1D (0%)` | `#DEDCD1 (0%)` |
326| `color-border-info` | `#4682D5` | `#4682D5` |
327| `color-border-danger` | `#A73D39` | `#CD5C58` |
328| `color-border-success` | `#437426` | `#599130` |
329| `color-border-warning` | `#805C1F` | `#A87829` |
330| `color-border-disabled` | `#1F1E1D (10%)` | `#DEDCD1 (10%)` |
331| **Ring** | | |
332| `color-ring-primary` | `#141413 (70%)` | `#FAF9F5 (70%)` |
333| `color-ring-secondary` | `#3D3D3A (70%)` | `#C2C0B6 (70%)` |
334| `color-ring-inverse` | `#FFFFFF (70%)` | `#141413 (70%)` |
335| `color-ring-info` | `#3266AD (50%)` | `#80AADD (50%)` |
336| `color-ring-danger` | `#A73D39 (50%)` | `#CD5C58 (50%)` |
337| `color-ring-success` | `#437426 (50%)` | `#599130 (50%)` |
338| `color-ring-warning` | `#805C1F (50%)` | `#A87829 (50%)` |
339339
340340### Typography tokens
341341
342342Typography tokens include the font family, sizes, weights, and line heights.
343343
344| Family | |
345| :----------------------------- | :----------------------------- |
346| `font-sans` | `"Anthropic Sans, sans-serif"` |
347| `font-mono` | `"ui-monospace, monospace"` |
348| **Weight** | |
349| `font-weight-normal` | `400` |
350| `font-weight-medium` | `500` |
351| `font-weight-semibold` | `600` |
352| `font-weight-bold` | `700` |
353| **Size** | |
354| `font-text-xs-size` | `12px` |
355| `font-text-sm-size` | `14px` |
356| `font-text-md-size` | `16px` |
357| `font-text-lg-size` | `20px` |
358| `font-heading-xs-size` | `12px` |
359| `font-heading-sm-size` | `14px` |
360| `font-heading-md-size` | `16px` |
361| `font-heading-lg-size` | `20px` |
362| `font-heading-xl-size` | `24px` |
363| `font-heading-2xl-size` | `28px` |
364| `font-heading-3xl-size` | `36px` |
365| **Line-height** | |
366| `font-text-xs-line-height` | `1.4` |
367| `font-text-sm-line-height` | `1.4` |
368| `font-text-md-line-height` | `1.4` |
369| `font-text-lg-line-height` | `1.25` |
370| `font-heading-xs-line-height` | `1.4` |
371| `font-heading-sm-line-height` | `1.4` |
372| `font-heading-md-line-height` | `1.4` |
373| `font-heading-lg-line-height` | `1.25` |
374| `font-heading-xl-line-height` | `1.25` |
375| `font-heading-2xl-line-height` | `1.1` |
376| `font-heading-3xl-line-height` | `1` |
344| Family | |
345| :- | :- |
346| `font-sans` | `"Anthropic Sans, sans-serif"` |
347| `font-mono` | `"ui-monospace, monospace"` |
348| **Weight** | |
349| `font-weight-normal` | `400` |
350| `font-weight-medium` | `500` |
351| `font-weight-semibold` | `600` |
352| `font-weight-bold` | `700` |
353| **Size** | |
354| `font-text-xs-size` | `12px` |
355| `font-text-sm-size` | `14px` |
356| `font-text-md-size` | `16px` |
357| `font-text-lg-size` | `20px` |
358| `font-heading-xs-size` | `12px` |
359| `font-heading-sm-size` | `14px` |
360| `font-heading-md-size` | `16px` |
361| `font-heading-lg-size` | `20px` |
362| `font-heading-xl-size` | `24px` |
363| `font-heading-2xl-size` | `28px` |
364| `font-heading-3xl-size` | `36px` |
365| **Line-height** | |
366| `font-text-xs-line-height` | `1.4` |
367| `font-text-sm-line-height` | `1.4` |
368| `font-text-md-line-height` | `1.4` |
369| `font-text-lg-line-height` | `1.25` |
370| `font-heading-xs-line-height` | `1.4` |
371| `font-heading-sm-line-height` | `1.4` |
372| `font-heading-md-line-height` | `1.4` |
373| `font-heading-lg-line-height` | `1.25` |
374| `font-heading-xl-line-height` | `1.25` |
375| `font-heading-2xl-line-height` | `1.1` |
376| `font-heading-3xl-line-height` | `1` |
377377
378378### Radius tokens
379379
380380Radius tokens provide border radius values.
381381
382| Radius | |
383| :------------------- | :------- |
384| `border-radius-xs` | `4px` |
385| `border-radius-sm` | `6px` |
386| `border-radius-md` | `8px` |
387| `border-radius-lg` | `10px` |
388| `border-radius-xl` | `12px` |
382| Radius | |
383| :- | :- |
384| `border-radius-xs` | `4px` |
385| `border-radius-sm` | `6px` |
386| `border-radius-md` | `8px` |
387| `border-radius-lg` | `10px` |
388| `border-radius-xl` | `12px` |
389389| `border-radius-full` | `9999px` |
390390
391391### Border width tokens
from line 392
392392
393393Border width tokens provide border width values.
394394
395| | |
396| :--------------------- | :------ |
395| | |
396| :- | :- |
397397| `border-width-regular` | `0.5px` |
398398
399399### Shadow tokens
from line 400
400400
401401Shadow tokens provide drop-shadow values.
402402
403| | |
404| :---------------- | :----------------------------------------------------------------------- |
405| `shadow-hairline` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
406| `shadow-sm` | `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)` |
407| `shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)` |
408| `shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)` |
403| | |
404| :- | :- |
405| `shadow-hairline` | `0 1px 2px 0 rgba(0, 0, 0, 0.05)` |
406| `shadow-sm` | `0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)` |
407| `shadow-md` | `0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)` |
408| `shadow-lg` | `0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)` |
409409
410410### Example usage
411411
No line in this hunk matches that.