Introduction to Foundation CSS
Foundation CSS is the default theme for your React Native (Expo) app. It defines the baseline colors, typography, spacing, and component appearance that every screen and widget builds on. In a Design System project, Foundation CSS comes from mobile design tokens and stays separate from the customizations you add in Style Workspace.
Purpose
Foundation CSS is where styling starts in a mobile project. It standardizes how widgets look and behave so teams do not redefine colors, fonts, or spacing on every page. It sets the base look and feel for the whole app, keeps pages and partials visually consistent, and acts as the source of truth before your project overrides.
Shared rules flow from tokens into Foundation, then into WaveMaker widgets. Your app inherits that system when you export or run the project, which makes global theme updates predictable. Customizations and overrides sit on top of Foundation; they do not replace the base package in place.
Centralizing styling in Foundation CSS reduces duplication and conflicting styles across widgets, encourages predictable inheritance from tokens into components, and scales as the app grows.
Alignment with the WaveMaker UI Kit
Foundation CSS follows the WaveMaker UI Kit: spacing, typography, color roles, and interaction patterns defined for the product. That keeps Studio, design artifacts, and the running app visually aligned, speeds up development with known defaults and variants, and lets you reuse the same component patterns across mobile projects when the design system changes.
Design tokens
Design tokens are named values for things like brand color, body text size, or corner radius. They are the building blocks of the theme.
WaveMaker maintains mobile token definitions (separate from the web token set). When tokens change, Foundation and widgets that reference them update together after you rebuild or refresh the app theme.
For folder layout and how global, component, and override tokens relate, see Design token architecture.
Global tokens
Shared values used across the app, for example colors and palettes (primary, secondary, tertiary), typography scale (font sizes, weights, line heights), spacing, border radius, and shadows.
For brand and plain fonts, mobile tokens use one font family name at a time (for example Roboto). Plan for fonts you bundle or ship with the app. A backup font may appear in token lists for reference, but mobile does not rely on a long browser-style fallback list from a single token value.
Component tokens
Values scoped to a specific widget type (button, input, list, and others). They usually reference global tokens so a button background and a primary color stay in sync. Component tokens let you tune one widget family without breaking the rest of the design system.
Component foundations
Beyond tokens, Foundation CSS defines how each widget type is styled by default: layout-related defaults, colors, borders, and states such as disabled or focused where applicable.
You compose screens from these widgets in Studio; Foundation supplies their baseline appearance.
Variants
Variants are named configurations of a component (for example primary, secondary, compact, outlined, success, or error). They share one base structure while varying emphasis, size, density, or semantic intent—for example filled, outline, or text-only buttons.
Set variants in Style Workspace or through the design system; widgets pick them up through the variant property in markup. In Style Workspace you can create variants, change existing ones, adjust token values tied to a variant, and preview changes before export.
Styling flow
For the layered flow from design tokens through Foundation, Style Workspace, and the exported Expo app, see Styling architecture.
Summary
Foundation CSS is the backbone of mobile styling: tokens, default widgets, and variants. It gives Style Workspace a stable base to customize without rewriting every screen from scratch. For paths, build output, and app.css exceptions, see Customising your application.