← Volver al Portal

Brand Guidelines

Guía de identidad visual de Voccio

Logo

Voccio
Voccio

Icon Only

Voccio

Wordmark

Inverted

Monochrome

Colores

Colores Primarios

Blue 600

Primary Brand

#2563EB

RGB: 37, 99, 235

Cyan 400

Accent

#22D3EE

RGB: 34, 211, 238

Gradiente Principal

background: linear-gradient(to right, #2563EB, #22D3EE);

Colores Secundarios

Success

#22C55E

Error

#EF4444

Warning

#F59E0B

Info

#8B5CF6

Dark

#1E293B

Escala de Grises (Slate)

50
100
200
300
400
500
600
700
800
900

Tipografía

Font Family

Inter

Inter es una fuente sans-serif moderna y altamente legible, perfecta para interfaces digitales. Disponible en Google Fonts.

Escala de Tamaños

Aa 48px / 3rem / text-5xl
Aa 36px / 2.25rem / text-4xl
Aa 30px / 1.875rem / text-3xl
Aa 24px / 1.5rem / text-2xl
Aa 20px / 1.25rem / text-xl
Aa 18px / 1.125rem / text-lg
Aa 16px / 1rem / text-base
Aa 14px / 0.875rem / text-sm

Pesos

Regular 400
Medium 500
Semibold 600
Bold 700

Import

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Voz y Tono

Nuestra Voz Es...

  • Directa y clara

    Sin rodeos. El tiempo del usuario es valioso.

  • Profesional pero cercana

    Como un compañero de trabajo que sabe lo que hace.

  • Confiada sin ser arrogante

    Sabemos que funcionamos, pero dejamos que los resultados hablen.

  • Empática con el usuario

    Entendemos los dolores del autónomo porque los vivimos.

Nuestra Voz NO Es...

  • Corporativa o fría

    No somos un banco. Somos tu herramienta.

  • Técnica o compleja

    La IA es nuestro motor, no nuestra marca.

  • Condescendiente

    Nuestros usuarios son profesionales expertos.

  • Hype o exagerada

    No prometemos magia, prometemos resultados.

Componentes UI

Botones

Cards

Card con borde

border-slate-200, shadow-sm

Card con fondo

bg-slate-50, sin borde

Badges

Default Success Warning Error Neutral

Inputs

Iconografía

Usamos Heroicons como librería de iconos principal. Estilo outline para UI, solid para estados activos o énfasis.

Voice

Document

Payment

Calendar

User

Analytics

Settings

Check

heroicons.com - MIT License