Styleguide
The tokens, text styles and components behind DesInnet.
System.
Change a colour token or a text style once and every page follows. Five rules keep the template consistent.
Tokens
Every fill is a colour token and every text uses a text style.
Grid
32 px side padding on desktop, 24 px on tablet, 16 px on phone, content up to 1440 px.
Sections
Sections end with large rounded corners that show the next section colour.
Hover
Links and buttons reveal their letters on hover in about 0.15 s, project images zoom slightly.
Content
Works, team, services, plans and FAQ all come from the CMS.
Black 100
rgb(13, 13, 13)
White 100
rgb(255, 255, 255)
White 40
rgba(255, 255, 255, 0.4)
White 80
rgba(255, 255, 255, 0.8)
Backgorund White
rgb(250, 250, 250)
Black 80
rgba(13, 13, 13, 0.8)
White 20
rgba(255, 255, 255, 0.2)
Black 10
rgba(13, 13, 13, 0.1)
Black 50
rgba(13, 13, 13, 0.5)
White 10
rgba(255, 255, 255, 0.1)
Grey 85
rgb(217, 217, 217)
Grey 53
rgb(135, 135, 135)
Grey 22
rgb(56, 56, 56)
Grey 12
rgb(30, 30, 30)
Dot Violet
rgba(64, 9, 230, 0.32)
Dot Green
rgba(71, 147, 36, 0.32)
Dot Grey
rgba(50, 50, 50, 0.24)
Grey 88
rgb(224, 224, 224)
Grey 79
rgb(201, 201, 201)
Grey 76
rgb(195, 194, 194)
Grey 68
rgb(174, 174, 174)
Grey 60
rgb(154, 154, 154)
Grey 40
rgb(101, 101, 101)
Black 37
rgba(0, 0, 0, 0.37)
Black Pure
rgb(0, 0, 0)
White Glass
rgba(246, 246, 246, 0.2)
Grey 30
rgb(76, 76, 76)
Footer Base
rgba(0, 0, 0, 0.06)
Grey 9
rgb(23, 23, 23)
Accent Blue
rgb(84, 99, 217)
Grey 92
rgb(235, 235, 235)
Grey 15
rgb(38, 38, 38)
Grey 33
rgb(85, 85, 85)
White 8
rgba(255, 255, 255, 0.08)
Grey 83
rgb(211, 211, 211)
White 34
rgba(255, 255, 255, 0.34)
Grey 91 Glass
rgba(233, 233, 233, 0.2)
White 25
rgba(255, 255, 255, 0.25)
Grey 84
rgb(213, 213, 213)
Grey 41
rgb(105, 105, 105)
Grey 89
rgb(228, 228, 228)
Grey 17
rgb(44, 44, 44)
Grey 19
rgb(48, 48, 48)
Grey 64
rgb(163, 163, 163)
Grey 90
rgb(230, 230, 230)
Grey 74
rgb(189, 189, 189)
Grey 47
rgb(119, 119, 119)
Grey 36
rgb(93, 93, 93)
Accent Red
rgb(247, 110, 117)
Accent Green
rgb(1, 140, 76)
Contact Violet
rgb(191, 190, 228)
Contact Pink
rgb(231, 191, 191)
Contact Sage
rgb(193, 206, 204)
Line 10
rgba(136, 136, 136, 0.1)
Black 44
rgba(0, 0, 0, 0.44)
Grey 73 Glass
rgba(187, 187, 187, 0.2)
White 70
rgba(255, 255, 255, 0.71)
Accent Pink
rgb(255, 140, 140)
Accent Yellow
rgb(255, 255, 0)
Footer Overlay
rgba(28, 28, 28, 0.23)
Accent Signal
rgb(245, 58, 54)
DesInnet
Heading 1 · Aspekta Variable 400 · 130px / 90px / 40px · lh 1.2em · h1
DesInnet portfolio studio
Heading 3 · Aspekta Variable 400 · 70px / 60px / 30px · lh 1.2em · h3
DesInnet portfolio studio
Heading 4 · Aspekta Variable 400 · 64px / 64px / 64px · lh 1.3em · h4
DesInnet portfolio studio
Body · Aspekta Variable 400 · 20px / 20px / 18px · lh 1.3em · p
DesInnet portfolio studio
Body 32 · Aspekta Variable 400 · 32px / 30px / 28px · lh 1.2em · p
DesInnet portfolio studio
Body 12 · Aspekta Variable 400 · 12px / 12px / 12px · lh 1.2em · p
DesInnet portfolio studio
Body 14 · Aspekta Variable 400 · 14px / 14px / 14px · lh 1.3em · p
DesInnet portfolio studio
Body 24 · Aspekta Variable 400 · 24px / 22px / 20px · lh 1.2em · p
DesInnet portfolio studio
Heading 3 Tight · Aspekta Variable 400 · 70px / 48px / 38px · lh 0.87em · h3
DesInnet portfolio studio
Label 12 · Aspekta Variable 400 · 12px / 12px / 12px · lh 1.2em · p
DesInnet portfolio studio
Caption 11 · Aspekta Variable 400 · 11px / 11px / 11px · lh 1.3em · p
DesInnet portfolio studio
Display 64 Tight · Aspekta Variable 400 · 64px / 52px / 40px · lh 0.95em · h2
DesInnet portfolio studio
Counter 20 · Aspekta Variable 400 · 20px / 20px / 18px · lh 1.2em · p
DesInnet portfolio studio
Counter 14 Light · Aspekta Variable 400 · 14px / 14px / 13px · lh 1.2em · p
DesInnet portfolio studio
Label 24 Bold · Aspekta Variable 400 · 24px / 22px / 20px · lh 1.2em · p
DesInnet portfolio studio
Body 20 Semibold · Aspekta Variable 400 · 20px / 18px / 16px · lh 1.2em · p
DesInnet portfolio studio
Caption 10 Bold · Aspekta Variable 400 · 10px / 10px / 10px · lh 1.2em · p
DesInnet portfolio studio
Heading 60 Tight · Aspekta Variable 400 · 60px / 44px / 32px · lh 1.02em · h3
DesInnet portfolio studio
Body 20 Light · Aspekta Variable 400 · 20px / 18px / 16px · lh 1.25em · p
DesInnet portfolio studio
Caption 8 · Aspekta Variable 400 · 8px / 8px / 8px · lh 1.2em · p
DesInnet portfolio studio
Doto 24 Black · Doto 900 · 24px / 22px / 20px · lh 1.2em · p
DesInnet portfolio studio
Display 64 Light · Aspekta Variable 400 · 64px / 56px / 44px · lh 1.2em · p
DesInnet portfolio studio
Service 96 · Aspekta Variable 400 · 96px / 64px / 36px · lh 0.64em · p
DesInnet portfolio studio
Index 16 Heavy · Aspekta Variable 400 · 16px / 15px / 16px · lh 1.2em · p
DesInnet portfolio studio
Label 16 Bold · Aspekta Variable 400 · 16px / 16px / 14px · lh 1.2em · p
Aa
Display 220 Tight · Aspekta Variable 400 · 220px / 150px / 80px · lh 0.63em · h2
DesInnet portfolio studio
FAQ Question 20 · Aspekta Variable 400 · 20px / 18px / 15px · lh 1.2em · p
DesInnet portfolio studio
FAQ Answer 15 · Aspekta Variable 400 · 15px / 15px / 13px · lh 1.8em · p
DesInnet portfolio studio
Heading 48 Bold · Aspekta Variable 400 · 48px / 40px / 30px · lh 1.2em · h2
DesInnet portfolio studio
Caption 11 Medium · Aspekta Variable 400 · 11px / 11px / 11px · lh 1.3em · p
DesInnet portfolio studio
Plan Name 40 · Aspekta Variable 400 · 40px / 26px / 34px · lh 1.2em · p
DesInnet portfolio studio
Price 75 · Aspekta Variable 400 · 75px / 44px / 60px · lh 1.08em · p
DesInnet portfolio studio
Price Unit 16 · Aspekta Variable 400 · 16px / 15px / 16px · lh 0.9em · p
DesInnet portfolio studio
Feature 15 · Aspekta Variable 400 · 15px / 15px / 14px · lh 1.2em · p
DesInnet portfolio studio
Body 13 · Aspekta Variable 400 · 13px / 13px / 12px · lh 1.3em · p
DesInnet portfolio studio
Button 16 · Aspekta Variable 400 · 16px / 16px / 15px · lh 1.2em · p
Aa
Display 500 · Aspekta Variable 400 · 500px / 300px / 150px · lh 0.8em · p
DesInnet portfolio studio
Body 20 Relaxed · Aspekta Variable 400 · 20px / 18px / 16px · lh 1.65em · p
DesInnet portfolio studio
Footer Link 16 · Aspekta Variable 400 · 16px / 16px / 15px · lh 1.12em · p
DesInnet portfolio studio
Footer Contact 28 · Aspekta Variable 400 · 28px / 26px / 22px · lh 1.08em · p
DesInnet portfolio studio
Social 12 · Aspekta Variable 400 · 12px / 12px / 12px · lh 1.2em · p
DesInnet portfolio studio
Display 64 Capital · Aspekta Variable 400 · 64px / 52px / 40px · lh 0.84em · h1
DesInnet portfolio studio
Award 32 · Aspekta Variable 400 · 32px / 28px / 22px · lh 1.2em · p
DesInnet portfolio studio
Doto 10 · Doto 800 · 10px / 10px / 10px · lh 1.2em · p
DesInnet portfolio studio
Title 20 Semibold · Aspekta Variable 400 · 20px / 20px / 18px · lh 1.2em · p
DesInnet portfolio studio
Body 11 · Aspekta Variable 400 · 11px / 11px / 11px · lh 1.25em · p
DesInnet portfolio studio
Link 11 · Aspekta Variable 400 · 11px / 11px / 11px · lh 1.2em · p
DesInnet
Display 100 Capital · Aspekta Variable 400 · 100px / 72px / 44px · lh 0.83em · h2
Aa
Display 230 · Aspekta Variable 400 · 230px / 140px / 68px · lh 0.83em · h2
DesInnet portfolio studio
Display 80 Dim · Aspekta Variable 400 · 80px / 60px / 36px · lh 0.925em · p
Aa
Display 220 Copy · Aspekta Variable 400 · 220px / 130px / 68px · lh 0.8em · h2
DesInnet portfolio studio
Display 96 Capital · Aspekta Variable 400 · 96px / 72px / 44px · lh 0.77em · p
DesInnet
Display 128 Capital · Aspekta Variable 400 · 128px / 96px / 56px · lh 0.77em · h2
DesInnet
Display 120 Gradient · Aspekta Variable 400 · 120px / 96px / 56px · lh 0.8em · h1
DesInnet portfolio studio
Body 20 Book · Aspekta Variable 400 · 20px / 18px / 16px · lh 0.95em · p
DesInnet portfolio studio
Service Label 24 · Aspekta Variable 400 · 24px / 22px / 18px · lh 1.1em · p
DesInnet portfolio studio
Body 13 Relaxed · Aspekta Variable 400 · 13px / 13px / 13px · lh 1.5em · p
DesInnet portfolio studio
Role 40 · Asap 500 · 40px / 36px / 30px · lh 1.1em · p
Aa
Wordmark 230 · Aspekta Variable 400 · 230px / 230px / 230px · lh 0.82em · p
DesInnet portfolio studio
Button DOTO 16 · Doto 400 · 18px / 18px / 16px · lh 1.2em · p
DesInnet portfolio studio
Button DOTO 24 · Doto 400 · 26px / 24px / 22px · lh 1.2em · p
DesInnet portfolio studio
Feature 15 White · Aspekta Variable 400 · 15px / 15px / 14px · lh 1.2em · p
Hours in design
3
0
1
2
3
2
0
1
2
,
3
0
1
2
3
7
0
1
2
3
4
5
6
7
8
0
1
2
3
4
5
6
7
8
+
VFX Artist
Lina Ortega
Breakpoints: Desktop from 1280 px, Tablet from 810 px, Phone below 810 px.
The layout template holds the navbar, the intro and the footer. Each page sets Backdrop and Show Footer in its page controls.
Side padding 32 / 24 / 16 px, section gaps scale to about 60 percent on phone, large radii halve on phone.
Intro: Marquee Curtain in the layout template. Turn it off with the Show Intro control on the Intro instance.
Headings rise word by word when they scroll into view. Section blocks fade up 48 px once.
Stat numbers roll from zero with the Digit component. Reduced motion settings are respected.
Works: title, cover, summary, dot colour, hero image, intro, body, galleries 1 to 6, more images, category, year, client and note. Each work gets its own page at /works/slug.
Team: name, role, photo and colours. Services and Service Cards feed the Services page. Plans: name, price, features and the contact page each plan button opens.
08
/
Styleguide
Studio 4, 18 Kestrel Yard,
Ancoats, Manchester,
M4 9ZZ, UK
No: 12730.34930012
© 2026 DesInnet Studio Ltd. All rights reserved
DesInnet
Remix project