Text-001 / Text
V18 - [ TEXT - font size: 64px, line height: 77px, tracking:- 0.5px ]

Travel to Peru with the kitchen of Omar Malpartida all the way from the Mediterranean

Text-001 / Text
V17 - [ SECTION - expand: right | TEXT - font size: 19.74px, line height: 1.5, tracking: 0.25px, columns: 1/4 ]

Text-001 / Text
V16 - [ SECTION - expand: left | TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, columns: 1/3, divider: ON ]

Text-001 / Text
V15 - [ SECTION - container: small | TEXT - font size: 23.69px, line height: 1.5, tracking: 0, columns: 1/2, drop cep: ON, add divider: ON ]

Perhaps the most important team to achieve buy-in from is the development team. When communicating to developers, make sure to stress how design systems will make their lives easier.

According to Stuart Frisby, the head of design for Booking.com, “The primary benefit to developers is that it reduces repetitive, dull work from their workload.” Frisby cites the amount of effort that goes into coding something like a mobile carousel. With a design system, Frisby says, a developer can code this once and then reuse it indefinitely.

It also allows them to invest the time and energy into creating high-quality code upfront, since they know it will be put to good use. “Engineers that pride themselves on creating good performant work don’t want to cut corners,” says Frisby. “If they can use the carousel in the design system, and be sure that it will work, and be sure that it will be better than what they can create in the 2 or 3 days they have in the sprint, they will see the benefit immediately. You only really need an engineer to have that realization once to become an advocate for the design system.”

Another important point is to communicate the design system as a solution to technical debt. According to Aarron Walter, InVision’s VP of education, “A design system means standardized code components that are easier to maintain, lighter weight, and you can potentially improve the speed of a product by having standardized pieces of code, because you’re not recreating things over and over again. You’re reducing entropy.”

Text-001 / Text
V14 - [ TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, columns: 1/3 ]

In the 1960s, computer technology began outpacing the speed of software programming. Computers became faster and cheaper, but software development remained slow, difficult to maintain, and prone to errors. This gap, and the dilemma of what to do about it, became known as the “software crisis.”

In 1968, at the NATO conference on software engineering, Douglas McIlroy presented component-based development as a possible solution to the dilemma. Component-based development provided

a way to speed up programming’s potential by making code reusable, thus making it more efficient and easier to scale. This lowered the effort and increased the speed of software development, allowing software to better utilize the power of modern computers...

Now, 50 years later, we’re experiencing a similar challenge, but this time in design.

Text-001 / Text
V13 - [ TEXT - font size: 23.69px, line height: 1.5, tracking: 0, columns: 1/2, add divider: ON ]

Relying on systems fonts greatly improves page performance and can also help your web application/site blend in with the user’s operating system.

Readability is strongly linked to familiarity, so this helps create a more fluid reading experience, allowing your users to focus on your content. Varying the font-weight of different pieces of text can help create contrast between pieces of information.

It can help call attention to a piece of content, or help to make a smaller font-size a bit more readable. In Elements of Typographic Style, Robert Bringhurst suggests we keep two things in mind when playing with font-weight. Use bold weights sparingly. Font-weight should decrease as font-size increases.

Text-001 / Text
V12 - [ TEXT - font size: 11.85px, line height: 1.5, tracking: 2px, measure: line lengths ~80 characters, centered: ON, columns: 1/2 ]

Shuffle features a spacing scale based on powers of two that starts at .25rem (for most devices this will be the equivalent of 4px). Since Shuffle uses rem units with px as a fallback, if a user has declared a different base font-size for their device, your spacing will scale based on a defined ratio that has stood the test of time.

As powers of two will always produce integers, there will be no problems with sub pixel rendering across browsers. Computers aren’t that great at math and so decimals lead to inconsistencies across platforms. Inconsistencies should be avoided where possible. You’ll find that when using a well thought out scale - things just line up. It works, with little effort, regardless of your design knowledge or sensibilities.

Text-001 / Text
V11 - [ SECTION - container: small | TEXT - font size: 11.85px, line height: 2, tracking: 2px, uppercase: ON, columns: 1/2 ]

Spacing comes in two flavors. Depending on borders and background colors, the difference between padding and margin can be invisible to the naked eye of the user. But to a developer, they serve different roles. Most codebases lack a ratio based scale and instead are littered with values that are just magic numbers. This is bad.

Good design is based on math. Certain patterns and ratios are so prevelant in nature and music that they can't be denied as elegant design solutions. Even in the 18th century, pages in books were designed with ratios. In the 21st century, we have gotten away from this on the web, often using magic numbers to match a 'spec' that has been produced in a graphics program such as photoshop, illustrator, or sketch. While these programs are useful for sketching ideas, they aren't 100% accurate in their reflection of how the web works across device sizes or how things get drawn to the screen.

Text-001 / Text
V10 - [ TEXT - font size: 23.69px, line height: 1.5, tracking: 0px, measure: line lengths ~45 characters, centered: ON, drop cap: ON ]

Often times, websites devote a non-trivial amount of css to setting font-size. They declare an unnecessary amount of different font-sizes that upon inspection, don’t come close to resembling a sane type scale.

Text-001 / Text
V9 - [ TEXT - font size: 19.74px, line height: 1.5, tracking: 0.25px, measure: line lengths ~66 characters, align: right ]

Line-height affects how easy it is to read a piece of text, so having a well constructed set of values can help make your text easier to read, increasing the chances that people will read it. Shuffle recommend to set text at three common line-height values. 1.5 for body copy, 1.25 for titles, and 1 for text that doesn’t wrap.

Text-001 / Text
V8 - [ TEXT - font size: 33.57px, line height: 1.5, tracking: 0.25px, measure: line lengths ~45 characters, centered: ON ]

Measure refers to the length of a line of text. It is one of the most important aspects of readability. Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page… the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters.

Text-001 / Text
V7 - [ TEXT - font size: 15.8px, line height: 1.5, tracking: 0.15px, measure: line lengths ~45 characters, drop cap: ON ]

To create and design an easily readable interface, you don’t need more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice. Using the class extension namespaces you can set the font-size for any particular breakpoint that you desire.

Don’t spend time constantly overriding font-sizes in your css. If you don’t like a default font-size for an element, use the utilities to quickly make the text larger or smaller until it looks just right.

Text-001 / Text
V6 - [ TEXT - font size: 47.39px, line height: 1.25, tracking: 0px, measure: line lengths ~66 characters, align: center, centered: ON ]

Shuffle isn’t just a monolithic template. It’s a big collection of sections that can be mixed and matched or used independently. Use what you need. Leave the rest.

Text-001 / Text
V5 - [ TEXT - font size: 13.82px, line height: 1.75, tracking: 1.25px, measure: line lengths ~66 characters, uppercase: ON, centered: ON ]

The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection… In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years… This is the typographic equivalent of the diatonic scale.

Text-001 / Text
V4 - [ TEXT - font size: 59.23px, line height: 1.25, tracking: -0.5px, measure: line lengths ~45 characters ]

The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection.

Text-001 / Text
V3 - [ TEXT - font size: 11.85px, line height: 1.5, tracking: 0.4px, measure: line lengths ~45 characters, align: center, centered: ON ]

Shuffle isn’t just a monolithic template. It’s a big collection of sections that can be mixed and matched or used independently. Use what you need. Leave the rest.

Text-001 / Text
V2 - [ TEXT - font size: 94.77px, line height: 1.25, tracking: -1.5px, measure: line lengths ~80 characters ]

Text-001 / Text
V1 - [ TEXT - font size: 11.85px, line height: 2, tracking: 2px, measure: line lengths ~66 characters, uppercase: ON ]

Everything should be 100% responsive. Your website should work regardless of a user’s device or screensize. No matter the lighting, or the device, font-sizes should be large enough and contrast should be high enough for your users to easily read your content.