Fuentes consultadas

Estas son las fuentes en las que se basa el curso. Priorizamos las especificaciones y la documentación oficial; los artículos de autor y los hilos de foro se indican como tales. Se consultaron entre el 30 de septiembre y el 5 de octubre de 2026; cada lección indica la fecha de su última revisión.

En esta página

• Especificaciones
• Figma
• Herramientas de código
• Sistemas de diseño de referencia
• Tipografías
• Accesibilidad
• Artículos de autor
• Foros
• Sobre cómo está hecha esta web

Especificaciones

• Design Tokens Format Module 2025.10: W3C Design Tokens Community Group
• Design Tokens Color Module 2025.10: W3C Design Tokens Community Group
• Design Tokens Resolver Module 2025.10: W3C Design Tokens Community Group
• CSS Color Module Level 4: W3C (borrador de recomendación candidata), sobre todo el mapeo de gama
• CSS Backgrounds and Borders Module Level 3: W3C, radios que se solapan
• CSS Custom Properties for Cascading Variables Module Level 1: W3C, sobre todo los ciclos de dependencias
• Semantic Versioning 2.0.0: cómo se numera una versión y qué es un cambio incompatible

Figma

• Overview of variables, collections, and modes
• Create and manage variables and collections
• Apply variables to designs
• Modes for variables
• Variables in Dev Mode
• View and adjust colors in a mixed selection
• Explore component properties
• Guide to Dev Mode: planes de pago, puesto Full o Dev
• Code Connect: planes Organization y Enterprise
• Hide styles, components, and variables when publishing
• Manage color profiles in design files
• Color models in Figma Design
• What's new from Schema 2025
• Update 1: Tokens, variables, and styles: curso Introduction to design systems
• Lesson 4: Document and manage your system: curso de sistemas de diseño, documentación y versiones
• Publish a library
• View a file's version history
• Guide to branching: planes Organization y Enterprise
• Check designs in Figma: planes Organization y Enterprise
• View and explore library analytics: planes Organization y Enterprise
• Update fills using the color picker: incluye el comprobador de contraste
• Guide to auto layout
• Add or delete breakpoints in a webpage: Figma Sites
• Create a responsive component: Figma Sites
• Plugin API: Version 1, Update 133: variables Timing y Easing
• Plugin API: VariableScope: los nombres de los scopes en la exportación
• Plugin API: Variable
• Simple Design System (repositorio), su theme.css y su tokens.json (colecciones y modos, consultado el 2026-10-05)

Herramientas de código

• Style Dictionary: DTCG
• Tailwind CSS: outline-style
• Style Dictionary: Transforms predefinidos
• Style Dictionary: Formats predefinidos
• Terrazzo: Resolvers
• Terrazzo: CSS
• Terrazzo: Tailwind
• Tailwind CSS: Theme variables
• Tailwind CSS: Dark mode
• Tailwind CSS: Padding
• Tailwind CSS: Colors y el theme.css de Tailwind CSS (código fuente, comprobado en la versión 4.3.3)
• Tailwind CSS: border-width
• Tailwind CSS: transition-duration
• Tailwind CSS v4.0: blog oficial
• Tailwind CSS: Adding custom utilities
• Tailwind CSS: Hover, focus, and other states
• Tailwind CSS: Detecting classes in source files
• Tailwind CSS: Styling with utility classes: componentes, conflictos y valores arbitrarios
• React: Passing props to a component
• MDN: prefers-color-scheme
• MDN: color-scheme
• MDN: Window.localStorage
• Tailwind CSS: Responsive design
• MDN: length
• MDN: padding
• MDN: margin
• MDN: gap
• MDN: font-size
• MDN: Color space
• MDN: oklch()
• MDN: Using CSS custom properties
• MDN: Custom properties (--*)
• MDN: custom-ident
• MDN: :active
• MDN: var()
• MDN: line-height
• MDN: Math.fround()
• Next.js: Font: next/font y sus variables CSS
• Repositorio de DesignToken101: la normalización (tools/figma-to-dtcg.mjs) y la comprobación (tools/check-tokens.mjs)

Sistemas de diseño de referencia

• shadcn/ui: Theming
• shadcn/ui: Dark mode, Next.js
• shadcn/ui: Button y su button.tsx
• Material Design 3: Design tokens
• Material Design 3: How the color system works
• Atlassian Design System: Design tokens
• Atlassian Design System: Design tokens, Code
• Atlassian Design System: All tokens: una descripción por token
• Atlassian Design System: tokens changelog: tokens obsoletos y borrados por versión
• Atlassian Design System: Spacing
• Radix Colors: Understanding the scale
• SAP Fiori for iOS: Design tokens
• Serendie: Design tokens

Tipografías

• Inter: SIL Open Font License 1.1
• JetBrains Mono: SIL Open Font License 1.1

Accesibilidad

• WCAG 2.2: W3C
• Understanding 1.4.1 Use of Color: W3C WAI
• Understanding 1.4.3 Contrast (Minimum): W3C WAI
• Understanding 1.4.11 Non-text Contrast: W3C WAI
• Understanding 1.4.10 Reflow: W3C WAI
• MDN: aria-current
• Understanding 1.4.4 Resize Text: W3C WAI
• Understanding 1.4.12 Text Spacing: W3C WAI
• Understanding 2.4.13 Focus Appearance: W3C WAI
• Understanding Conformance: W3C WAI
• Understanding 1.4.6 Contrast (Enhanced): W3C WAI
• Understanding 2.5.8 Target Size (Minimum): W3C WAI
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists: W3C WAI, fórmula del contraste
• G183: Using a contrast ratio of 3:1 with surrounding text: W3C WAI
• F73: Links that are not visually evident without color vision: W3C WAI
• WCAG 3.0: W3C, borrador de trabajo
• Understanding 2.3.3 Animation from Interactions: W3C WAI
• Understanding 2.4.7 Focus Visible: W3C WAI
• Understanding 2.4.11 Focus Not Obscured (Minimum): W3C WAI
• C39: prefers-reduced-motion, C40: indicador de foco de dos colores, C43: scroll-padding, C45: :focus-visible y F78: W3C WAI
• CSS Color Adjustment Module Level 1: W3C, colores forzados
• MDN: prefers-reduced-motion, prefers-reduced-transparency, forced-colors y prefers-contrast
• Chrome DevTools: Emulate CSS media features
• Understanding 4.1.2 Name, Role, Value y Understanding 2.5.3 Label in Name: W3C WAI
• WAI-ARIA APG: Button y WAI-ARIA APG: Disclosure: W3C WAI

Artículos de autor

Opiniones de expertos, no documentación oficial.

• Björn Ottosson, A perceptual color space for image processing (2020): el artículo que presenta Oklab
• Nathan Curtis, Naming Tokens in Design Systems (EightShapes, 2020)

Foros

Hilos del foro de la comunidad de Figma. Los usamos para detectar limitaciones, no como fuente definitiva.

• Select mode when creating variable aliases across libraries/collections (2023)
• Style variables changed from lower case to upper case (2024)
• Automatic variable mode switching for true responsive previews (2025)

Sobre cómo está hecha esta web

Fuentes que usamos para decidir cómo construir DesignToken101, no para el contenido del curso.

• Next.js: How to use markdown and MDX
• Next.js: Docs Contribution Guide
• next-intl: MDX
• Fumadocs: Core (headless)