Fiber Studio
Styleguide
The tokens, type and components behind Fiber.
Colour
Black 100
rgb(18, 18, 18)
Black 70
rgba(18, 18, 18, 0.7)
Black 50
rgba(18, 18, 18, 0.5)
Black 30
rgba(18, 18, 18, 0.3)
Black 10
rgba(18, 18, 18, 0.1)
Black 5
rgba(18, 18, 18, 0.05)
Black 0
rgba(18, 18, 18, 0)
White 100
rgb(250, 250, 250)
White 60
rgba(250, 250, 250, 0.6)
White 0
rgba(255, 255, 255, 0)
Typography
Brand identity, art direction, web design and motion
Heading 1 · Inter Display · 500 · 28 / 24 / 22 px · line height 1.2 · h1
Selected work from the studio
Heading 2 · Inter Display · 500 · 20 / 20 / 18 px · line height 1.3 · h2
Brand identity for a logistics company
Heading 3 · Inter Display · 500 · 18 / 18 / 16 px · line height 1.3 · h3
Meridian Group
Heading 4 · Inter Display · 500 · 16 px · line height 1.3 · h4
Art direction
Heading 5 · Inter Display · 500 · 14 px · line height 1.3 · h5
Tashkent, Uzbekistan
Heading 6 · Inter Display · 500 · 12 px · line height 1.3 · h6
We design identities, websites and motion for founders and established brands.
Body M 18 · Inter Display · 500 · 18 / 18 / 16 px · line height 1.3 · p
Every project starts with a short call and a written brief.
Body M 14 · Inter Display · 400 · 14 px · line height 1.3 · p
Photography and film on this site are demo material.
Body M 12 · Inter Display · 400 · 12 px · line height 1.3 · p
Send message
Label 14 · Inter Display · 500 · 14 px · line height 1.25 · p
Links
Link · Black 70, turns Black 100 with an underline on hover
Components
Portrait in red light
Shots card with an image or video and a title
Art Direction
Service card with up to five crossfading images
Navigation pill, fixed to the bottom of every page
Social link to a network home page
Button with Hover, Sending, Sent and Error states
Layout
32 px margins on desktop and tablet, 16 px on phone
Fixed header at the top of every page
Pill navigation floating at the bottom
Static footer at the end of every page
Square corners on all media
Motion
Hovers ease over 0.15 s
Service cards crossfade between their images
Works stack in 3D on the Home page
Reduced motion settings are respected
Content
Works
Title
Summary
Client
Year
Roles 1 to 3
Cover image or video
Image 2 and 3, optional videos
Content
Shots
Title
Image
Video