Tuckii

Overview

Tuckii is a private, local-first bookmark manager that transforms link-saving from a cloud-dependent chore into a delightful, device-native experience. The design system embodies "Playful Minimalism with Structural Clarity" — a movement that pairs bold, confident typography (Sora at 70.4px for display) with a warm cream background (#fff8ec) and strategic use of high-contrast black (#111111) and vibrant accent colors (golden yellow #ffd166, mint green #06d6a0, coral pink #ef476f). The interface evokes the feeling of a personal, tactile notebook: friendly, direct, and always in your pocket.

The brand voice is conversational yet precise, avoiding corporate jargon in favor of concrete, action-oriented language. Tone: helpful, never condescending; playful, never frivolous. Example: "Save in 1 tap from any app — your links stay on your device, searchable in seconds." The personality is indie-maker authenticity: transparent about what the app does, honest about its local-first philosophy, and genuinely invested in user privacy.

Colors

The color palette is built on a foundation of warmth and clarity. **Primary (#111111)** is the deep charcoal used for all primary CTAs (the Download button in the header, store badges), text, and structural elements. It commands attention without aggression. **Secondary (#ffd166)** is the golden yellow — a signature accent deployed on floating chips ("Save in 1 tap"), badge highlights, and the download band at page bottom. This color appears frequently enough to feel like the brand's energy, yet sparingly enough to maintain hierarchy. **Tertiary (#06d6a0)** is the mint green, reserved for status indicators and secondary accent moments. **Error (#ef476f)** is a coral pink used for destructive actions or alerts.

The surface stack is deliberately warm: **surface (#fff8ec)** is the primary cr

Typography

Sora is the sole typeface, loaded from Google Fonts at weights 300–700. The type system is built on a clear hierarchy: **Display (70.4px, 700 weight, -0.03em letter-spacing)** is reserved for the hero headline "All your links. All in one place." — commanding and bold. **Headline-lg (48px, 700 weight)** and **Headline-md (36px, 700 weight)** are used for section titles like "See Tuckii in action." **Body-lg (18px, 400 weight)** and **Body-md (16px, 400 weight)** carry descriptive copy and maintain readability at -0.01em letter-spacing. **Label-md (14px, 700 weight)** and **Label-sm (12px, 600 weight)** are applied to buttons, badges, and UI labels with 0.01–0.03em letter-spacing for crispness. All headings use a tight line-height (1.02–1.3) to reinforce boldness; body text uses 1.55–1.65 li

Layout

The page uses a fixed-width container (1160px, set via width: min(1160px, calc(100% - 40px))) centered with margin: 0 auto, creating a predictable rhythm across all screen sizes. The hero section employs a two-column grid (grid-template-columns: 0.86fr 1.14fr) on desktop, stacking to single-column on tablets and mobile. Spacing follows a semantic scale: **gutter (24px)** separates major sections, **lg spacing (40px)** creates breathing room between hero and screenshots, **md spacing (24px)** is used for card padding and component gaps. The screenshots section uses a horizontal scroll rail (grid-auto-flow: column, grid-auto-columns: minmax(258px, 286px)) with scroll-snap-type: x mandatory for touch-friendly navigation. All section padding uses clamp() for fluid scaling: clamp(54px, 8vw, 104

Elevation & Depth

Depth is achieved through a bold, graphic approach rather than subtle gradients. **Level 1 (Base):** The warm cream background (#fff8ec) with a subtle radial gradient overlay (rgba(255, 209, 102, 0.28) at top-right, fading to transparent over 30rem). **Level 2 (Standard Cards):** White or light cream cards (#ffffff or #ece3d2) with a 3px solid black border and an 8px offset shadow (box-shadow: 8px 8px #111111), creating a playful, hand-drawn depth. On hover, cards shift -2px/-2px and the shadow increases to 10px 10px, reinforcing interactivity. **Level 3 (Elevated/Feature Bands):** Darker back

Shapes

The design system embraces "Structural Boldness with Approachable Curves" — a philosophy that pairs sharp, confident borders with rounded corners that feel friendly rather than corporate. **Buttons and CTAs** use rounded: full (999px border-radius) for the header Download button and store badges, creating pill-shaped, instantly recognizable targets. **Cards and containers** use rounded: lg (28px) for standard cards and rounded: xl (36px) for feature bands, softening the edges just enough to feel modern without sacrificing clarity. **Inputs and smaller UI elements** use rounded: DEFAULT (11px)

Components

Action Elements **Button-primary** (background: #111111, color: #ffffff, padding: 10px 18px, border-radius: 999px, height: 44px, font-weight: 700, font-size: 13.6px) is the signature CTA — used for Download in the header and App Store badges. On hover, apply transform: translateY(-1px) and box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) to signal interactivity. Transition all changes over 0.15s ease. **Button-secondary** (background: transparent, color: on-surface, padding: 12px 18px, border-radius: 18px, height: 48px) is used for secondary actions like "See the step-by-step guide →"; on hover, apply background: surface-container-high and transform: translateY(-2px).

Containers & Surfaces **Card-standard** (background: #ece3d2, border: 3px solid #111111, border-radius: 28px, padding:

Do's and Don'ts

**Do**

• Do use the full 3px black border on all cards and containers — it's the structural signature that ties the system together and ensures accessibility through contrast.
• Do apply the offset shadow (8px 8px #111111 on standard cards, 10px 10px on hover) to create the playful, hand-drawn depth that defines the brand.
• Do reserve the golden yellow (#ffd166) for secondary accents and CTAs (chips, badges, download band) — it should feel special, not ubiquitous.
• Do use Sora at 700 weight for all headings and labels to maintain the bold, confident voice; 400 weight is reserved for body copy.
• Do apply clamp() for all section padding and font sizes to ensure the design scales fluidly from mobile to ultra-wide without breakpoint brittleness.

**Don't**

• Don't use subtle shadows or blur effects in place of the bold 3px border — the brand identity depends on structural clarity and high contrast.
• Don't apply rounded corners without a black border; the border is what makes the roundness feel intentional and branded rather than generic.
• Don't mix typefaces; Sora is the sole font family. Avoid system-ui, -apple-system, or fallback fonts in the design system definition.
• Don't use the accent colors (yellow, green, pink) as background fills for large areas — they should punctuate, not dominate. The cream and white surfaces are the canvas.
• Don't reduce the letter-spacing on display or headline text below -0.02em; the tight tracking is part of the bold, confident aesthetic and aids readability at large sizes.