Gudink

Overview

Gudink is Argentina's first complete print-on-demand platform, built by creators for creators. The brand embodies a 'Minimalist-Maximalist' aesthetic: a dark, sophisticated canvas (near-black #0d0d0d) paired with vibrant, energetic accent colors (lavender #ba99ed and electric blue #4586ff) that command attention. The UI evokes a sense of creative empowerment—clean, direct, and unapologetically bold. Users feel like they're stepping into a professional studio, not a generic marketplace. The emotional response is one of confidence: your designs matter, and this platform respects that.

The brand voice is direct, conversational, and action-oriented. Gudink speaks to young Argentine creators with clarity and urgency—no corporate jargon, no false promises. Vocabulary leans toward Spanish-first sensibilities ("Empezá", "Vendé", "Tiendanube") while maintaining international polish. The tone is encouraging but never patronizing. Example sentence in Gudink's voice: "Subí tu diseño, nosotros lo imprimimos y enviamos en 48 horas—sin mínimos, sin sorpresas."

Colors

The color system is built on a high-contrast dark foundation with strategic accent deployment. The primary color, lavender (#ba99ed), is the signature accent used exclusively on call-to-action buttons, interactive states, and brand moments—it's the visual signal that says 'click here, this matters.' Secondary blue (#4586ff) supports secondary actions and highlights, creating a complementary energy without competing for attention. The surface stack ranges from pure black (#000000 for surface-container-lowest) through charcoal grays (#0d0d0d for base surface, #262626 for surface-container-high) to near-white (#fffcf2 for on-surface text). This extreme contrast ensures legibility and visual hierarchy without relying on color alone. Tertiary cyan (#006daa / #0099ff) is reserved for status indi

Typography

The type system prioritizes clarity and hierarchy through weight and scale rather than decorative flourishes. Inter is the sole typeface family, deployed across all weights (400, 500, 600, 700) to create a cohesive, modern voice. Display-level type (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand moments—it commands the page. Headline-lg (55px, 700 weight) is used for primary page titles like the hero 'Vendé productos únicos con Print on Demand en Argentina,' where the italicized 'Print on Demand' (same size, same weight, but rendered in the primary color #ba99ed) creates visual rhythm. Body copy (16px, 400 weight, 24px line-height) is set with generous leading to ensure readability on dark backgrounds. Labels and CTAs use 14px at 600 weight with 0.01em trackin

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section uses full-width imagery with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility. Sections are separated using lg spacing (40px) on desktop, reducing to md spacing (24px) on tablet and sm spacing (12px) on mobile. The gutter (24px) is applied consistently to all container edges, creating breathing room without excessive whitespace. Content cards and feature blocks use md padding (24px) internally, with lg spacing (40px) between sections. The container-max-width of 1280px prevents the layout from becoming unwieldy on ultra-wide displays. Horizontal rhythm is maintained through a consistent 8px unit grid—all spacing values are multiples of 8px (4px, 12px, 24px, 40p

Elevation & Depth

Depth is achieved through layered transparency and subtle shadows rather than dramatic drop-shadows. The base layer (Level 1) is the dark surface (#0d0d0d), which serves as the visual foundation. Level 2 (standard cards and containers) uses a 1px solid border at rgba(255, 255, 255, 0.08) combined with a subtle shadow (0 4px 12px rgba(0, 0, 0, 0.15)) to lift elements slightly off the background. Level 3 (modals, elevated cards, and interactive overlays) increases the border opacity to rgba(255, 255, 255, 0.12) and applies a stronger shadow (0 16px 40px rgba(0, 0, 0, 0.2)). The header navigation

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used strategically to soften the industrial dark aesthetic while maintaining a sense of precision. Buttons and primary CTAs use full rounding (border-radius: 9999px), creating pill-shaped elements that feel friendly and clickable. Secondary buttons and inputs use md rounding (0.75rem / 12px), providing a subtle curve that suggests interactivity without the playfulness of full rounding. Cards and containers use lg rounding (1rem / 16px), creating a balanced, modern appearance. Small UI elements (badges, tags) use full rounding (9999px

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses the signature lavender (#ba99ed) background with dark text (#1f0742), full rounding (9999px), and 12px vertical / 24px horizontal padding to create a 48px tall interactive target. On hover, the background transitions to the primary-fixed-dim color (#ba99ed with reduced opacity) over 200ms, creating a subtle feedback effect. The secondary button uses a transparent background with a 1px border (rgba(255, 255, 255, 0.1)) and light text (#fffcf2), also full-rounded and 48px tall. On hover, the background becomes rgba(255, 255, 255, 0.12) and the border strengthens to rgba(255, 255, 255, 0.2). Both button variants use label-md typography (14px, 600 weight) for consistent visual weight.

Containers & S

Do's and Don'ts

**Do**

• Do use the primary lavender (#ba99ed) exclusively on high-priority CTAs and interactive moments—it's the visual anchor that guides user attention.
• Do maintain the dark surface (#0d0d0d) as the default background; it's the brand's signature and ensures all accent colors pop.
• Do apply the 8px grid unit consistently to all spacing decisions—multiples of 8px create visual harmony across responsive breakpoints.
• Do use full rounding (9999px) on buttons and interactive elements to signal clickability; reserve moderate rounding (12-16px) for containers.
• Do layer transparency and subtle shadows (0 4px 12px rgba(0, 0, 0, 0.15)) to create depth; avoid harsh drop-shadows that feel dated.

**Don't**

• Don't use the primary color (#ba99ed) on non-interactive elements or as a background—it dilutes its signal strength and confuses the visual hierarchy.
• Don't introduce new accent colors beyond primary (#ba99ed), secondary (#4586ff), and tertiary (#006daa)—the palette is intentionally constrained to maintain brand distinctiveness.
• Don't apply sharp corners (0px border-radius) to any component; the Soft-Technical aesthetic requires at least sm rounding (4px) on all UI elements.
• Don't use system fonts or generic sans-serif fallbacks—Inter is the only typeface family; if it fails to load, the brand identity breaks.
• Don't exceed the container-max-width of 1280px or use spacing values that aren't multiples of 8px; these constraints ensure visual consistency at scale.