The Challenge: Enterprise Standardization at Scale The organization was working with fragmented tooling, inconsistent patterns, and no shared frontend architecture. Projects were repeatedly solving the same problems: design consistency, boilerplate, and shared standards.
The need was for executable infrastructure that made good defaults easy to adopt while leaving room for domain-specific work.
The Solution: A Cohesive Package Ecosystem I designed a monorepo architecture containing six interconnected internal packages, each addressing a different part of the standardization problem. The system uses Next.js, TypeScript, and a government design system.
Project Initializer: This command-line tool kickstarts new frontend projects using shared packages and predefined templates. It creates a configured Next.js application with the design system, component library, generators, and standard architectural patterns already set up. Projects can be scaffolded in under 60 seconds with dependencies, linting, and formatting pre-configured.
Visual Foundation: This package acts as the visual foundation of the entire ecosystem. It takes design specifications (colors, fonts, spacing) from the DigDir Designsystemet and compiles them into CSS custom properties (variables). This ensures all applications share a consistent look and feel and supports features like light/dark mode easily. The tokens follow a multi-tier hierarchy: primitive tokens define raw values, semantic tokens alias primitives with meaning, and component tokens consume semantic tokens for specific use cases.
Reusable UI Building Blocks: Building upon the design tokens, this package offers reusable UI components for the organization's applications. These components complement the base design-system components and are documented and typed for use across projects.
Shared Structural Components: This package provides shared structural components like headers, footers, and breadcrumb systems. It's designed particularly for scenarios where multiple frontend applications need to present a unified user experience, such as in a microfrontend architecture. It includes mechanisms for managing basic global state (like theme or user info) across these applications.
Developer Productivity Engine: This is a collection of command-line tools that generate boilerplate for common structures. Developers can create components, API integration layers, forms with validation, state-management stores, and application routes that follow the shared patterns.
Design Token Compilation & Theming The design token system is the backbone of visual consistency. I built a custom Node.js build script that processes design specifications and outputs multiple formats: CSS custom properties for runtime theming, TypeScript constants for type-safe access in components, and Figma Tokens JSON for design tool integration.
The compilation process validates token references, checks for circular dependencies, and generates comprehensive documentation automatically. This documentation site shows all tokens with live previews, usage examples, and accessibility contrast ratios for color pairings, becoming the single source of truth for both designers and developers.
The theming system supports light and dark modes out of the box. Since styling is driven by CSS custom properties, switching themes is a matter of changing root-level token values.
CLI-Based Development Workflow The generator tools transformed how developers work. Instead of copying boilerplate from previous projects or writing repetitive code, developers run simple CLI commands that generate complete, pattern-compliant features.
For example, generating a new API integration layer creates all necessary files: the API client functions, TypeScript types, TanStack Query hooks for data fetching, error handling, and loading states - all wired together and ready to use. The generated code follows the exact patterns established by the team, ensuring every developer produces consistent work.
The create-app tool handles project initialization with an interactive prompt system. It asks questions about the project (authentication providers, database connections, deployment targets) and scaffolds a complete application configured specifically for those choices. The resulting project includes Git initialization, ESLint/Prettier configuration, and connections to the shared component library.
What the Architecture Enabled The ecosystem gives teams a shared starting point for new applications and a common vocabulary for frontend architecture. The generators and packages are intended to reduce repetitive setup work and make established patterns easier to follow.
That leaves more room for domain-specific features instead of requiring each project to rebuild its own foundation.
The system is designed to evolve. Each package is versioned independently, allowing incremental adoption. Teams can upgrade the design tokens without touching their code generation tooling. This loose coupling was critical for achieving buy-in from teams with existing codebases who couldn't afford a full migration.
