FELMIO / STYLE GUIDE
Make it yours.
Everything you need to make Felmio your own, in one place. Update the shared styles and components below to keep your site consistent.
Colors
Edit Accent, Base, and other shared Color Styles to update the palette across your site.
Background / Primary
#F6F5F1
Background / Surface
#FFFFFF
Text / Primary
#121411
Text / Secondary
#62665F
Border / Default
#E2E2DC
Accent / Primary
#0E7A5C
Accent / Hover
#096348
Accent / Subtle
#EAF3EE
Marker / Current
#FFB547
Status / Neutral
#EFEFE9
State / Error
#C6362B
Typography
Update the shared Text Styles to change fonts, sizes, weights, and line heights.
Display / XL
Display / L
Heading / H1
Heading / H2
Heading / H3
Heading / H4
Body / Large
Body / Default
Body / Small
Label / Caption
Label / Navigation
Label / Timestamp
Buttons
Edit the primary and secondary button components to change their appearance and hover states.
Badges
Open the Badge component to adjust its fill, text, border, and corner radius.
On track
At risk
Done
Cards
Edit the shared Card component to adjust backgrounds, borders, padding, and corner radius.
One clear place.
Keep feedback, owners and progress together.
Form fields
Edit the Input component to change borders, placeholder text, focus states, and spacing.
Spacing
Adjust section padding and layout gaps in the shared components to keep spacing consistent.
4 px
8 px
12 px
16 px
24 px
32 px
48 px
72 px
96 px
140 px
Native form states
Default
Sending
Success
Error
