components.
flora components have no colour of their own. on BG sites, like this one, they're black and white. inside a product we build for others, they take on that product's colour. drag the hue above to try it.
navigation.
tabs · carousel · sidebar nav · command palette · site header
tabs
the active indicator is a 2px accent underline that scales in.
segmented, on a sunken track, with the active thumb raised on a shadow.
carousel
one item at a time, its neighbours small and faded either side. the arrows wrap at the ends.
every item at once, the current one filled. use it when the items fit on one line.
sidebar nav
the current item gets a 2px accent bar on its left edge.
command palette
opens with ⌘K over a blurred page. use the arrow keys and enter; typing filters the list.
site header · footer
both are live on this page: the sticky header at the top and the footer at the bottom. on narrow screens the header's links fold into a menu button.