Style families
One design system behind every Fancy Bricks piece
Most libraries give you a hundred social icons that don’t match a hundred share buttons. Here every small piece shares the same five options, so they always look like they belong together. Try them.
Try the five options
Fast to set up
Paste a section, change the words. Done in minutes.
- Unlimited websites
- Three frameworks
- Updates for a year
Soft · Neutral · Rounded · M · GrowHover a piece: its icon grows.
Try the five options, then hover the pieces.
The five options, one by one
Every option side by side on the same piece, in the order the Bricks panel lists them.
1Look
How much weight a piece has, from a plain icon that sits flush with the page to an elevated card that lifts off it. Plain has nothing to shape, so the Shape switch turns off while it’s picked.
- Plainno box
- Softa tint
- Outlinea thin edge
- Solidfilled
- Elevateda raised surface
2Tone
Your framework’s brand color, neutral grays in the heading color, or white for photos and dark backgrounds. The same three tones a template’s own buttons and badges use, so nothing clashes.
- Brandyour framework’s primary
- Neutralthe heading color
- Whiteon photos and dark sections
3Shape
Rounded, fully round, square or an organic blob. Blob is a per-component option for icon boxes rather than a shared switch, which is why the demo above shows three.
- Roundedfollows your site radius
- Rounda circle or a pill
- Squareno corners
- Blobicon boxes only
4Size
Small, medium or large, scaled from your framework’s own type and spacing scale. Never a fixed pixel value, so a size still matches a site with bigger or smaller type.
- Sa 2em box
- Ma 2.5em box
- La 3em box
5Hover
One effect family for the whole site: the icon grows, the piece pops, the piece lifts or the icon turns. Pick one and every hoverable piece, from a social icon to a share button, uses it. Nothing moves for visitors who ask for reduced motion. Hover each one.
- Growthe icon grows
- Popthe piece grows
- Liftthe piece rises
- Spinthe icon turns once
The pieces that read them
These components share the same switches in the Bricks panel, in this order: Look, Tone, Shape, Size, Hover. FBK Button names its looks Primary, Secondary, Outline and Ghost, the same four under other names.
- FBK SocialLinks to your profiles
- FBK ShareShare the current page
- FBK Icon itemIcon, title and text
- FBK Check listThe house check mark
- FBK Link listA footer column
- FBK Avatar groupOverlapping faces
- Slider arrows and dotsSolid · White · Round
- TabsPlain · Neutral
Change them site-wide
A few tuning variables in your framework set every hover speed and every lift from one place. Change one once and every template and component that reads it follows.
--fbk-ui-durationHow long every hover takes, on every piece.
--fbk-easeThe curve every move follows, so nothing bounces or snaps.
--fbk-liftHow far a Lift rises, the same on a card and on a social icon.
Every template already speaks this system
Copy any template and its pieces follow your look, tone, shape, size and hover.