Tipografía

DEVSOFTEC usa dos familias open source que comunican precisión técnica con personalidad moderna.

Space Grotesk

The quick brown fox jumps over the lazy dog

La tipografía principal de la marca. Geométrica, con terminaciones rectas y proporciones abiertas. Se usa en todo el producto: interfaz, títulos, textos y el wordmark del logo.

Space Grotesk--ds-font

400 · 500 · 600 · 700

400The quick brown fox jumps over the lazy dog

500The quick brown fox jumps over the lazy dog

600The quick brown fox jumps over the lazy dog

700The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%^&*()

Peso	Aplicación
400	Texto de párrafo, UI general, “DEV” en el wordmark
500	Labels, badges, botones
600	Títulos secundarios, “SOFTEC” en el wordmark
700	Títulos principales, headings h1–h2

JetBrains Mono

</> const brand = 'DEVSOFTEC';

Código, tokens y el mark tipográfico

La tipografía monoespaciada. Se usa para código, variables, datos técnicos y el símbolo del mark.

Solo se cargan 400 y 700 (los pesos que realmente usa el sistema).

JetBrains Mono--ds-font-mono

400 · 700

400const brand = 'DEVSOFTEC';

700const brand = 'DEVSOFTEC';

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()

Peso	Aplicación
400	Bloques de código, inline code, tokens
700	El símbolo del mark, énfasis en código

Escala tipográfica

Referencia de tamaño / peso / line-height. En producto, prioriza tokens CSS cuando existan; esta escala es la guía visual.

Display48px · 700 · 1.1DEVSOFTEC

H132px · 700 · 1.2Construimos software

H224px · 600 · 1.3Con identidad

H320px · 600 · 1.4Un solo sistema

Body16px · 400 · 1.6Muchos productos. Una sola identidad.

Small14px · 400 · 1.5Texto secundario

Mono14px · 400 · 1.6npm run dev

Nivel	Tamaño	Peso	Line-height
Display	48px	700	1.1
H1	32px	700	1.2
H2	24px	600	1.3
H3	20px	600	1.4
Body	16px	400	1.6
Small	14px	400	1.5
Mono	14px	400	1.6

Tokens

--ds-font: "Space Grotesk", system-ui, sans-serif;
--ds-font-mono: "JetBrains Mono", ui-monospace, monospace;

Instalación

Las dos fuentes ya están incluidas en la librería devsoftec-ui — no necesitas instalarlas aparte.

pnpm add devsoftec-ui

Si tu proyecto usa la librería (React), las fuentes y los tokens vienen con ella, sin configuración extra:

import { Logo, Button } from 'devsoftec-ui';
import 'devsoftec-ui/styles.css';

Vanilla: importa el CSS de la librería para obtener las fuentes y los tokens:
@import 'devsoftec-ui/styles.css';
O si prefieres no depender de la librería, usa directamente @fontsource/space-grotesk y @fontsource/jetbrains-mono en tu proyecto.