Styling Text, Colors, and Spacing with CSS

From Design System to CSS

In your design work, a style guide is the source of truth for a product's visual language. It specifies which fonts to use, at what sizes and weights, and which colors represent the brand.

Let's begin by learning the CSS properties that correspond directly to this typographic scale.

Typography: The Voice of the Interface

Typography is more than just text; it's the visual expression of the content's tone and hierarchy. CSS provides a powerful set of properties to control it. The Mozilla Developer Network (MDN) offers an excellent guide on this topic.

Color: Setting the Mood

Color is fundamental to visual identity. In CSS, you can apply color to an element's text and its background.

• color: Sets the color of the text (and other foreground elements like underlines).
• background-color: Sets the background color of the element, which fills the area defined by its content and padding.

As a designer, you're used to working with specific color codes. CSS supports several formats you'll recognize from Figma's Dev Mode.

Here’s how you’d use them:

/* Using a named color */
h1 {
  color: crimson;
}

/* Using a HEX code (most common for web) */
p {
  color: #333333;
}

/* Using an RGB value */
.card {
  background-color: rgb(240, 248, 255);
}

The HEX format is the most ubiquitous for defining specific brand colors, as it's concise and universally supported.

Spacing: Creating Rhythm and Clarity

In the last lesson, we introduced the box model, which consists of margin (outside the border) and padding (inside the border). These two properties are your primary tools for implementing spacing.

A helpful way to think about them is:

• Padding is internal spacing. It creates breathing room inside an element, between its content and its border. It's part of the element itself, so it takes on the element's background-color.
• Margin is external spacing. It pushes other elements away, creating space between components. It is always transparent.

This distinction is precisely how Auto Layout works in Figma. The padding you set on a frame is padding, and the "space between" items is margin.

The short video from Web Dev Simplified that we saw in the last lesson gives a quick visual refresher on this.

This concept is so important for translating designs that it's worth reading a quick article that approaches it from a designer's perspective.

Text Layout: Spacing Within Text

Beyond the space around elements, CSS also lets you control the spacing within blocks of text, which is critical for readability.

Let's return to the MDN article to cover these final properties.

For a different perspective, the following video tutorial provides a practical demonstration of all these properties.

Your Turn: Style a Product Card

Let's apply these concepts to a simple component. Here is the HTML for a basic product card.

1. Create an index.html file and a style.css file in a new folder.

2. Paste this HTML into index.html and make sure to link your stylesheet.

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Styled Card</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="card">
       <h2 class="card-title">Ergonomic Keyboard</h2>
       <p class="card-description">A high-quality mechanical keyboard designed for comfort and productivity. Perfect for developers and writers.</p>
       <p class="card-price">$129.99</p>
       <button class="card-button">Add to Cart</button>
     </div>
   </body>
   </html>
   

3. Now, in your style.css file, add the following CSS. Your task is to fill in the missing values to style the card. Try to achieve a clean, modern look. Experiment with different values.

   /* A universal reset for a more predictable box model */
   *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
   }
   
   body {
     font-family: /* Add a font stack, e.g., "Helvetica", sans-serif */ ;
     background-color: /* A light gray color, e.g., #f4f4f9 */ ;
     display: grid;
     place-content: center;
     min-height: 100vh;
   }
   
   .card {
     width: 320px;
     padding: /* Add some internal spacing, e.g., 24px */ ;
     background-color: /* A white color */ ;
     border-radius: 8px; /* This property rounds the corners! */
     box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* A subtle shadow */
   }
   
   .card-title {
     font-size: /* e.g., 1.5rem */ ;
     font-weight: /* e.g., 700 (bold) */ ;
     color: /* A dark text color, e.g., #1a1b26 */ ;
     margin-bottom: /* Space below the title, e.g., 8px */ ;
   }
   
   .card-description {
     font-size: /* e.g., 1rem */ ;
     line-height: /* A readable value, e.g., 1.6 */ ;
     color: /* A medium gray text color, e.g., #4a4b57 */ ;
     margin-bottom: /* Space below the description, e.g., 16px */ ;
   }
   
   .card-price {
     font-size: /* e.g., 1.25rem */ ;
     font-weight: /* e.g., 600 (semi-bold) */ ;
     color: /* A primary brand color, e.g., #4CAF50 */ ;
     margin-bottom: /* Space below the price, e.g., 24px */ ;
   }
   
   .card-button {
     width: 100%;
     padding: /* Internal spacing for the button, e.g., 12px */ ;
     font-size: /* e.g., 1rem */ ;
     font-weight: /* e.g., 700 (bold) */ ;
     color: /* A white color */ ;
     background-color: /* The same primary brand color as the price */ ;
     border: none;
     border-radius: 4px;
     cursor: pointer; /* Changes the mouse to a pointer on hover */
   }
   

4. Open index.html in your browser to see your styled card. Tweak the values until you are happy with the result.

Conclusion

You have now learned the fundamental CSS properties for implementing the visual layer of a design. You can control not just the shape of the boxes on your page, but also their color, the appearance of the text inside them, and the rhythm of the space between them. This is a massive step towards being able to translate any Figma design into code.

Key Takeaways:

• Typography is controlled with font-family, font-size, font-weight, font-style, line-height, and letter-spacing.
• Color is applied using the color (for text) and background-color properties, with HEX codes (#RRGGBB) being the most common format.
• Spacing is managed with margin for external space (between elements) and padding for internal space (inside an element).
• These CSS properties directly map to the specifications found in a design system's style guide.

In our next lesson, we will move from styling individual elements to arranging them in powerful, responsive layouts. We'll start with CSS Flexbox, a layout model designed for building flexible one-dimensional layouts, like navigation bars and rows of cards.