Style Guide
This project is made with Flow base library
Modify the elements that already exist to adapt them to your own design.
All classes started with u-... are set in a embed
Follow this DOC
Typography
Headings
Element
Element
Element
Element
/ On design 85px/85px
// On desing 60px/68px
// On desing 48px/56px
// On desing 32px/40px
// On desing 32px/40px
Body
On design 24px/38px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
On design 20px/30px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
/ On design 16px/24px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
/ On design 14px/21px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- Example Ordered List
- Example Ordered List
- Example Unordered List
- Example Unordered List
Line Clamp
The next custom atributes are set at the ... embed as root variables.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Color
This colors are set in the color embed as root variables.
Background
Dark 1
Dark 2
White
Light Gray
Accent 1
Text
Dark 1
Dark 2
White
Light Grey
Primary
Components
Buttons
Forms
Thank you for your submission!
Thank you for your submission!
Card

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Utilities
Layouth
Size
Margin
Full
Left & Right
margin-right: auto;
Bottom
Top
Padding
Top
Botton
Full
Overflow
Pointer Events
Display + position
Rounded Corners
Modes
Full Class Utilities
Layout
Section
Container
Grid
Default gap is set in the spacing embed
Max Widths
Modifiers
On tablet

On mobile landscape
Wrappers
//
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
//
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// gap 32px
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// gap 8px
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
// gap 1rem
//
F3 Framework Base
Spacers
Global Top and Bottom padding
// On design Desktop: 80px
// On design Desktop: 120px
// On design Desktop: 80px
// On design Desktop: 64px
// On design Desktop: 96px
// On design Desktop: 128px
Flow base library Setup
- Method: Rems
- Design width: 1440px
- Max-width: 1920px