Thinqspace

Overview

Thinqspace is a unified AI workspace designed for freelancers and agencies managing the complete business lifecycle—from gig discovery and client research through proposal generation, delivery management, invoicing, and milestone tracking. The design system embodies 'Functional Minimalism': a deliberate aesthetic that strips away visual noise to create a calm, purposeful interface where every element serves a clear function. The brand personality is grounded, practical, and human-centered—it speaks to the lived experience of freelancers who juggle multiple roles and need tools that work *with* them, not against them. The UI achieves visual energy through strategic use of a vibrant lime-green accent (rgb(210, 235, 20)) on CTAs and key interactions, set against a clean white canvas (rgb(255, 255, 255)) and warm neutral grays (rgb(108, 117, 125) for secondary text). This creates a high-contrast, scannable interface that feels both professional and approachable.

The voice is direct, empathetic, and action-oriented. Thinqspace avoids corporate jargon and instead uses conversational language that acknowledges the real friction points of freelance work. Example sentence in brand voice: 'Your clients get a portal. You get your life back.' The typography system uses Geist (a modern, geometric sans-serif) at generous sizes and weights to establish clear hierarchy without relying on color alone. The spacing is generous—24px gutters, 40px section breaks—creating breathing room that reinforces the 'calm' positioning. Every interaction is designed to feel responsive and intentional: but

Colors

The color system is built on a foundation of clean, high-contrast surfaces that prioritize readability and reduce cognitive load. Primary (rgb(210, 235, 20) / #d2eb14) is the brand's signature lime-green accent—used exclusively for CTAs, active states, focus indicators, and key brand moments. This high-saturation, high-value green creates immediate visual hierarchy and signals 'action' and 'progress' without feeling aggressive. It's paired with pure black text (rgb(0, 0, 0)) for maximum contrast and accessibility (WCAG AAA compliant at 21:1 ratio). The surface stack uses a monochromatic white-to-gray progression: Surface (rgb(255, 255, 255)) is the base canvas; Surface-Container (rgb(233, 236, 239) / #e9ecef) is used for subtle dividers, disabled states, and low-emphasis backgrounds; Surfa

Typography

The typography system uses Geist as the single typeface family, with a deliberate weight and size hierarchy that creates visual rhythm without relying on multiple font families. Display (80px, weight 600, line-height 88px, letter-spacing -0.02em) is reserved for hero headlines like 'Running a business shouldn't feel like a second job'—the generous size and tight tracking create impact and memorability. Headline-LG (40px, weight 600, line-height 48px) is used for section titles and major content divisions. Headline-MD (28px, weight 600) handles subsection headers. Title-LG (20px, weight 600) is applied to card titles and modal headers. Body-LG (18px, weight 400, line-height 28px) is the primary reading size for long-form copy and hero subheadings. Body-MD (16px, weight 400, line-height 24px

Layout

The layout system uses a fluid, mobile-first grid with a maximum container width of 1280px (calc(var(--spacing) * 450) in the codebase, where spacing = 4px, yielding 1800px; however, the design intent is 1280px for content). The page rhythm is built on a 24px gutter (md spacing) for horizontal padding and 40px (lg spacing) for vertical section breaks. The grid is 12 columns on desktop, collapsing to 6 columns on tablet and 4 columns on mobile. Hero sections use a centered, single-column layout with max-width constraints (max-w-5xl) to keep text readable at large sizes. Cards and content blocks are arranged in a 2-3 column grid on desktop, stacking to 1 column on mobile. Whitespace is generous: section separations use 40px top/bottom margins, card padding is 24px, and input fields use 12px

Elevation & Depth

Elevation in Thinqspace is achieved through a restrained shadow system that creates subtle depth without visual heaviness. The system uses three elevation levels: Level 1 (sm): 0 1px 2px rgba(0, 0, 0, 0.06)—used for subtle dividers, input field borders, and minimal depth cues. Level 2 (md): 0 4px 12px rgba(0, 0, 0, 0.08)—applied to cards, dropdowns, and standard interactive surfaces; this is the default shadow for most UI elements. Level 3 (lg): 0 16px 40px rgba(0, 0, 0, 0.12)—reserved for modals, floating panels, and elevated overlays that demand visual prominence. Cards use a 1px solid borde

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the geometric precision of a business tool, creating approachability without sacrificing professionalism. Buttons use lg radius (1rem / 16px), creating a pill-like shape that feels friendly and clickable. Cards and containers use xl radius (1.5rem / 24px), establishing a softer, more inviting container aesthetic. Input fields use DEFAULT radius (0.5rem / 8px), a subtle roundness that maintains a technical feel while avoiding sharp corners. Badges and status indicators use full radius (9999px), creating p

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent height of 44px with padding of 12px horizontal and 24px vertical (yielding a comfortable touch target). The primary button uses bg-brand (rgb(210, 235, 20)) with text-black (rgb(0, 0, 0)), rounded-lg (16px), and label-md typography (14px, weight 500). On hover, the button applies filter: brightness(0.95) and transitions with 200ms cubic-bezier(0.4, 0, 0.2, 1) easing. On active (click), the button scales to 0.98 (active:scale-[0.98]) and shifts to inverse-primary (rgb(168, 200, 0)) for tactile feedback. The secondary button uses a transparent background with a 1px border in outline-variant (rgb(153, 153, 153)), text-on-surface (rgb(18, 18, 18)), and the same rounded-lg and height. On hover, the secondary

Do's and Don'ts

**Do**

• Do use the primary green (rgb(210, 235, 20)) exclusively for CTAs, focus states, and key brand moments—never use it for backgrounds or large surface areas.
• Do maintain at least 24px of padding inside cards and containers, and 40px of vertical spacing between major sections, to create the 'calm' visual rhythm.
• Do apply the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) to cards and interactive surfaces; reserve the lg shadow (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and elevated overlays only.
• Do use Geist at sizes of 16px or larger for body text, with line-height of at least 1.5x the font size, to ensure readability and reduce cognitive load.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) easing to all interactive transitions (hover, focus, active states) for a consistent, responsive feel.

**Don't**

• Don't use the primary green for large background areas, text blocks, or non-interactive surfaces—it's reserved for CTAs and focus indicators only.
• Don't apply shadows with blur radius greater than 40px or opacity greater than 12%—this maintains the clean, modern aesthetic and prevents visual heaviness.
• Don't use border-radius values of 0px (sharp corners) in primary UI elements—all surfaces should use at least DEFAULT radius (8px) to maintain the 'soft-technical' aesthetic.
• Don't mix font families—Geist is the single typeface for all UI text, including headings, body, and labels. Never introduce system fonts or serif typefaces.
• Don't apply multiple shadows to a single element or use shadows with high opacity (>15%)—this creates visual noise and contradicts the 'calm' brand positioning.