TuGPT

Overview

TuGPT is an AI-powered employee platform designed for WhatsApp, calls, and customer management. The design system embodies "Minimalist Professionalism"—a philosophy that prioritizes clarity, efficiency, and trust through restrained typography, a neutral monochromatic palette anchored in deep charcoal (#27272a), and generous whitespace. The interface evokes competence and reliability, stripping away visual noise to focus users on task completion. The brand personality is direct, no-nonsense, and solution-oriented: every pixel serves a functional purpose. Voice example: "Log in to manage your customer conversations in one place."

Colors

The color system employs a sophisticated neutral foundation with strategic accent deployment. Primary (#27272a, a deep charcoal) dominates interactive elements—buttons, focus states, and primary text—establishing authority and visual hierarchy. Surface colors (#fafafa to #ffffff) create breathing room and reduce cognitive load across the interface. Secondary (#52525c, a mid-tone gray) and tertiary (#71717b, a lighter gray) provide supporting contrast for disabled states, helper text, and secondary actions. Error red (#e40014) is reserved for validation failures and critical alerts, appearing rarely to maximize impact. The palette avoids pure black (#000000) and pure white (#ffffff) at extremes, instead using #27272a and #fafafa to reduce eye strain during extended use. Disabled states empl

Typography

The type system uses a single font family—Arial, Helvetica, sans-serif—to ensure consistency and performance across all platforms. Display (60px, 700 weight) anchors hero moments; headline-lg (32px, 700 weight) structures major sections; headline-md (24px, 700 weight) titles form sections like "Iniciar sesión en TuGPT"; body-lg and body-md (16px and 14px, 400 weight) carry primary content; label-md (14px, 500 weight) labels form fields and buttons; label-sm (12px, 500 weight) provides helper text and captions. Letter-spacing ranges from -0.02em (display, for tightness) to 0.02em (label-sm, for legibility at small sizes). Line-height is set unitless (1.5 for body, 1.33 for headlines) to scale proportionally with font size. On small labels over busy backgrounds, apply text-shadow: 0 1px 2px

Layout

The layout follows a single-column, centered card model optimized for authentication and focused task flows. Container max-width is 448px (28rem), constraining form width to prevent excessive line length and maintain visual focus. The page uses flexbox (display: flex; flex-direction: column; align-items: center; justify-content: center) to vertically and horizontally center the login card on a full-height viewport (min-height: 100vh). Spacing follows a 4px unit system: form groups use md spacing (16px) between fields, labels use xs spacing (4px) above inputs, and the form container uses md spacing (16px) between the heading and form. Horizontal padding on the card is lg (24px) to create breathing room on mobile; the page itself uses px-4 (16px) to prevent edge-touching on small screens. Wh

Elevation & Depth

Depth is conveyed through subtle shadows and surface layering rather than dramatic effects. Level 1 (Base): The page background is #fafafa (surface-dim), providing a soft, neutral canvas. Level 2 (Card): The login card uses surface-container-lowest (#ffffff) with elevation-sm (0 1px 2px rgba(0, 0, 0, 0.06)), creating a barely perceptible lift. Level 3 (Dropdown/Focus): Select dropdowns and focused inputs use elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)), a more pronounced shadow that signals interactivity. Borders are used sparingly: input fields have a 1px solid border in outline (#d0d0d0), an

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied consistently but conservatively to balance approachability with professional precision. Buttons and inputs use rounded-lg (0.5rem, 8px) for a subtle, modern feel that avoids both sharp edges and excessive roundness. Form labels and helper text use no rounding (border-radius: 0). Select dropdown panels use rounded-lg (4px) to match input styling. The rationale: 8px radius is the sweet spot between iOS-style rounded rectangles (which feel casual) and sharp rectangles (which feel austere). This radius appears frequently in Mater

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor: {colors.primary} (#27272a), textColor: {colors.on-primary} (#ffffff), padding: 8px 16px, height: 40px, rounded: 8px, and typography: label-md (14px, 500 weight). On hover, button-primary-hover transitions backgroundColor to {colors.primary-container} (#3f3f46) with a smooth 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. Disabled state reduces opacity to 0.5 and uses cursor: not-allowed. The button spans full width (w-full) on the login form to maximize touch target and visual prominence.

Inputs & Interaction Input fields (email, password) use backgroundColor: {colors.surface-bright} (#ffffff), textColor: {colors.on-surface} (#171717), borderWidth: 1px, borderColor: {colors.outlin

Do's and Don'ts

**Do**

• Do use {colors.primary} (#27272a) exclusively for primary CTAs, focus states, and critical interactive elements—never for backgrounds or secondary content.
• Do maintain the 4px spacing unit rigorously: form gaps are 16px (md), label-to-input gaps are 4px (xs), and card padding is 24px (lg).
• Do apply focus states with the blue accent (#3080ff) and a 3px shadow (0 0 0 3px rgba(48, 128, 255, 0.1)) on all interactive elements for keyboard navigation accessibility.
• Do use Arial, Helvetica, sans-serif exclusively—no serif fonts, no script fonts, no variable fonts outside this stack.
• Do keep input height at 40px minimum to ensure touch-friendly targets on mobile (44px recommended for iOS, but 40px is acceptable with adequate padding).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) in the palette—stick to #27272a for dark and #fafafa for light to reduce eye strain.
• Don't apply shadows deeper than elevation-md (0 3px 8px rgba(0, 0, 0, 0.15)) on standard components; reserve elevation-lg for modals or critical overlays.
• Don't mix rounded-lg (8px) with sharp corners (0px) on related components—maintain consistency within a component family (e.g., all form inputs use 8px).
• Don't use the error color (#e40014) for non-critical messaging; reserve it for validation failures, alerts, and destructive actions only.
• Don't exceed container max-width of 448px on desktop—wider forms reduce focus and increase cognitive load; use multi-step flows instead.