Styleguide Overview

The CF2 Styleguide system provides consistent design tokens for colors, typography, shadows, borders, corners, and buttons.

Styleguide Components

Color System

8 base colors with 5 paint-color themes for backgrounds and content.

Typography

Modular type scale with configurable fonts and weights.

Button Styles

3 button styles with hover/active states.

Shadows & Borders

3 shadow styles, 3 border styles, and 3 corner radius styles.

How It Works

The styleguide uses data-style-guide-* attributes to apply consistent styling:

HTML 
<!-- Apply paint-color theme to section -->
<section data-paint-colors="lightest">

  <!-- Typography -->
  <h1 data-style-guide-headline="xl">Extra Large Headline</h1>
  <h2 data-style-guide-subheadline="m">Medium Subheadline</h2>
  <p data-style-guide-content="m">Body text</p>

  <!-- Button -->
  <a data-style-guide-button="style1">Click Here</a>

  <!-- Decorative -->
  <div data-style-guide-shadow="style1">...</div>
  <div data-style-guide-border="style2">...</div>
  <div data-style-guide-corner="style3">...</div>

</section>

Attribute Reference

Attribute Values Purpose
data-paint-colors lightest, light, colored, dark, darkest Section background theme
data-style-guide-headline xl, l, m, s Headline text size
data-style-guide-subheadline xl, l, m, s Subheadline text size
data-style-guide-content xl, l, m, s Body content text size
data-style-guide-button style1, style2, style3 Button styling
data-style-guide-shadow style1, style2, style3 Shadow styling
data-style-guide-border style1, style2, style3 Border styling
data-style-guide-corner style1, style2, style3 Corner radius

Overriding Styleguide Values

To use custom values instead of styleguide defaults, add an override param:

JSON 
{
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "data-style-guide-headline": "m",
        "style": {
          "font-size": 48,
          "color": "#ff0000"
        }
      },
      "params": {
        "style-guide-override-headline": true,
        "font-size--unit": "px"
      }
    }
  }
}
i
Override params:
  • style-guide-override-headline
  • style-guide-override-subheadline
  • style-guide-override-content
  • style-guide-override-button