Hi, I'm

Toney Mauzy

Download Resume PDF

Role / UX/UI Designer & Senior Frontend Developer

Loc / Atlanta, GA

Avail / ASAP

Philosophy 001

I bridge the gap between high-fidelity design systems and production-grade engineering.

I bridge the gap between high-fidelity design systems and production-grade engineering.

Diagram of the frontend stack: JavaScript at the centre, linked to HTML, CSS, TypeScript and React, with Hooks and Context feeding React

Full Stack Frontend

HTML5 / CSS3 / Javascript / React

Component sheet showing button, input field, checkbox, radio and toggle states

UX/UI Engineering

Typography / Design Systems / Figma

Hub diagram linking AI to LLM, Prompt, Vec, Agent and Data

AI Integration

LLMs / Prompt Ops / Agents

Easing curve across six frames above a staggered bar timeline

Motion Systems

Scroll-choreo / SVG / Canvas

Delivery pipeline from Dev to Build to Test to Deploy, fanning out to three replicas behind a load balancer

Scale Infra

NextJS / Tailwind / CI-CD

Four overlapping wireframe sheets labelled W-01 to W-04

Prototypes

Rapid Dev / Scaffolding / PoC

Case Study In-Focus

A peer-to-peer marketplace for trading skills, services, and products. End-to-end design, development, and business infrastructure for a community-driven exchange platform.

01 / Market Design

02 / Platform Development

03 / Community Launch

Favor4 home page with the marketplace illustration, community stats and Why Favor4 section

Lot Num

F4-2024

Result

PENDING

Date

--/--/--

Case Study In-Focus Consolidated Edition / Oct 2026

Brand
Library

Project: Favor4
Plates: 05
Character: Approachable. Resourceful. Clear. Professional.
Message: Get what you need by offering what you can do.

Useful exchanges. Distinctive character. Warm surfaces, forest green, yellow actions, expressive typography, and a signature bottom-right curve.

01

One logo family

Plate 01 / 05

Reversed wordmark On forest

¼ H ¼ H Favor4 reversed wordmark, white lettering with the brand yellow plus-and-seven mark

Fig. 01.1Clear space is at least ¼ of the artwork height on every side

Fig. 01.2Primary / light backgrounds

Fig. 01.3Symbol

Fig. 01.4App icon

Usage standard

Clear space: Keep at least ¼ of the logo artwork’s height free on every side.
Minimum size: Wordmark: 120px wide digitally or 30mm in print. Standalone symbol: 24px tall; use the dedicated favicon below this.
Backgrounds: Use the primary logo on cream or paper; reversed logo on forest. Avoid busy photography directly behind either.
Preserve: Aspect ratio, artwork, and approved colors. No stretching, rotation, extra shadows, outlines, or gradients.

120px

24px

Fig. 01.5Minimum sizes

02

Yellow leads. Forest grounds it.

Plate 02 / 05

Use one master yellow for action fills and brand artwork. Use darker gold for readable text on pale surfaces, not a second competing brand yellow.

Primary actions

Brand yellow

#E1AC00
RGB 225 / 172 / 0

Main ink

Forest

#263B31
RGB 38 / 59 / 49

Supporting brand

Green

#486D56
RGB 72 / 109 / 86

Tinted panels

Sage

#DCE5D8
RGB 220 / 229 / 216

Page background

Canvas

#F3EEDF
RGB 243 / 238 / 223

Light surfaces

Paper

#FFFAF0
RGB 255 / 250 / 240

Fig. 02.1Master palette

Theme roles

Role	Light	Dark
Canvas	#F3EEDF	#263B31
Card	#FAF5E9	#31483B
Primary text	#263B31	#F8F2E5
Supporting text	#53665A	#C1CDBF
Text accent	#725000	#F1D889
Subtle divider	#DFD7C5	#536958

Readable by design

Forest on yellow5.77 : 1
Dark gold on paper7.05 : 1
Supporting text on paper5.91 : 1

Keep yellow useful

Bright yellow is for fills, artwork, and nonessential decoration. Do not use it as text on pale cream (2.0 : 1). Links also need an underline or another non-color cue.

Fig. 02.2Normal text needs 4.5 : 1, large text 3 : 1 (WCAG AA)

03

Character in headlines. Clarity everywhere else.

Plate 03 / 05

Fraunces / Display / 500, 600, 700

A favor for a favor.

Aa Bb Cc Dd Ee Ff Gg
0123456789 & ! ?

Medium 500

Get what you need by offering what you can do.

Semibold 600

Get what you need by offering what you can do.

Bold 700

Get what you need by offering what you can do.

DM Sans / Interface and body / 400, 500, 600, 700

Clear offers. Useful connections.
Agree on the details before you trade.

Aa Bb Cc Dd Ee Ff Gg
0123456789 & ! ?

Regular 400

Get what you need by offering what you can do.

Medium 500

Get what you need by offering what you can do.

Semibold 600

Get what you need by offering what you can do.

Bold 700

Get what you need by offering what you can do.

Fig. 03.1Set live in the brand typefaces

Type scale

Display36–56px responsive

Trade what you offer for what you need.

Section heading30px

Why Favor4?

Card heading22px

Accountable Contracts

Lead18px

List a skill, service, or product. Find something you need and agree on an exchange with another member.

Input text16px minimum

Describe what you can offer

Body14px

Accepted proposals become contracts with deadlines, file uploads, and completion confirmations from both members.

Supporting / caption13px / 12px

Secondary details, not essential instructions.

Fig. 03.2Sample copy from the live Favor4 home page

Keep the hierarchy simple

Use sentence case, a clear size difference, and generous spacing. Prefer 1.4–1.6 line-height for body copy and tighter spacing for short headings.

No decorative text effects

No gradient headings, fake bold, or logo recreation with fonts. Use forest or dark gold on light surfaces; cream or pale gold on dark surfaces.

FallbacksFraunces → Georgia → serif / DM Sans → sans-serif

04

A recognizable corner. A restrained sense of depth.

Plate 04 / 05

Favor4 combines mostly straight edges with one softer bottom-right corner. Dimensional effects support hierarchy instead of appearing on every box.

Card specimen

A clear offer

Explain what is included, what you need, and when you can deliver.

Create listing

Fig. 04.1Illustrative UI specimen, not a live action

Dark specimen

Ready to exchange?

Agree on scope and timing with your trading partner.

View proposal

Fig. 04.2Dark surface

Shape specification

Cards and standalone containers: 0 0 20px 0
Buttons and action controls: 3px 3px 14px 3px
Inputs: Square, with a clearly visible boundary
Avatars and circular controls: Preserve circular shape

Control specimen

Describe what you can offer

ContinueCancel

Minimum 44px targets. Use visible keyboard focus and retain functional labels.

Fig. 04.3Controls

Space and depth

Use a 4px spacing rhythm. Use soft shadows for elevation, inset shading for recessed surfaces, and flat panels where separation is already clear.

4

8

12

16

20

24

32

40

48

Icons and motion

Use Lucide line icons consistently. Pair unfamiliar icons with labels. Favor short 180–200ms transitions; honor reduced-motion preferences. Never use color or movement alone to convey status.

05

Show the exchange. Speak plainly.

Plate 05 / 05

Fig. 05.1Marketplace illustration for campaign and hero settings

Brand artwork

Use the marketplace illustration for campaign and hero settings. Keep copy in quieter areas, with a solid or sufficiently opaque backing when needed for contrast. On mobile, preserve readable copy rather than forcing the full scene into view.

Real people and offers

Use founder photography for ownership and credibility. Keep marketplace photos honest and useful. Unify user images through consistent framing, not artificial brand-color filters.

Authenticity

Use real, approved stories. Illustration is not customer evidence. Obtain permission for testimonials, portraits, and trade stories. Do not imply endorsements or partnerships.

Voice examples

Headline: Get what you need by offering what you can do.
Welcome: Welcome to Favor4. Start by sharing what you can offer.
Empty state: No listings yet. Add your first offer to get started.
Error: We couldn’t save your changes. Please try again.
Fees: No joining or trade transaction fees. Optional paid features are available.

Keep: specific verbs, short explanations, honest expectations.
Avoid: inflated claims, guaranteed outcomes, vague hype, em dashes, and unsupported social proof.

favor4.app

Fig. 05.2The identity in use / favor4.app

Process Chapters

01. Exploration

Diving into the Problem

The first stage of any build is deep context gathering and constraint mapping.

02. Execution

Bending Code to Form

Translating logic into performant, clean, and maintainable systems.

03. Delivery

Polishing the Artifact

Ensuring final output matches the intent and exceeds performance metrics.

Expertise Matrix

Category	Frameworks	Efficiency	Focus
Frontend Core	React, Next, Tailwind	High	Design Fidelity
Logic / Data	Node, Typescript, SQL	Stable	Scalability
Design Ops	Figma, Storybook, Prototyping	Fluid	Consistency