Styles Vazquez

Category: Design Notes

Quick reflections on design culture, process, and inspiration.

  • Quick Brand Refresh Checklist

    Fast checklist before you ship a refresh:

    • Logo system: primary, stacked, favicon; test at 16px and 200px.
    • Color: 1–2 brand anchors, 1 accent, semantic states (success/warn/error), light/dark accessible pairs.
    • Type: heading/paragraph/mono with weights locked; set link + button defaults.
    • UI kit: buttons, form fields, cards, nav, modal; add spacing tokens (4/8/12/16/24).
    • Imagery: photo style or illustration rules; add 3 hero crops that actually fit your layouts.
    • Docs: 1-page usage cheatsheet; export favicon + app icons + social share image.

    Run a final contrast audit and export an asset pack with names and sizes consistent.

  • Analog Textures, Digital Systems

    My favorite design moodboards lately start with ink, charcoal, and scanned fabric swatches. Pulling those imperfect materials into Figma or Framer keeps the final system from feeling over produced.

    Why the blend works

    • Analog grain forces restraint with gradients and shadows because you already have depth baked in.
    • Dragging real textures through auto layout exposes where components feel too stiff.
    • Clients read the comps as more human, which buys trust when we make bold interaction choices.

    I am treating these boards like seasoning: add just enough tactility to make the digital grid feel lived in. The result is a system that scales across screens without losing soul.

  • Micro Rituals That Kickstart My Design Flow

    When deadlines stack up, I rely on tiny rituals to get my head into build mode. None of them take longer than five minutes, but together they flip the switch from planning to making.

    The routine

    1. Open yesterday’s file, duplicate the artboard, and name it after today’s date so exploration feels safe.
    2. Scribble three analog thumbnails on scrap paper to chase composition before touching the mouse.
    3. Drop a neutral noise texture over the canvas at 5 percent opacity. It immediately adds depth and keeps me from over polishing flat colors.
    4. Choose a single constraint for the session, maybe only two type styles or a limited color pair, to create intentional tension.

    These micro habits shrink the activation energy. Instead of waiting for inspiration, I build a runway for it.

  • How Huron John Keeps Me Locked Into Design Mode

    How Huron John Keeps Me Locked Into Design Mode

    My focus playlist is 60 percent Huron John. His collage pop production mirrors the way I layer grids, textures, and motion across a layout, so the music keeps my brain playing instead of grinding gears.

    Sonic cues that fuel the work

    • Unexpected drops remind me to build surprise-and-delight moments into otherwise functional UI flows.
    • Warm bass with crisp percussion mirrors a palette of muted neutrals punctuated by electric accents.
    • Lo-fi vocals leave enough negative space for me to sketch or wireframe without lyrical distraction.

    When I get stuck in pixel perfect loops, I loop “Bianca, I’m sorry” or “Why Saga” and let the elastic BPM nudge me back into experimentation. Great soundtracks are creative collaborators, not just background noise.

  • Cracker Barrel Needs a Rebrand, Just Not the One We Saw

    Cracker Barrel Needs a Rebrand, Just Not the One We Saw

    Cracker Barrel absolutely needs a brand refresh. The roadside nostalgia story feels frozen in amber while their audience has changed. But the rebrand concepts that floated around online last week miss the heart of the problem.

    Where the refresh fumbles

    • Nostalgia got sanded off: replacing woodcut textures with sterile gradients erases the southern craft story that makes the stop memorable.
    • The typography is indecisive: swapping slab serifs for a geometric sans drains the voice without replacing it with something confident.
    • No systems thinking: the palette, interiors, packaging, and digital touchpoints feel like separate pitches stitched together.

    The rebrand should modernize service moments—ordering, retail browsing, dietary transparency—while protecting the honest materials that people expect when they walk into that porch. Give me updated iconography, better legibility, and inclusive photography, but let the brand keep the smell of cedar planks.

  • Teenage Engineering Keeps Design Playful and Precise

    Teenage Engineering keeps showing the rest of us how to balance whimsy with razor sharp industrial design. Their OP-1 field recorder and TP-7 remind me that tactile delight can sit next to clinical precision without feeling childish.

    Why their approach still hits

    • Controls double as storytelling: every knob, color, and animation explains what it does before you touch it.
    • They design for portability without sacrificing stature, so pulling the gear out in public feels like a flex instead of a compromise.
    • The interface voice never breaks character, which makes the ecosystem feel like a shared universe rather than a spec sheet.

    When I map out new product flows, I now ask “where is the playful moment?” and “where is the exacting checkpoint?” Teenage Engineering proves you can answer both questions with the same component.

  • UI Microcopy With AI Guardrails

    Keep AI-generated copy usable and on-brand:

    • Start with tone constraints: “confident, concise, no exclamation marks, US English.”
    • Limit length: set character caps per component (e.g., 28 chars for buttons).
    • Ban words list: remove fluff like “seamless,” “delight,” “experience.”
    • Batch in Figma: request variants, then pick and edit manually.
    • Run accessibility: ensure clarity at 6th–8th grade reading level for key flows.

    Prompt starter: “Write 3 CTA options, max 22 characters, confident and clear, avoid marketing fluff.”

  • 2025 Color Directions

    Color moves showing up across brand and product:

    • Muted neons: electric hues with 60–70% saturation for digital glow without eye fatigue.
    • Molten metallics: bronze/copper gradients used as accents, not full fills.
    • North Sea blues + warm clay: calm UI base with earthy contrast for CTA states.
    • Duotone overlays: keep two-color photo treatments for fast, cohesive hero systems.
    • Accessible contrast: always run WCAG AA checks, especially on neons over dark.

    Palette starter: #0f172a (ink), #f97316 (molten), #22d3ee (muted neon cyan), #f4eade (canvas), #c084fc (accent).

  • Basquiat’s Crown for Modern Branding

    Channeling Basquiat’s crown in contemporary branding without copying:

    • Use the crown as energy, not a literal mark: translate it into angular accents or step shapes.
    • Keep the hand-drawn vibe: textured strokes or pressure-sensitive lines, not perfect vectors.
    • Palette: one saturated yellow + charcoal + off-white; avoid full graffiti rainbows.
    • Pair with raw, condensed type; track it tight to mirror street signage.
    • Apply sparingly: as a corner tag, section marker, or merch badge—not the primary logo.

    Best for: streetwear drops, art-led events, or brand moments that need edge without losing clarity.

  • Roy Lichtenstein-Inspired Texture

    Using Lichtenstein cues without going full comic book:

    • Halftone dots: keep scale subtle (18–24px) and opacity under 40% to avoid moiré.
    • Primary palette: mix one pop color with neutrals; avoid full CMYK stack.
    • Ben-Day overlays on photos: overlay mode + clipped mask preserves detail.
    • Speech bubble shapes as layout anchors—not literal text—so you keep it editorial.
    • Pair with a geometric sans (no outlines) to modernize the reference.

    Great for: promo posters, gallery mailers, or hero banners that need punch without kitsch.