Give me That Pencil

Overview

Give me That Pencil is a playful, youth-forward e-commerce brand celebrating pop culture, gaming, and original storytelling through stamped apparel. The aesthetic is "Vibrant Maximalism"—a collision of bold color, expressive typography, and character-driven design that transforms everyday clothing into conversation pieces. The brand serves creative individuals (ages 6–40+) across Mexico who view fashion as a form of self-expression and cultural commentary. The UI evokes joy, accessibility, and creative rebellion: bright primary blues (#5271ff) and warm yellows (#fbcc51) dance across a soft sky-blue canvas (#ddf3ff), while hot pink accents (#e44c9f) punctuate key interactions. Voice: irreverent, warm, and unapologetically playful. Example sentence: "Your next favorite shirt is hiding in the RPG section—go find it."

Colors

The color system is built on three pillars: a cool, energetic primary blue (#5271ff) that anchors CTAs and navigation; a warm, optimistic secondary yellow (#fbcc51) that highlights promotions and secondary actions; and a vibrant tertiary magenta (#e44c9f) that marks featured collections and interactive states. The surface stack is anchored in a soft, welcoming light blue (#ddf3ff) that evokes clarity and playfulness, with neutral grays (#7a7a7a, #555b5b) for body text and secondary information. Primary (#5271ff) is used exclusively on main CTAs, links, and focus states—it's the brand's signature accent and must never be used for backgrounds or body text. Secondary (#fbcc51) appears on promotional badges, secondary buttons, and accent highlights; it pairs with dark text (#232323) for maximu

Typography

The type system pairs Darumadrop One (a playful, rounded display font) for headlines and hero content with Manrope (a clean, modern sans-serif) for body text and UI labels. This pairing creates visual contrast: Darumadrop One's organic, friendly letterforms (used at 48–60px for headlines) establish brand personality and emotional warmth, while Manrope's geometric precision (16–18px for body) ensures readability and professional polish. Display sizes (60px, 700 weight, -0.02em letter-spacing) are reserved for hero headlines and major section titles; headline-lg (48px, 700 weight) for subsection titles; body-md (16px, 400 weight, 24px line-height) for product descriptions and standard content. Apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm, 12px) placed over busy p

Layout

The layout follows a 12-column fluid grid with a fixed max-width of 1140px, centered on desktop and full-width on mobile (with 24px horizontal padding). The page rhythm is built on the lg spacing token (40px) for major section separation, md spacing (24px) for component padding and card margins, and sm spacing (12px) for internal element spacing. The hero section spans full-width with 64px vertical padding and a soft blue background (#ddf3ff), creating an immediate sense of playfulness. Product grids use 3 columns on desktop, 2 on tablet, and 1 on mobile, with 24px gaps between cards. Navigation and category chips are left-aligned with 12px gaps, allowing users to scan quickly. Container padding is consistently 24px on all sides for cards and modals, with 16px internal padding for input fi

Elevation & Depth

Depth is conveyed through a three-level shadow system combined with subtle vertical translation on hover. Level 1 (Base Cards): box-shadow 0 2px 5px rgba(0, 0, 0, 0.11), no transform. Level 2 (Hover/Interactive): box-shadow 0 5px 15px rgba(0, 0, 0, 0.15), transform translateY(-2px), transition 200ms cubic-bezier(0.4, 0, 0.2, 1). Level 3 (Modals/Overlays): box-shadow 0 8px 24px rgba(0, 0, 0, 0.2), no transform. Buttons and interactive cards lift on hover with a 2px upward translation and increased shadow, signaling interactivity without overwhelming the playful aesthetic. The soft blue backgrou

Shapes

The shape philosophy is "Friendly Geometry"—rounded corners that feel approachable and modern without sacrificing clarity. Buttons and primary CTAs use lg radius (1rem / 16px) for a soft, inviting appearance. Cards and containers use xl radius (1.5rem / 24px) for a more pronounced, playful feel. Input fields and secondary UI elements use md radius (0.75rem / 12px) for a balanced middle ground. Category chips and badges use full radius (9999px) for a pill-shaped, compact appearance. The rationale: larger radii (lg, xl) on high-visibility elements (buttons, hero cards) reinforce the brand's play

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (blue, #5271ff), secondary (yellow, #fbcc51), and tertiary (magenta, #e44c9f). All buttons are 48px tall with 24px horizontal padding, lg radius (16px), and label-md typography (14px, 600 weight). Primary buttons use white text on blue; secondary and tertiary buttons use dark text on their respective colors. On hover, buttons translate up 2px (transform: translateY(-2px)) and gain a md-level shadow (0 5px 15px rgba(0, 0, 0, 0.15)), with a 200ms ease-out transition. Focus state adds a 3px outline in the button's color at 20% opacity (e.g., rgba(82, 113, 255, 0.2) for primary). Active state (pressed) reverses the transform to translateY(0px) and reduces shadow to sm level.

Containers &

Do's and Don'ts

**Do**

• Do use Darumadrop One for all headlines and hero text—its playful, rounded letterforms are the visual signature of the brand.
• Do maintain the primary blue (#5271ff) exclusively for CTAs, links, and focus states; never use it for backgrounds or body text.
• Do apply lg radius (16px) to buttons and xl radius (24px) to cards to reinforce the friendly, approachable aesthetic.
• Do use the full color palette (primary blue, secondary yellow, tertiary magenta) across the interface to create visual energy and guide user attention.
• Do lift interactive elements 2–4px on hover with a smooth 200ms transition to signal interactivity without overwhelming the playful design.
• Do maintain 24px padding inside cards and 24px gaps between sections to create breathing room and let colorful imagery shine.

**Don't**

• Don't use sharp corners (0px radius) anywhere; even utilitarian elements must have at least sm radius (4px) to maintain visual warmth.
• Don't apply primary blue (#5271ff) to backgrounds, body text, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't use Manrope for headlines; it lacks the playful personality needed for the brand voice. Manrope is for body text and UI labels only.
• Don't exceed 0.2 opacity on shadows; the soft blue background (#ddf3ff) is already light, and heavy shadows will feel out of place.
• Don't use more than three button variants (primary, secondary, tertiary) in a single interface; too many colors create visual chaos.
• Don't place small text (label-sm, 12px) over busy product imagery without a text-shadow (0 2px 4px rgba(0, 0, 0, 0.08)) for legibility.