Chapter 2 - Style Foundations

Introduction

Foundations are the fundamental building blocks of the NETWRIX design system 🧱. They represent the most basic and essential design decisions that ensure visual consistency and maintainability across the entire project.

Think of Foundations as the DNA of the design system - every component, module, and page inherits these core values. By centralizing these tokens, we ensure that any design change can be propagated systematically throughout the entire application.

What Are Foundations?

Foundations are design tokens - the smallest, indivisible design decisions in the system. They include colors, typography, spacing, grid configuration, and other fundamental values that define the visual language of NETWRIX.

Key Characteristics:

🎯 Single Source of Truth: All design values are defined once and reused everywhere
📐 Design-Code Alignment: Direct 1:1 mapping with Figma design tokens
🔄 Scalability: Easy to maintain and update as the design evolves
🎨 Consistency: Ensures visual coherence across all pages and components
💪 Developer Efficiency: Predefined tokens reduce decision-making time

Location in Code: src/scss/framework/foundation/

Structure:

src/scss/framework/foundation/
├── _foundation.scss       # Main foundation index
├── color/                 # Color system
├── font/                  # Typography system
├── spaces/                # Spacing utilities
├── grid/                  # Grid system
├── gap/                   # Gap utilities
├── background/            # Background utilities
└── reset/                 # CSS reset

Foundation Topics

Explore each foundation topic in detail:

🎨 Colors & Palette

Learn about the 14-color system, how to use color variables, and best practices for maintaining visual consistency across the application.

✍️ Typography System

Understand the font families, responsive typography scale, and how to implement consistent text styles throughout the project.

📏 Spacing System

Master the 8px-based spacing system, spacing utilities, and how to create consistent padding and margins.

📐 Grid & Layout

Explore the 12-column grid system, responsive breakpoints, and layout patterns for building flexible page structures.

⚙️ Variables & Utilities

Dive into the variable system, Global Components configuration, and how to create custom utility classes.

Quick Start Guide

For New Developers

If you’re new to the NETWRIX project, follow this learning path:

Start with Colors → Understand the color palette and naming convention
Learn Typography → Master the font tokens (f—font-a through f—font-g)
Practice Spacing → Get comfortable with the measure-based spacing system
Master the Grid → Learn the container → row → column hierarchy
Explore Variables → Understand how global configuration works

Common Questions

Q: Where do I find foundation values?

In Figma: Navigate to the “Foundations” page in the Figma file
In Code: Check src/scss/framework/_var/_vars.scss for all foundation variables

Q: When should I use utility classes vs SCSS variables?

Utility Classes: Use in HTML for quick styling (.f--color-a, .u--pt-10)
SCSS Variables: Use in component SCSS files for custom styling (color: $color-a;)

Q: How do I know which spacing value to use?

Always refer to Figma Developer Mode for exact measurements
Stick to the defined scale: 0, 1, 2, 3, 4, 5, 7, 8, 10, 15
When in doubt, use the most common patterns (sections: 10/7, cards: 5/4)

Q: Can I create new foundation tokens?

Only with design team approval
Must be added to Figma first
Then added to _vars.scss
Must be documented

Figma Reference

Foundation Principles

Design-Code Parity

Every foundation token in Figma has a direct correspondence in the code:

Figma	Code Variable	CSS Class
Color A (Navy)	`$color-a`	`.f--color-a`
Font a - 70px	`$type-a` + mixin	`.f--font-a`
Spacing × 10 (80px)	`$measure * 10`	`.u--pt-10`
Gap B	Defined in gap system	`.f--gap-b`

Consistency Over Creativity

When implementing designs, always prioritize using existing foundation tokens over creating custom values:

✅ Good:

<h1 class="f--font-a f--color-a u--mb-5">Heading</h1>

❌ Bad:

<h1 style="font-size: 68px; color: #1a1536; margin-bottom: 38px;">Heading</h1>

Mobile-First Approach

All foundation tokens include responsive considerations:

Typography scales down on mobile
Spacing reduces on smaller screens
Grid columns stack at breakpoints
Always test responsive behavior

Foundation Workflow

Implementing a New Component

When creating a component from a Figma design:

Analyze Foundations Used
- Extract colors from the design
- Identify typography tokens
- Measure spacing values
- Note grid structure
Map to Code Tokens
- Match Figma colors to $color-* variables
- Match text styles to .f--font-* classes
- Calculate spacing using $measure multiples
- Plan grid layout with columns
Build HTML Structure
- Use semantic HTML
- Apply foundation utility classes
- Include responsive classes
- Test across breakpoints
Verify Against Figma
- Check pixel-perfect accuracy
- Verify responsive behavior
- Test all states (hover, active, etc.)

Next Steps

Once you’ve mastered the Foundations, you’re ready to move on to building components and modules.

Recommended Learning Path:

📚 Read each Foundation section in the order presented above
🎨 Explore Figma Foundations page to see how tokens are defined
💻 Practice building simple layouts using only foundation classes
🧩 Move to Chapter 3: Components to learn about component architecture

Foundation Resources

Figma Design File: NETWRIX UI Design
Foundation Variables: src/scss/framework/_var/_vars.scss
Foundation SCSS: src/scss/framework/foundation/
Utility Classes: src/scss/framework/utilities/
Chapter 1: Figma Structure - Understanding the design source
Chapter 4: Components & Modules - Building with foundations

Summary

Foundations are the cornerstone of the NETWRIX design system. They provide:

✅ Consistency - Uniform visual language across all pages ✅ Efficiency - Faster development with predefined tokens
✅ Maintainability - Easy updates through centralized variables ✅ Quality - Pixel-perfect implementation of designs ✅ Scalability - System grows without sacrificing coherence

By mastering foundations, you ensure that every element you create aligns perfectly with the design system and can be easily maintained as the project evolves.

🎯 Key Takeaway: Always start with foundations. Before writing any custom CSS, check if a foundation token or utility class can accomplish what you need.

Happy building! 🚀