Brand Identity System

AXYZ
DESIGN & CNC

Version 1.0 — 2026
Founder Augustin Cortez
Web multiaxyz.com
Classification Confidential
Brand Essence
Positioning · Personality · Voice
01
Positioning

AI-enhanced industrial design and precision CNC machining — executed with engineering depth and creative intelligence. From first sketch to production-ready reality.

Brand Personality
Honest Thorough Aloof Efficient Loyal Precise Controlled
Tone of Voice

Direct, confident, slightly detached. No hype language. Communicate results, not enthusiasm. The work speaks — the brand doesn't need to shout.

✕ "We bring your ideas to life!"
✓ "Tell us what you're building. We'll show you how to make it."
✕ "Amazing cutting-edge solutions!"
✓ "Built With Precision."
Signature Feel

"We know exactly what we are doing — and we don't need to prove it."

Every touchpoint should feel intentional, controlled, and quietly confident. Nothing loud. Nothing wasted.

Company Name — The full legal and trademarked name is MULTI AXYZ DESIGN & CNC. "Multi" is reserved for legal documents, formal correspondence, business registration, and print collateral where the full entity name is required.

On all web interfaces, hero headings, signage, and digital touchpoints, the display name is AXYZ DESIGN & CNC — no "Multi." The word "Multi" is embedded in the domain (multiaxyz.com) and in the registered identity but is intentionally omitted from display typography to keep the brand mark short, bold, and memorable.
✕MULTI AXYZ DESIGN & CNC (in a hero heading)
✓AXYZ DESIGN & CNC (in a hero heading)
✓MULTI AXYZ DESIGN & CNC (on a business card legal line or invoice)
Color System
Primary Palette · Gradient · Accent Usage
02
Midnight Navy
Primary Dark · Background
HEX #0b1624
CSS --navy
CMYK 81/46/0/77
Space Gray
Secondary Dark · Cards
HEX #111f33
CSS --navy-mid
CMYK 24/14/0/78
Deep Teal-Black
Depth · Gradient Anchor
HEX #0d2b2b
CSS --teal-dark
CMYK 76/3/0/76
Cold White
Text · Light Elements
HEX #e8edf2
CSS --off-white
CMYK 8/5/0/0
Electric Teal
Accent · Highlights · CTAs
HEX #3ecfbf
CSS --accent
CMYK 70/0/8/19
Brand Gradients — Core Identity System
Primary
Hero sections · print · above the fold
background: linear-gradient(45deg, #0b1624, #111f33, #0d2b2b, #0b1a1a);
CSS Variable: var(--grad-primary)
Secondary
Web · scrolling content · section backgrounds
background: linear-gradient(145deg, #0b1624, #111f33, #0d2b2b, #0b1a1a);
CSS Variable: var(--grad-bg)
Tertiary
Alternate layouts · mirrored compositions
background: linear-gradient(315deg, #0b1624, #111f33, #0d2b2b, #0b1a1a);
CSS Variable: var(--grad-tertiary)
Radial
Special content · reveals · spotlight moments
background: radial-gradient(ellipse at 50% 50%, #0e2a2a, #111f33, #0b1624, #0b1a1a);
CSS Variable: var(--grad-radial)
Accent Usage Rule — Use Electric Teal sparingly. Its purpose is to highlight key actions, links, and data points. Never let the accent dominate a layout. Restraint is the signal — overuse destroys the effect.
Typography
Fonts · Hierarchy · Rules
03
Web + Print — Display
Bebas Neue
  • All web headlines and section titles
  • Navigation labels and CTAs
  • Print headlines (secondary to Centrifuge)
  • Business cards — supporting display
  • All caps, tight tracking
All Media — Body
DM Sans
  • All body copy web and print
  • Descriptions and UI labels
  • Form fields and data
  • Weight 300 (light) for body
  • Weight 500 for emphasis
Print Only — Company Name
Centrifuge
  • Company name "AXYZ Design & CNC" on all print
  • Business cards — primary display
  • Print advertisements and collateral
  • Never used on web or digital interfaces
Display / H1 AXYZ DESIGN Bebas Neue · clamp(4rem,6vw,8rem)
Display Accent
& CNC suffix & CNC Bebas Neue · clamp(2rem,3.2vw,3.8rem) · accent color · always smaller than H1
Section / H2 OUR SERVICES Bebas Neue · clamp(2.5rem,4vw,5rem)
Label / Eyebrow INDUSTRIAL DESIGN & CNC DM Sans · 0.65rem · 0.28em tracking
Body AI-enhanced design. Real-world results. From first idea to production-ready solution. DM Sans 300 · 0.95rem · 1.8 line-height
Caption / Meta multiaxyz.com · 2026 DM Sans · 0.68rem · muted color
& CNC Display Rule — In all large display headings, "AXYZ DESIGN" appears at full H1 scale. "& CNC" always follows on its own line at roughly half that size, in Electric Teal. Never match the two at the same size — the hierarchy communicates brand identity. This treatment is demonstrated on the homepage hero and must be preserved across all hero sections and large-format print.
Logo Usage
Placement · Backgrounds · Rules
04
AXYZ Logo AXYZ
On Brand Gradient ✓
AXYZ Logo AXYZ
On Black ✓
AXYZ Logo AXYZ
On Light — Dark Version ✓
✓ Do
  • Use white or light logo on dark gradient backgrounds
  • Maintain clear space equal to logo height on all sides
  • Use dark version on light backgrounds only
  • Keep logo proportional — never stretch or distort
  • Use on print with Centrifuge wordmark alongside
  • Stack "Design" and "& CNC" on separate lines in all brand lockup contexts — the logo mark should be slightly taller than the full text stack
✕ Don't
  • Place logo on busy or cluttered image areas
  • Apply drop shadows or glows to the logo
  • Change logo colors outside approved palette
  • Rotate or skew the logo
  • Use at small sizes where detail is lost
Business Cards
Landscape · Portrait · US Standard 3.5" × 2"
05
Landscape — 3.5" × 2" — Primary Format
AXYZ Design & CNC
Augustin Cortez Designer · Founder
COMING SOON
Front
multiaxyz.com
(714) 725-8446 multiaxyz@icloud.com
COMING SOON
Back
Portrait — 2" × 3.5" — Alternative Format
AXYZ Design & CNC
Augustin Cortez Designer · Founder
COMING SOON
Front
multiaxyz.com
(714) 725-8446 multiaxyz@icloud.com
COMING SOON
Back
Print Specs — US Standard 3.5" × 2". Bleed: 0.125" on all sides. Safe zone: 0.125" from trim edge. Resolution: 300 dpi minimum. Color mode: CMYK. Background gradient prints as a spot-color approximation — confirm proof with printer before full run.
UI Elements
Buttons · Dividers · Tags · Borders
06
Buttons
Start a Project →
Primary CTA
Explore Services →
Ghost / Secondary
View Full Case Study →
Accent Outline
Tags & Labels
Industrial Design CNC Machining N.I.M.S. Certified 5-Axis Rapid Prototype
Dividers & Borders
rgba(255,255,255,0.08) — default border
rgba(62,207,191,0.2) — accent border
gradient fade — decorative
Border Radius
0
sharp
6px
S
12px
L
16px
XL
pill
Token Value Usage
Pill50pxButtons, tags
XL16pxLarge cards — testimonial, resume-card
L12pxStandard cards — service, credential, stat-glass, about-img stacks, project grid, carousel
M10pxCompact panels — machine groups
S6pxInputs, buttons, spec chips, nav/footer buttons
Sharp0Hero, full-bleed sections, service icons, dividers
Motion
Transitions · Animation · Timing
07
Scroll Reveal
Typefade + translateY
Duration0.85s
Easingcubic-bezier(.23,1,.32,1)
Offset36px upward
TriggerIntersectionObserver
Hover States
Duration0.2s – 0.3s
Easingease
Propertiescolor, border, bg
Scale1.02 – 1.06 max
Feelsubtle, controlled
Page Transitions
Typefade
Duration1.2s – 2.0s
Easingease
Bouncenever
Flashnever
Marquee / Loop
Duration28s
Directionalternate strips
Easinglinear
Pausecontinuous
Stats Counter
Duration1500ms
Typecount up
Triggerscroll into view
Onceyes — fire once
Hero Orbital System
CSS Ring 1654px diam · 25s · spin forward · ::before inner sweep
CSS Ring 2854px diam · 40s · spin reverse · ::after outer sweep
CSS Ring 3854px diam · 35s · spin-soft forward · moderate drift
Orbit PNG drift~894px visual · 42s · spin-center reverse · mix-blend: screen
Orbit PNG rotate1100px wide · 18s · orbit-spin reverse · pure rotation
Corner PNG480px · 28s · corner-spin forward · lower-right corner · opacity 1
Centre494px circle (video on homepage · headshot on about page)
Feelslow-mass orbit — rings drift past each other at different radii
Pageshomepage hero + about hero — identical system
Decorative Element System
Logo peekswhite PNG, opacity 1, partially off-frame — clip gives subtlety
Orbit accents380px PNG, teal filter + mix-blend: screen, opacity 1, corner-spin
CTA watermarkfull logo centred, mix-blend: screen, opacity 1 — #contact, .portfolio-cta-banner
Transformsrotate / scaleX(-1) / scaleY(-1) per section — no skew or distort
Sections coveredservices · about · process · testimonials · contact · experience · credentials · skills · portfolio hero · projects · project grid · CTA banners
Ruleopacity = 1 always — use position + overflow:hidden for visual weight control
Section Element Position Transform Animation
#serviceslogo peektop:100px; right:-300pxrotate(-8deg)—
#servicesorbit ringtop:-140px; left:-140px—corner-spin 38s
#aboutlogo peekbottom:-180px; left:8%scaleX(-1) rotate(6deg)—
#aboutorbit ringbottom:-140px; left:-140px—corner-spin 44s reverse
#processlogo peektop:-180px; right:12%rotate(-12deg)—
#processorbit ringtop:-140px; right:-140px—corner-spin 32s
#testimonialslogo peektop:80px; left:-260pxscaleX(-1) rotate(-10deg)—
#testimonialsorbit ringbottom:-140px; right:-140px—corner-spin 50s reverse
#contactlogo watermarkcentred 50%/50%translate(-50%,-50%)—
.about-experiencelogo peektop:100px; right:-300pxrotate(12deg)—
.about-experienceorbit ringbottom:-140px; left:-140px—corner-spin 40s
.about-credentialslogo peekbottom:-180px; right:10%rotate(-8deg)—
.about-credentialsorbit ringtop:-140px; right:-140px—corner-spin 36s reverse
.about-skillslogo peektop:80px; left:-280pxscaleY(-1) rotate(10deg)—
.about-skillsorbit ringbottom:-140px; left:-140px—corner-spin 48s
.portfolio-cta-banner (about)logo watermarkcentred 50%/50%translate(-50%,-50%)—
#portfolio-herologo peektop:100px; right:-300pxrotate(-15deg)—
#portfolio-heroorbit ringbottom:-140px; left:-140px—corner-spin 42s reverse
Project 1 .project-contentorbit ringtop:-140px; right:-140px—corner-spin 35s
Project 2 .project-contentorbit ringtop:-140px; left:-140px—corner-spin 45s reverse
Project 3 .project-contentorbit ringtop:-140px; right:-140px—corner-spin 38s
.project-grid-sectionlogo peekbottom:80px; left:-320pxscaleX(-1) rotate(8deg)—
.portfolio-cta-banner (portfolio)logo watermarkcentred 50%/50%translate(-50%,-50%)—
Glass System
CSS vars--glass-blur (16px) · --glass-blur-sm (10px) · --glass-bg · --glass-bg-dark · --glass-border — all in :root of style.css
Backgroundrgba(11,22,36,0.6) standard · rgba(11,22,36,0.65) heavier · always use CSS vars, never hardcode
Blur depthprogressive: top sections 10px → mid 16px → bottom 20px. Override via --glass-blur on the section element.
Border1px solid rgba(255,255,255,0.08) + inset box-shadow — the inset shadow simulates a top-edge light catch
Shimmer::before pseudo on .service-card + .testimonial-card — 60% wide streak · 0.65s sweep · 7% white gradient · z-index:5
Ambient orb::before pseudo on sections · radial-gradient teal 5–6% · z-index:−1 · alternates 80%30% (right) / 20%70% (left) between sections
mix-blend:screenONLY on orbit PNGs + watermarks — makes black transparent on dark base (#0b1624). Never use on light sections.
Grid-gap trickgap:1px + teal background on grid → hairline between cards. border-radius on cards makes teal peek at corners = free rounded teal border. Intentional — do not fight it.
overflow:hiddenborder-radius on .about-img clips the inner img automatically (overflow:hidden on container). Set radius on the container, not the img tag.
content-visibilitycontent-visibility:auto + contain-intrinsic-size:auto Xpx on #process · #testimonials · #contact — skips off-screen paint for Lighthouse gains
Modification notesAll tuneable values carry /* ← ... */ inline comments. Locate any deco or glass block in the CSS — comments describe exactly what each line does.
SERVICE SUSPENDED
Custom Cursor
Dot8px white circle — exact mouse position
Ring34px teal outline — trails with rAF lerp (factor 0.12)
z-indexdot 999999 · ring 999998 — above all overlays
Native cursorhidden site-wide via * { cursor: none !important }
Presenceevery page — including intro, portfolio, resume, all sub-pages
Touchhidden via @media (hover: none) — native cursor restored
Rulenever suppress or override — no cursor: default in injected styles
Guiding Principle

Slow and smooth. Fade over bounce. Subtle hover — never flashy. Motion should feel like gravity, not excitement. One well-timed reveal creates more impact than ten scattered animations.

Imagery
Photography · Renders · Style
08
✓ Use
  • CNC machining in process — chips, tools, precision setups
  • Clean CAD renders with controlled lighting
  • Industrial materials — aluminum, steel, carbon, matte finishes
  • Controlled studio lighting — no harsh chaos
  • Close-up detail shots showing craft and precision
  • Dark or neutral backgrounds that let the product lead
  • Illustrated / AI-rendered concepts with brand palette
✕ Avoid
  • Bright lifestyle photography
  • Warm tones and golden hour aesthetics
  • Cluttered or chaotic scenes
  • Stock photo people smiling at cameras
  • Low resolution or heavily compressed images
  • Illustrations that are playful or cartoonish
  • Busy backgrounds competing with the subject
Do's & Don'ts
Brand Rules · Application
09
Do
  • Keep everything minimal and intentional — every element earns its place
  • Use dark backgrounds with controlled teal highlights
  • Communicate clearly and directly — results over enthusiasm
  • Use generous negative space — let content breathe
  • Maintain consistent margins and grid alignment
  • Let the work and credentials do the talking
  • Use Bebas Neue for all web display type
  • Use Centrifuge for the company name in print only
  • Apply the accent color sparingly for maximum impact
  • Use slow, smooth fade transitions — never bounce
Don't
  • Overuse the accent color — it loses power when everywhere
  • Add unnecessary decorative elements that don't serve the content
  • Use trendy or playful design elements inconsistent with the brand
  • Use warm color tones anywhere in digital or print
  • Crowd layouts — space is a design element, not wasted room
  • Use hype language or superlatives in copy
  • Use Centrifuge on the web or for anything other than the company name in print
  • Use rounded or bubbly UI shapes — keep corners tight
  • Apply gradients that clash with the brand gradient system
  • Use more than two font families in any single layout
Brand Essence — The Guiding Principle

"We know exactly what we are doing
and we don't need to prove it."

AXYZ Design & CNC · Brand Style Guide v1.0 · 2026 · Confidential