Wink

Overview

Wink is a Dutch digital agency specializing in custom WordPress websites, portals, and software solutions for businesses that demand intelligence, efficiency, and visual distinction. The brand embodies a philosophy of "smart optimization"—every pixel serves a purpose, every interaction is deliberate. Aesthetically, Wink employs **Geometric Maximalism**: bold, high-contrast typography in a proprietary sans-serif (Wink font family), paired with vivid yellow (#fff238) accent shapes that cut through neutral backgrounds, creating visual tension and energy. The UI evokes a sense of precision and forward momentum—think architectural blueprints meets contemporary digital product design. The emotional response is one of confidence and clarity: users feel they are in the hands of designers and developers who understand both craft and commerce.

The brand voice is direct, intelligent, and slightly irreverent. Wink speaks in Dutch-inflected English with a conversational tone that avoids corporate jargon. Vocabulary leans technical ("portals," "optimization," "efficiency") but remains accessible. The brand personality is that of a smart, opinionated partner—not a vendor, but a collaborator. Example sentence in Wink's voice: "Alles op het internet draait om slimheid, efficiëntie en optimalisatie. En het oog wil ook wat." (Everything on the internet is about intelligence, efficiency, and optimization. And the eye wants something too.)

Colors

Wink's color system is built on a foundation of near-white surfaces (#ffffff, #f4f4f4, #eeeeee) that provide a clean, professional canvas. The primary accent is a vibrant, saturated yellow (#fff238, RGB 255, 242, 56)—this is the signature brand color, deployed on all primary CTAs, focus states, and key interactive elements. This yellow is not a pale or muted tone; it is intentionally bold and demands attention, reflecting the brand's confidence. Secondary colors include a vivid cyan-blue (#0693e3) used for secondary actions and informational elements, and a bright teal-green (#00d084) for tertiary accents and success states. The error color is a deep red (#cf2e2e). On-surface text is pure black (#000000) for maximum legibility, with a secondary gray (#7e7e7e) for supporting copy and disabl

Typography

Wink's type system pairs a distinctive display typeface (Wink, a custom geometric sans-serif) with Inter for body and utility text. The Wink font family is used exclusively for headlines (display, headline-lg, headline-md) and conveys the brand's architectural, forward-thinking identity—it is geometric, clean, and slightly unconventional. Inter (fontFamily: Inter, sans-serif) handles all body copy, labels, and UI text, providing excellent legibility at small sizes and a neutral, professional tone. The display level (64px, fontWeight 400, lineHeight 72px, letterSpacing -0.02em) is reserved for hero headlines and major section titles. Headline-lg (48px, fontWeight 400, lineHeight 56px) is used for subsection titles and prominent calls-to-action. Headline-md (32px, fontWeight 400, lineHeight

Layout

Wink employs a fluid, 12-column grid system with a maximum container width of 1200px (containerMaxWidth: 1200px). The layout philosophy is **spacious minimalism**: generous whitespace (lg spacing: 40px for section separation, md spacing: 24px for component padding) creates breathing room and emphasizes the importance of each element. The gutter between grid columns is 24px, and the horizontal padding on the container is also 24px on tablet/mobile, scaling to 40px on desktop. Hero sections use full-width backgrounds with the content constrained to the 1200px container, allowing accent shapes (the yellow geometric forms) to extend beyond the container bounds for visual drama. Cards and content blocks are padded with md spacing (24px) internally, with lg spacing (40px) between major sections.

Elevation & Depth

Depth in Wink is achieved through a subtle shadow system and layered surfaces, not through color darkening. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and lifted components, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, dropdowns, and the most prominent overlays. Cards at rest use md elevation; on hover, they transition to lg elevation with a 200ms ease-out timing function. The background is always the surface color (#ffffff or #f4f4f4), never a true wh

Shapes

Wink's shape philosophy is **Geometric Precision with Soft Edges**: border-radius values are small and intentional, never excessive. The rounded scale uses sm (0.25rem / 4px) for minimal rounding on inputs and small components, DEFAULT (0.5rem / 8px) for buttons and standard cards, md (0.75rem / 12px) for larger cards and modals, lg (1rem / 16px) for hero sections and prominent containers, xl (1.5rem / 24px) for oversized cards and feature blocks, and full (9999px) for pills and circular badges. Buttons use DEFAULT (8px) border-radius, creating a subtle softness without appearing rounded or pi

Components

Action Elements

Buttons are the primary interactive element and come in three variants: primary, secondary, and ghost. The **button-primary** (backgroundColor: #fff238, textColor: #000000, height: 44px, padding: 13px 22px, rounded: 8px, fontWeight: 600) is the most prominent CTA and uses the brand yellow. On hover, the background shifts to #fffacd (primary-container) with a 150ms ease transition. On active/pressed, the background becomes #e6d900 (a darker yellow) to provide tactile feedback. The **button-secondary** (backgroundColor: #f4f4f4, textColor: #000000, height: 44px, padding: 13px 22px, rounded: 8px, fontWeight: 600) is used for secondary actions and has a subtle gray background. On hover, it transitions to #eeeeee (surface-container) with the same 150ms timing. The **button-

Do's and Don'ts

**Do**

• Do use the yellow primary (#fff238) on all primary CTAs, focus states, and key brand moments—it is the signature accent and should be visible and confident.
• Do maintain high contrast between text and background: black text on yellow requires fontWeight 600+ to meet WCAG AA standards (21:1 ratio).
• Do use the Wink font family exclusively for headlines (display, headline-lg, headline-md); never use it for body text or UI labels below 28px.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards at rest and transition to lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) on hover with a 200ms ease-out timing.
• Do use lg spacing (40px) to separate major sections and create visual breathing room; whitespace is a design tool, not wasted space.
• Do keep border-radius values small and consistent: 8px for buttons and inputs, 12px for standard cards, 16px for featured cards.
• Do use the surface-container stack to create layered depth: surface-container-low for base elements, surface-container for standard cards, surface-container-high for elevated modals.

**Don't**

• Don't use the yellow primary (#fff238) as a background for body text or large text blocks; it is an accent color, not a surface color.
• Don't apply rounded: full (9999px) to buttons or cards; reserve it for badges and pills only.
• Don't use the Wink font family for body copy, labels, or any text below 28px; it is a display typeface and loses legibility at small sizes.
• Don't mix shadow styles: use only the defined elevation scale (sm, md, lg); never create custom shadows or use spread radius > 0px.
• Don't apply more than one primary accent color per page; the yellow (#fff238) should dominate, with secondary (#0693e3) and tertiary (#00d084) used sparingly.
• Don't use pure white (#ffffff) or pure black (#000000) for backgrounds or text in high-contrast scenarios; use the surface and on-surface tokens instead.
• Don't animate transitions faster than 150ms or slower than 300ms; keep interactions snappy and responsive without feeling jarring.