Abstract 70s Man Vector Character

Illustrator Brief & Rigging Guide: Trev

1. The Character
Trev is not just a mascot; he is the core interactive character driving the Flatties app.

Personality and Voice
Trev is the guy who is not actually cool, but he thinks he is with such unshakeable confidence that he somehow comes across as cool. He is a chaotic wind-up merchant, weird in the best way possible, and fluent in casual Kiwi slang. He is the flatmate who will drink the last of your milk and playfully roast you when you complain.

While he is chaotic, and possibly certifiable, he is not mean. He is highly encouraging. When users complete tasks, he commends their effort and encourages them to do the right thing. He just does it in his own hilariously weird, conversational voice rather than sounding like a corporate robot.

Reference dialogue: "Ah slacking off again, didnt you learn your lesson last week with the bins? They won't walk themselves out!"

Art Direction and Styling
Style: Kitsch styling with a distinct 70s retro vibe, brought into a clean, modern vector flavour. Think vintage swagger translated into high-end UI graphics.

Vibe: Unearned confidence, playful, visually expressive. Dorky dresser who somehow pulls off Napoleon Dynamite vibes.

How Trev Appears in the App
Trev will be rigged and animated to react to the user. We need multiple perspectives (Front, 3/4 Angle, Profile, Full body and upper body with arm and finger pointing) to cover these interactions:

Empty States (Bored / Waiting): Lounging around the screen, tapping his foot, or inspecting random UI elements while waiting for the user to add a task.

Task Completion (Celebration): Exaggerated, slightly cheesy 70s-style celebrations (like finger guns or a disco point) when a user pays a bill or finishes a chore.

Nudging / Reminders: Peeking in from the side of the screen (Profile view) or pointing playfully but aggressively at an overdue rent notification.

2. Colour Themes
Below are 5 theme variations that fit our dark-mode "Make" aesthetic. Please integrate one of these to build out Trev's core palette while keeping his 70s kitsch vibe alive.

1. Core Flatties
Our primary brand. Pure dark mode paired with Electric Lime and Slate greys.
#0A0A0A
#2A2A2A
#BEFF03
#FFFFFF
2. Neon Cyber
Midnight blue paired with piercing Hot Pink and Electric Cyan.
#0B0F19
#FF007F
#00F0FF
#FFFFFF
3. Toxic Sunset
Charcoal background with Neon Orange and Acid Yellow accents.
#121212
#FF4500
#E1FF00
#FFFFFF
4. Ultra Violet
Deep Violet base highlighted by Laser Purple and Mint Green.
#1A0B2E
#B026FF
#00FF9D
#FFFFFF
5. High Contrast
Pitch black with Silver midtones and stark Vermillion (Red) elements.
#000000
#888888
#FF3333
#FFFFFF

3. Vector Delivery Context
All layers properly named, expanded, and grouped. After Effects conversion to"Shape Layers" .

4. Illustrator Rigging Workflow
The vector artwork you create will be handed off to an animation engine. If the file is not correctly assembled the rig will break. This step-by-step guide is designed to ensure your workflow is fast, efficient, and perfectly structured for animation.

Document and Workspace Setup
RGB Colour Mode
Set raster effects to 72ppi
Turn on Align to Pixel Grid (View > Snap to Pixel)

Required Grouping Structure:
Create a Master Root group (e.g., Trev_Rig_Front). Nest logical groups inside it: Head, Torso, Arm_Left, Arm_Right, Legs, Feet.
Inside Head, create the following groups:
- Eye_Left
- Eye_Right
- Left_Ear
- Right_Ear
- Mouth
- Hair
- Nose
- Left_Eyebrow
- Right_Eyebrow

Designing for Articulation (Puppet Joints)
When drawing limbs (arms, legs, neck), draw the upper limb and lower limb as overlapping shapes. At the joint (e.g., the elbow or the knee), the overlapping geometry must form a perfect circle. Ensure the pivot point (the centre of that perfect circle) is exactly where the two shapes overlap.

Live stroke weights behave unpredictably when a character is scaled or warped in 3D space by an animation engine. By expanding strokes into solid vector fills, the artwork scales flawlessly.

Managing Gradients and Clipping Masks
Apply shading using standard Linear or Radial Gradients from the Gradient Panel. Do not use the Freeform Gradient tool, Gradient Mesh, or Drop Shadow effects. Avoid Clipping Masks unless absolutely mandatory. Instead, use the Pathfinder > Divide tool to manually trim shapes to fit inside one another.
Trimming native geometry ensures the file remains a tiny, lightning-fast mathematical path.

Final Exporting
Delete all hidden layers, locked references, and stray anchor points
Go to File > Export > Export As... Select SVG. When the SVG Options dialog appears, ensure Styling is set to "Presentation Attributes" or "Inline Style", and check that your Font settings are converted to outlines.
Please provide both the clean native .ai files and the .svg flat exports ready to go through to the animation phase.

5. Visual References
Below is a custom mock-up showing our intended vibe for Trev based on the visual references guiding his style.

Trev Vector Mockup Design
Reference Breakdown:

Reference 1: Men in retro tracksuits and vibrant colours (reds, blues, and yellows). We love the vintage, multi-coloured windbreaker jackets.
Reference 2: Aviator sunglasses and a prominent mustache are a must. The hair should be a bit shaggy and overgrown.
Reference 3: Tight retro t-shirts with contrasting ringer collars, paired with very short shorts (stubbies), pulled-up tube socks, and running shoes.
Reference 4: Fun, kitschy props like a vintage radio, dumbbells, or colourful umbrellas are great elements to explore.


Thanks you.