Design System · Solvia Pro

v1.0

Icon Mark

16pxFavicon

20pxTab

24pxNavbar

32pxModal header

40pxSidebar

64pxApp icon

96pxSplash

Context	Size	Usage
Favicon / browser tab	16–32px	<link rel='icon'>
Navbar / window bar	20–24px	<Image> en <nav>
Modals / popups	24–32px	prop icon del componente
Sidebar colapsado	32–40px	logo-sm
App icon / avatar	40px	<Avatar>
Loading / splash	64–96px	loading.tsx

Color Palette

Brand Blue — Primary

#3D6AB3

Base--brand

#2D4F86

Hover--brand-hover

#7A95C1

Muted--brand-muted

#D4DBE6

Subtle--brand-subtle

Brand Gray — Secondary

#58595B

Base--muted

#343536

Hover--muted-hover

#DBDBDB

Subtle--muted-subtle

Slate — Bridge

#5C77A2

Base--slate

Amber — Warnings & Alerts

#E8A020

Base--warning

#AF7612

Hover--warning-hover

#EEE2CD

Subtle--warning-subtle

Rose — Errors

#D94F2A

Base--danger

#A4391D

Hover--danger-hover

#EBD5CF

Subtle--danger-subtle

System information successfully updated.

System information successfully updated. Your session expires in 10 minutes.

Error saving changes. Check your connection.

Typography

Exo 2 — Headings & Subtitles

Control panel

Project Management · Analysis

Reports Section

weights: 600 / 700 / 800 · Google Fonts · font-heading

Inter — Body & UI

The Solvia Pro platform centralizes primary medical management and its associated workflows—including HR and payroll, EHR, billing, and more.

Field label · Metadata · Tooltip text

weights: 400 / 500 / 600 · Google Fonts · font-body

Pair · Exo 2 + Inter

Main dashboard

Period summary

The module's descriptive text appears here. Inter works perfectly at 14–16 px for labels, short paragraphs, and table content.

Alerts & Notifications

Inline — embedded in components or pages

System information updated successfully.

Active Session

Your session will remain active for 8 more hours.

Warning

This change will affect all users in the group.

Access Denied

You do not have permission to perform this action.

Global toast — floats over the page

// Inline — embedded in components or pages
            import { Alert } from "@/components/alert"

            <Alert type="info"    message="System information updated successfully." />
            <Alert type="warning" title="Warning" message="This change will affect all users in the group." onClose={() => {}} />
            <Alert type="error"   message="Failed to save. Please check your connection." />

            // Global toast — floats over the page
            import { useToast } from "@/components/toaster"

            const { info, warning, error } = useToast()

            info("Saved successfully")
            warning("Session about to expire", { title: "Attention", duration: 8000 })
            error("Failed to connect",  { duration: 0 })  // 0 = no auto-dismiss

Next.js Font Setup

// app/layout.tsx
              import { Inter, Exo_2 } from "next/font/google"

              const inter = Inter({
                subsets: ["latin"],
                variable: "--font-body",
                display: "swap",
              })

              const exo2 = Exo_2({
                subsets: ["latin"],
                weight: ["600", "700", "800"],
                variable: "--font-heading",
                display: "swap",
              })

              // className del <html>:
              // `${geistSans.variable} ${geistMono.variable} ${inter.variable} ${exo2.variable}`