colors, type, spacing and components that keep every page consistent. everything here is live: change a style once and the whole template follows.
01
colors
surface
4 styles
canvas
#ffffff · surface/canvas
secondary
#f0f0f0 · surface/secondary
elevated
#f7f7f7 · surface/elevated
muted
#eaeaea · surface/muted
text
4 styles
primary
#000000 · text/primary
secondary
#666666 · text/secondary
muted
#888888 · text/muted
inverted
#ffffff · text/inverted
border
3 styles
subtle
#e0e0e0 · border/subtle
medium
#dadada · border/medium
strong
#a0a0a0 · border/strong
brand
2 styles
black
#000000 · brand/black
white
#ffffff · brand/white
02
typography
Aa
host grotesk
primary sans · 300 / 400
headings, body copy, navigation and ui.
Aa
imbue
editorial serif · 400
category titles, accents and project names.
Aa
italianno
script accent · 400
numbers, years and signature touches.
display
display/giant editorial
imbue · 300 · 100 / 1em
01 / halo
display/hero title
host grotesk · 300 · 80 / 70
product design
display/editorial serif
imbue · 400 · 60 / 0.7em
smart home
display/sub editorial
imbue · 400 · 44 / 1em
projects.
headings
heading/large
host grotesk · 300 · 60 / 1.1em
objects people love to use
heading/section
host grotesk · 300 · 40 / 1.1em
simple answers to common questions
heading 1
host grotesk italic · 300 · 48 / 48
halo
heading/medium
host grotesk · 400 · 28 / 26
industrial design
heading/small
host grotesk · 400 · 24 / 28
cmf & finish
body
body/lead
host grotesk · 300 · 24 / 28
hey, i’m hasnain, a product designer shaping calm, useful objects.
body
host grotesk · 300 · 24 / 1.2em
every project starts with research, sketches and honest prototypes.
body 2
host grotesk · 400 · 28 / 1.2em
have an idea worth building?
body/medium
host grotesk · 400 · 20 / 28
a 30-minute intro call to scope the brief.
body/regular
host grotesk · 400 · 18 / 1.2em
reading text for case studies, research notes and details.
body/small
host grotesk · 400 · 14 / 1.1em
industrial design · cmf · prototyping
body/extra small
host grotesk · 400 · 12 / 1.2em
© 2026 hasnain. all rights reserved.
script & ui
script/large accent
italianno · 400 · 44 / 40
halo
script/year badge
italianno · 400 · 32 / 40
2026
ui/tag label
host grotesk · 400 · 16 / 1.2em
product design
03
spacing & radius
spacing
4
icon gaps
8
label stacks
12
pill gaps
16
inner padding
20
page gutter
24
card padding
40
tablet inset
60
column gap
80
section inset
120
section rhythm
radius
14px
inputs
20px
cards & faq
28px
panels
60px
buttons & pills
120px
gallery images
capsule
project cards
04
components
orb button
primary call to action with a glass orb, letter roll and magnetic hover. size, icon, orb and surface are all controls.
on dark · hero and footer
on light · tiny → large
buttons
the form submit button (default, sending, sent and error states) and the outline pill used on case studies.
headings
the numbered section title and the large statement link used for the email on the contact page.
faq item
a calm accordion row with a smooth open and close. question and answer are controls.
what does a typical product project include?
do you work with manufacturers?
yes. i prepare production-ready files and stay involved through tooling, samples and final cmf sign-off.
service row
a service title with up to three inline labels, used in the services section.
pills & fields
status pill, selectable chips and the underline field used in the contact brief.
available for new projects
industrial design
cmf & finish
prototyping
3d visualisation
01 — your name *
jane smith
project capsule
the pill-shaped project card from the home slider, with its italianno number and title.
smart home
projects.
01
halo
ticker
the looping “let’s talk” band that opens the footer on every page.
05
motifs & icons
asterisk
section markers, badges and the brand mark.
grid lines
five hairlines that frame every section.
noise grain
a 3% film grain over every light section.
capsule
the pill shape behind project cards, swatches and buttons.
01 02 03
italianno numbers
a handwritten counter for projects, steps and years.
hairlines
1px dividers in border / subtle, never heavier.
icons
phosphor, 1.5px stroke, always in text / primary.
06
motion & layout
scroll reveal
fade
opacity 0 → 1
rise
y 28px → 0
duration
0.9s
easing
0.22, 1, 0.36, 1
stagger
0.08s
trigger
15% in view · once
hover
buttons
spring 0.35s
images
scale 1.04–1.06 · 0.8s
links
opacity 0.6
orb
magnetic lean + glow
preloader
length
≈ 6s at 1× speed
controls
name · caption · speed
exit
curtain reveal
runs
first visit only
desktop
1200
px
inset 80 · gutter 20 · 3-column grids
tablet
810
px
inset 40 · gutter 20 · 2-column grids
phone
390
px
inset 0 · gutter 20 · single column