Style Guide

The Civic Style Guide provides a set of visual standards for the design and development of websites.

Adherence to these standards will ensure a consistent look and feel across the portfolio that will improve the user experience by making it easier for users to navigate and locate the information they need.

Style Areas

Visual styles

• Visual styles includes background color, border, outline, opacity, and shadow.

Layout

• Layout styles includes layout grid, flexbox, display, and order.
• Box sizing includes shape, height + width, margin + padding, and overflow.
• Positioning includes position, pin, float, and z-index.

Typography

• Font styles includes font family, size, weight, and italic.
• Text styles includes underline, strikethrough, color, case, letter spacing, and vertical alignment.
• Paragraph styles includes line height, line length, indentation, and paragraph alignment.
• Advanced styles includes spacing units, tabular numerals, and list reset.

Images

• Images includes guidance for using graphical assets, logos, and icons.

Utility variants

• Utility variants explains utility classes for customization and responsiveness.

Style Elements

Visual style

Covers the visual appearance and effects of elements

• Background Color

  Set the background color of an element

• Border

  Adjust border location, thickness, style, width, color, and radius

• Outline

  Adjust the width and color of an item's outline

• Opacity

  Adjust the opacity / transparency of an element

• Shadow

  Adjust the size and location of an element's drop shadow

Layout

Focuses on the structure and arrangement of content

• Layout grid

  Create layout grids based on a 12-column system

• Flexbox

  Create flex containers

• Display

  Set how an element is displayed and participates in the layout

• Order

  Set the order of an element in a flex container

Box sizing

Sizes, spaces, and contains elements for visual rhythm and alignment

• Shape

  Set an element's shape

• Height + Width

  Set the height, width, and aspect ratio of an element

• Margin + Padding

  Adjust the margin and padding of an element

• Overflow

  Control content overflow and scrolling behavior

Positioning

Ensures proper alignment and layering in complex layouts

• Position

  Control how an element is positioned relative to its container or viewport

• Pin

  Pin elements to an edge of their container or the viewport

• Float

  Position an element to the left or right within its container

• Z-index

  Determine an item's position in the stacking order

Font styles

Focuses on font-level styling

• Family

  Font family choices and fallbacks

• Size

  Font sizing scale and usage

• Weight

  Font weight styles

• Italic

  Italic font styles

Text styles

Focuses on text-level styling

• Underline

  Guidance for underlining text and links

• Strikethrough

  Use cases for strikethrough text

• Text Color

  Set colors for text

• Text case

  Text transform and capitalization rules

• Letterspacing

  Letterspacing and tracking

• Vertical alignment

  Align text relative to the line box, baseline, or as superscript/subscript

Paragraph styles

Focuses on paragraph formatting

• Line height

  Adjust the space between lines in a paragraph

• Line length

  Set the optimal length for readable text lines

• Indentation

  Paragraph and list indentation guidance

• Paragraph alignment

  Paragraph alignment rules for readability

• Whitespace

  Control text wrapping and whitespace behavior

Advanced styles

Focuses on advanced typographic controls

• Spacing Units

  Spacing unit tokens, based on multiples of 8px

• Tabular numerals

  Format numerals into columns for tables and data

• List reset

  Reset default list styling when building custom components

Images

Provides guidance for using graphical assets, logos, and icons

• Logos

  Files for logos

• Icons

  Font Awesome icons

Utility variants

Explains utility classes for customization and responsiveness

• Utility variants

  Modify how responsive and state utility classes behave

Style Guidance

Every website and application uses fundamental style elements: colors, spacing, typography, and visual effects like line height and opacity. However, the underlying code allows for many choices for each element. This vast range can slow down design iterations and communication between designers and developers. A design system addresses this challenge through a comprehensive style guide and the strategic use of design tokens.

A style guide defines a brand's visual and verbal identity. It ensures consistency across all digital products, marketing materials, and communication channels. It outlines guidelines for typography, color palettes, imagery, and tone of voice for content.

A style guide is essential for these reasons

• Identity and Trust: Consistent application of visual and verbal elements builds a recognizable identity. This fosters familiarity and a unified user experience, which is crucial for building trust and recognition among users.
• Efficient Design and Development: Clear guidelines and pre-defined components simplify design and development processes so teams can work efficiently and avoid redundant efforts.
• Collaboration: A shared language and understanding of design principles enables effective collaboration between designers, developers, and other stakeholders.
• Maintainability: Changes can be implemented systematically, ensuring continued consistency and relevance over time.
• Scalability: A framework to scale design efforts without sacrificing consistency or quality as teams and products grow.

The role of design tokens

Design tokens streamline design and development. They are abstract representations of design decisions. They capture values like color codes, font sizes, spacing, and more, in a format that is human-readable and machine-interpretable. Instead of defining and hardcoding these values independently, designers and developers can reference a specific token. When a design element changes, the value associated with the token is modified in one location, and that change propagates throughout the design system and all products using those tokens.

A token-based approach offers these advantages

• Precision and Consistency: Tokens ensure that the same color, font, or spacing is used everywhere, regardless of the platform or tool.
• Efficient Updates: Design tokens facilitate seamless updates across the product ecosystem. Changing a single token can update thousands of instances of that design element with minimal effort, saving time and reducing errors.
• Theming and Customization: Design tokens can create themes. This allows easy customization of the UI's appearance, like switching between light and dark modes.
• Scalability and Adaptability: As the design system grows and evolves, tokens allow for easy expansion and modification without disrupting existing designs.

Conclusion

In essence, the style guide, powered by design tokens, is a powerful tool for achieving design consistency, boosting efficiency, fostering collaboration, and scaling design efforts effectively. It allows teams to create a unified and exceptional user experience across all touchpoints. It minimizes redundant effort and ensures the long-term success of digital products.