image

Where am I?

Silva (latin for forest) is a modern Design System created by Ferdy Christant to build beautiful web experiences. It is a styleguide on steroids that aims to solve common design problems in a consistent, precise and predictable way. Silva utilizes modern CSS capabilities to the maximum. An optional Silva.JS layer allows you to build components using future-proof web tech.

image

Slowly cooked architecture

Silva is the result of two decades of joy and frustration in web development. It is designed to provide a robust yet modular and flexible design system comprising of a powerful core layer of declarative styles, paired with ultra reusable atomics. Best of all, the entire framework is declarative, where you can customize anything with just a few settings.

image

Forward-looking

Silva embraces the modern web and uses new standard techniques like Flexbox and Picture. It departs from ancient hacky techniques, yet makes sure that important stuff works in all common browsers. Furthermore, Silva intentionally provides no solution for patterns that no longer make sense in a mobile-first world, such as tooltips and carrousels.

Layout
image
Become the King of Layout

Layout is traditionally the most painful area of web development, where common problems are solved time and again in hacky ways. Silva provides powerful, responsive, battle-tested layout solutions that solve layout problems only once.

Style
image
Take control of Styles

Styling is personal and opinionated, yet Silva gives you the tools to keep your colors and effects managable and consistent. Declare once, reuse everywhere. Unite designers and developers with a single Design System.

Typography
image
Rant on with precision

Silva will not improve your writing, but it will improve everything else about your text. A single high quality digital font that is stylish and legible, paired by a powerful type system will make your next clickbait memorable for minutes.

Utilities
image
Attack real problems

Utilities are helpful tools that are commonly needed across a design. Not only do they save time, they keep your code base managable and consistent.

Atomics
image
Think small

Atomics are highly reusable low level elements that can be used to piece together more complex components. Typically, an atomic has many display options to make them suitable to a wide array of design needs. Although entirely optional, atomics make the difference between a styleguide and a Design system.

Components
image
Think big

Components are robust, powerful, high level reusables. Components use Silva's CSS utilities and atomics for rendering, and the light Silva.JS API to add dynamic behavior. Components are built on native technologies that are future-proof and do not lock you into a specific framework.