Un skill de diseño para Claude Code, Cursor y Codex que guía a los agentes de programación con IA para crear interfaces que no parezcan generadas por IA.
- Estrellas
- 174
- Forks
- 8
- Issues abiertos
- 1
- Último commit
- hace 16 días
¿Qué es?
Cal Sans Text UI es la versión para interfaces de la tipografía Cal Sans v2, diseñada por Mark Davis para Cal.com. El eje de tamaño óptico está fijado en el diseño de interfaz de 10 pt, mientras que el peso, la geometría (GEOM), la altura de las ascendentes, la nitidez y una cursiva dibujada a 9,5° siguen siendo ajustables. Está optimizada para texto de 14–15px y se distribuye en npm con archivos CSS y un wrapper de fuentes para Next.js.
La familia incluye los 20 conjuntos estilísticos y las 42 variantes de caracteres, que se activan mediante funciones OpenType. El eje GEOM lleva el diseño de un extremo A11y, orientado a la accesibilidad, a un extremo Geo, más geométrico; el valor predeterminado es el diseño de interfaz en 25. También incluye estilos estáticos con cursivas para cada peso, para entornos que no admiten fuentes variables.
La tipografía se distribuye bajo la SIL Open Font License 1.1. Sus métricas verticales están diseñadas para coincidir con las de fuentes de interfaz habituales, como Inter, Roboto y Segoe UI, por lo que normalmente se puede sustituir una por otra sin tener que cambiar el tamaño de los componentes.
Funciones clave
- 01Ejes variables para el peso, la geometría (GEOM), la altura de las ascendentes, la nitidez y la cursiva.
- 02El tamaño óptico está fijado en el diseño de interfaz de 10 pt.
- 03Incluye 20 conjuntos estilísticos y 42 variantes de caracteres mediante funciones OpenType.
- 04Se distribuye como paquete de npm con archivos CSS y un wrapper de fuentes locales para Next.js.
- 05Las proporciones verticales están diseñadas para coincidir con las de tipografías de interfaz habituales, como Inter y Roboto.
Casos de uso
- Definir el texto del cuerpo y de la interfaz de una aplicación web o un sistema de diseño en 14–15px.
- Sustituir Inter o Roboto en la interfaz de un producto sin cambiar el tamaño de botones ni campos de entrada.
- Usar una fuente variable autoalojada en un proyecto con Next.js App Router.
- Aplicar valores predeterminados personalizados y funciones OpenType en herramientas de diseño compatibles con funciones tipográficas.
Inicio rápido
- 1
Instala el paquete desde npm
npm i @calcom/cal-sans-ui - 2
Importa la hoja de estilos en tu app y establece la familia tipográfica como «Cal Sans Text UI»
Antes de usarlo
- Los metadatos no indican ninguna licencia detectada, aunque el README menciona SIL Open Font License; comprueba la licencia antes de usarlo.
- Está optimizado para texto de interfaz de 14–15 px, por lo que para titulares y tamaños de visualización es más adecuado usar la fuente Cal Sans completa.
- Para usarlo con Next.js se requiere Next.js 13.2 o posterior como dependencia peer.
Temas
Preguntas frecuentes
- ¿Qué es sans-ui?
- Una versión variable de Cal Sans v2 optimizada para interfaces, diseñada para texto de 14–15px en pantallas de alta densidad. Cal Sans Text UI es la versión para interfaces de la tipografía Cal Sans v2, diseñada por Mark Davis para Cal.com. El eje de tamaño óptico está fijado en el diseño de interfaz de 10 pt, mientras que el peso, la geometría (GEOM), la altura de las ascendentes, la nitidez y una cursiva dibujada a 9,5° siguen siendo ajustables. Está optimizada para texto de 14–15px y se distribuye en npm con archivos CSS y un wrapper de fuentes para Next.js.
- ¿sans-ui es gratuito? ¿Qué licencia tiene?
- sans-ui es open source bajo la licencia Other. Revisa los términos de la licencia antes de usarlo en productos comerciales.
- ¿sans-ui sigue mantenido?
- Mantenimiento activo. El último commit de sans-ui fue el 6 oct 2026.
- ¿Para qué puedo usar sans-ui?
- Definir el texto del cuerpo y de la interfaz de una aplicación web o un sistema de diseño en 14–15px. Sustituir Inter o Roboto en la interfaz de un producto sin cambiar el tamaño de botones ni campos de entrada. Usar una fuente variable autoalojada en un proyecto con Next.js App Router. Aplicar valores predeterminados personalizados y funciones OpenType en herramientas de diseño compatibles con funciones tipográficas.
- ¿Cómo se instala sans-ui?
- Instala el paquete desde npm: npm i @calcom/cal-sans-ui Importa la hoja de estilos en tu app y establece la familia tipográfica como «Cal Sans Text UI»
- ¿Dónde consigo sans-ui?
- El código fuente y las instrucciones de instalación están en GitHub: https://github.com/calcom/sans-ui
Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.
Proyectos relacionados
Una fuente monoespaciada neo-grotesca y compacta, diseñada para programar y generada con Python y métricas personalizables.
Plataforma de diseño de código abierto para equipos de producto, con colaboración en tiempo real, tokens de diseño y opción de alojamiento propio.
Colección de skills para agentes que enseñan a asistentes de programación con IA reglas de animación, diseño de UI y desarrollo frontend basadas en la experiencia del autor en Vercel y Linear.
Una skill de diseño nativa de HTML para agentes de programación con IA que convierte una instrucción de texto en prototipos, presentaciones, animaciones e infografías.
Colección de skills para agentes que ayudan a crear mejores interfaces, con recursos sobre accesibilidad, diseño, tipografía, color, redacción y acabado visual.