Slick Brick
Style Guide
01
Typography
Our typography system establishes hierarchy and consistency across the brand. Use the classes below to style text elements consistently in Webflow.
Usage
class
font
size
Line Height
02
Colors
Name
hex code
preview
.bg-white
#ffffff
.bg-light-grey
#eee
.bg-dark-blue
#192227
.bg-dark-grey
#bfbfbf
.bg-blue-01
#49718c
.bg-blue-02
#66767f
.bg-blue-03
#6e949c
03
Buttons
04
Icons Set
Staircase UP 2 Streamline Icon: https://streamlinehq.com
5 pisos
Elevator Sign Streamline Icon: https://streamlinehq.com
elevador
Oven Streamline Icon: https://streamlinehq.com
cozinha
equipada
Unite Streamline Icon: https://streamlinehq.com
tipologias
t1 a t4
Car Park Streamline Icon: https://streamlinehq.com
estacionamento
privado
Air Condition Streamline Icon: https://streamlinehq.com
ar condicionado
Sun Set 1 Streamline Icon: https://streamlinehq.com
luz solar a
norte e sul
Solar Plant Streamline Icon: https://streamlinehq.com
Painéis
fotovoltaicos
Heater Streamline Icon: https://streamlinehq.com
bomba decalor
Map Pin 1 Streamline Icon: https://streamlinehq.com
localização
preveligiada
Swimming Pool 2 Streamline Icon: https://streamlinehq.com
piscina exterior
aquecida
Tide UP Streamline Icon: https://streamlinehq.com
Piso radiante
(T3 e T4)
Sun Field Streamline Icon: https://streamlinehq.com
vista panorâmica
sobre Leiria
Barbecue Stove Streamline Icon: https://streamlinehq.com
rooftop com área
de refeições
Computer Chips Cpu Streamline Icon: https://streamlinehq.com
Sistema domótica
Tennis Court Streamline Icon: https://streamlinehq.com
campo de ténis a
menos de 50 metros
Outdoor Mode Streamline Icon: https://streamlinehq.com
Isolamento térmico
e acústico premium
Building 3 Streamline Icon: https://streamlinehq.com
19 apartamentos
Unite Streamline Icon: https://streamlinehq.com
4 tipologias distintas
Windmill Paper Streamline Icon: https://streamlinehq.com
Ventilação mecânica controlada
05
Brand logos
06
Spacing
class name
value (rem/px)
application
Preview
.spacing-xxs
0.25rem (4px)
padding: all
.spacing-xxs-top
0.25rem (4px)
margin-top
.spacing-xxs-bottom
0.25rem (4px)
margin-bottom
.spacing-xxs-x
0.25rem (4px)
margin-left/right
.spacing-xxs-y
0.25rem (4px)
margin-top/bottom
.spacing-xs
0.5rem (8px)
padding: all
.spacing-xs-top
0.5rem (8px)
margin-top
.spacing-xs-bottom
0.5rem (8px)
margin-bottom
.spacing-xs-x
0.5rem (8px)
margin-left/right
.spacing-xs-y
0.5rem (8px)
margin-top/bottom
.spacing-sm
0.75rem (12px)
padding: all
.spacing-sm-top
0.75rem (12px)
margin-top
.spacing-sm-bottom
0.75rem (12px)
margin-bottom
.spacing-sm-x
0.75rem (12px)
margin-left/right
.spacing-sm-y
0.75rem (12px)
margin-top/bottom
.spacing-md
1rem (16px)
padding: all
.spacing-md-top
1rem (16px)
margin-top
.spacing-md-bottom
1rem (16px)
margin-bottom
.spacing-md-x
1rem (16px)
margin-left/right
.spacing-md-y
1rem (16px)
margin-top/bottom
.spacing-big
1.25rem (20px)
padding: all
.spacing-big-top
1.25rem (20px)
margin-top
.spacing-big-bottom
1.25rem (20px)
margin-bottom
.spacing-big-x
1.25rem (20px)
margin-left/right
.spacing-big-y
1.25rem (20px)
margin-top/bottom
.spacing-x-big
1.5rem (24px)
padding: all
.spacing-x-big-top
1.5rem (24px)
margin-top
.spacing-x-big-bottom
1.5rem (24px)
margin-bottom
.spacing-x-big-x
1.5rem (24px)
margin-left/right
.spacing-x-big-y
1.5rem (24px)
margin-top/bottom
.spacing-xx-big
1.75rem (28px)
padding: all
.spacing-xx-big-top
1.75rem (28px)
margin-top
.spacing-xx-big-bottom
1.75rem (28px)
margin-bottom
.spacing-xx-big-x
1.75rem (28px)
margin-left/right
.spacing-xx-big-y
1.75rem (28px)
margin-top/bottom
.spacing-xxx-big
2rem (32px)
padding: all
.spacing-xxx-big-top
2rem (32px)
margin-top
.spacing-xxx-big-bottom
2rem (32px)
margin-bottom
.spacing-xxx-big-x
2rem (32px)
margin-left/right
.spacing-xxx-big-y
2rem (32px)
margin-top/bottom
.spacing-lg
2.5rem (40px)
padding: all
.spacing-lg-top
2.5rem (40px)
margin-top
.spacing-lg-bottom
2.5rem (40px)
margin-bottom
.spacing-lg-x
2.5rem (40px)
margin-left/right
.spacing-lg-y
2.5rem (40px)
margin-top/bottom
.spacing-x-lg
3rem (48px)
padding: all
.spacing-x-lg-top
3rem (48px)
margin-top
.spacing-x-lg-bottom
3rem (48px)
margin-bottom
.spacing-x-lg-x
3rem (48px)
margin-left/right
.spacing-x-lg-y
3rem (48px)
margin-top/bottom
.spacing-xx-lg
4rem (64px)
padding: all
.spacing-xx-lg-top
4rem (64px)
margin-top
.spacing-xx-lg-bottom
4rem (64px)
margin-bottom
.spacing-xx-lg-x
4rem (64px)
margin-left/right
.spacing-xx-lg-y
4rem (64px)
margin-top/bottom
.spacing-xxx-lg
5rem (80px)
padding: all
.spacing-xxx-lg-top
5rem (80px)
margin-top
.spacing-xxx-lg-bottom
5rem (80px)
margin-bottom
.spacing-xxx-lg-x
5rem (80px)
margin-left/right
.spacing-xxx-lg-y
5rem (80px)
margin-top/bottom
.spacing-huge
6rem (96px)
padding: all
.spacing-huge-top
6rem (96px)
margin-top
.spacing-huge-bottom
6rem (96px)
margin-bottom
.spacing-huge-x
6rem (96px)
margin-left/right
.spacing-huge-y
6rem (96px)
margin-top/bottom
.spacing-x-huge
8rem (128px)
padding: all
.spacing-x-huge-top
8rem (128px)
margin-top
.spacing-x-huge-bottom
8rem (128px)
margin-bottom
.spacing-x-huge-x
8rem (128px)
margin-left/right
.spacing-x-huge-y
8rem (128px)
margin-top/bottom
.spacing-xx-huge
10rem (160px)
padding: all
.spacing-xx-huge-top
10rem (160px)
margin-top
.spacing-xx-huge-bottom
10rem (160px)
margin-bottom
.spacing-xx-huge-x
10rem (160px)
margin-left/right
.spacing-xx-huge-y
10rem (160px)
margin-top/bottom
.spacing-xxx-huge
12rem (192px)
padding: all
.spacing-xxx-huge-top
12rem (192px)
margin-top
.spacing-xxx-huge-bottom
12rem (192px)
margin-bottom
.spacing-xxx-huge-x
12rem (192px)
margin-left/right
.spacing-xxx-huge-y
12rem (192px)
margin-top/bottom
06
Spacing