Skip to content

Empezar

Esta guía te muestra cómo llevar la identidad DEVSOFTEC a tu proyecto. Tienes dos caminos:

  • Vanilla (HTML, cualquier framework): usa los tokens CSS de marca.
  • React: usa la librería devsoftec-ui con componentes listos.

Requisitos

Section titled “Requisitos”
  • Node.js 18+ y pnpm (o npm) como package manager.
  • Un proyecto frontend: React, Next.js, Vite… o simplemente HTML.

Camino 1 — Vanilla: tokens CSS

Section titled “Camino 1 — Vanilla: tokens CSS”

Los tokens de marca viven en la librería. Instálala e importa su CSS:

Terminal window
pnpm add devsoftec-ui
@import 'devsoftec-ui/styles.css';

Eso te da toda la identidad: las fuentes y estas variables de marca:

Variable Qué es Valor
--ds-font Tipografía principal de UI Space Grotesk
--ds-font-mono Tipografía de código y el símbolo JetBrains Mono
--ds-brand-black Negro de marca (texto, fondos oscuros) #0a0a0a
--ds-brand-white Blanco de marca (fondos claros) #fafafa
--ds-gray-100…900 Escala de grises neutros (bordes, textos suaves)
--ds-success Estado de éxito #00bb7f
--ds-error Estado de error #e40014
--ds-warning Estado de aviso #fcbb00
--ds-info Estado informativo #5f98ff
--ds-logo-color Color del logo (lo controla la librería: negro en claro, blanco en oscuro) segú el tema

💡 Los colores no se definen en tu proyecto — vienen de devsoftec-ui/styles.css y se adaptan solos.

Aplica la base en tu CSS:

body {
  font-family: var(--ds-font);
  color: var(--ds-brand-black);
  background: var(--ds-brand-white);
}

Si no quieres la dependencia, copia los tokens desde Colores y las fuentes desde Tipografía.

Camino 2 — React: librería devsoftec-ui

Section titled “Camino 2 — React: librería devsoftec-ui”

Instala la librería y usa los componentes:

Terminal window
pnpm add devsoftec-ui
import { Logo, Button, Badge } from 'devsoftec-ui';
import 'devsoftec-ui/styles.css';


export function App() {
  return (
    <header>
      <Logo size={40} />
      <Badge>Éxito</Badge>
      <Button>Acción</Button>
    </header>
  );
}

Los componentes ya traen las fuentes y los tokens de marca incluidos — no necesitas configurar nada más.

Vanilla: si no usas React, toma los componentes como referencia de estilos desde el docs — los tokens CSS cubren la base.

Estructura recomendada (React)

Section titled “Estructura recomendada (React)”
tu-proyecto/
├── src/
│   ├── main.jsx            ← import 'devsoftec-ui'
│   └── components/         ← componentes tuyos construidos con devsoftec-ui
├── package.json
└── index.html

¿Qué sigue?

Section titled “¿Qué sigue?”