Core Framework turns colors, fluid type scales, spacing, layouts, components, and utility classes into one portable design system. Build the system visually, generate compact production CSS, and use the same tokens wherever you design and develop.
The web app, WordPress plugin, Figma integration, and every builder add-on in this repository are free and open source. There is no license activation, paid feature gate, or premium code path.
MIT licensed · Local-first editor · Portable projects · Every integration included
Why Core Framework?
A design system should be easier to understand than the CSS it generates. Core Framework gives the whole team a visual source of truth while keeping the output standards-based and portable.
- Design visually. Work with named tokens, responsive scales, reusable selectors, components, and utilities instead of editing a giant stylesheet by hand.
- Stay systematic. Generate typography and spacing scales from a small set of constraints, then reuse them consistently across the project.
- Own the output. Preview, copy, export, or download the generated CSS. Your project can also be exported as a portable
.core file.
- Work where you already build. Use the standalone web app, WordPress, Figma, Gutenberg, Bricks, or Oxygen from the same open-source codebase.
- Start your way. Begin with the complete framework, variables only, a blank project, or an imported project.
Product tour
Everything below is captured from the real Core Framework web app using its included starter project.
Design tokens you can actually see
Define semantic colors, light and dark values, generated shades, and reusable variables from one workspace.
Fluid foundations
Typography and spacing scales respond to the viewport automatically. Choose minimum and maximum values, scale ratios, and a naming convention; Core Framework calculates the system and generates the matching classes.
Fluid typography
Build a responsive type scale with clear minimums, maximums, and contextual variables.
|
Fluid spacing
Generate a consistent spacing rhythm and the utility classes that consume it.
|
From reusable components to production CSS
Preview components against the framework while you work, then inspect and export the generated stylesheet when the system is ready.
Component previews
Buttons, badges, fields, cards, icons, avatars, and form controls are visible in the editor—not hidden in configuration.
|
Generated CSS
Preview the readable output, see its minified size, then download, export, or copy it directly.
|
Layout and design primitives
Keep grids, alignment rules, dimensions, radii, borders, shadows, opacity, filters, and transforms in the same system as your tokens.
Layouts
Reusable grid variables and selector groups make structural decisions explicit and portable.
|
Design rules
Model responsive radii and the visual primitives that keep an interface coherent.
|
Fonts and custom styles
Import Google Fonts through their public, keyless endpoints, configure selectors and variables, or add project-specific CSS in the built-in editor.
Font library
Keep the fonts used by a project visible and manageable from a dedicated workspace.
|
Google Fonts importer
Choose a family and display mode, then map it to custom selectors or a CSS variable.
|
Custom stylesheets
Add the small amount of handcrafted CSS that belongs alongside the generated framework.
|
A complete utility layer
Selectors and their CSS declarations stay readable in the visual editor, with breakpoint-aware controls and generated output behind them.
Portable projects, deliberate defaults
Export or import a portable local .core file, and control how the final CSS behaves—from root sizing and themes to PostCSS, prefixes, reduced motion, and touch-device behavior.
Manage the project
Export, import, reorder, hide, or remove framework groups from one overview.
|
Set the rules
Configure themes, viewport boundaries, unit output, processing, prefixes, and accessibility preferences.
|
Start with a framework—or a blank canvas
The standalone app stores projects in browser storage, so exploring Core Framework does not require WordPress, an account, or a hosted backend.
Choose your starting point
Load the full framework, import variables only, or begin empty.
|
Choose the foundation
Set the root font size and color mode before entering the editor.
|
What's included
| Surface |
Package |
What it provides |
| Shared application |
packages/core |
Visual editor, schemas, state, CSS generation, and shared business logic |
| Web app |
packages/www |
Standalone browser app with local project storage |
| WordPress |
packages/wp |
Plugin shell, persistence, REST API, generated CSS delivery, and release packaging |
| Figma |
packages/figma |
Self-contained Figma plugin with the editor bundled into the plugin UI |
| Gutenberg |
packages/gutenberg, packages/blocks |
Classes, colors, theme preview, editor integration, and blocks |
| Bricks and Oxygen |
packages/builder-integrations |
Classes, variables, colors, and builder-specific helpers |
All integrations in this repository are included under the MIT license. Optional design kits and packs are separate marketplace content; they are not required to use any application or integration.
Quick start
Run the web app
You need Bun 1.3.x.
git clone https://github.com/corebunch/core-framework.git
cd core-framework
bun install
bun run dev:www
Open the local URL printed by Vite. Choose a starting point and the editor is ready—no account, API key, or license activation required.
Build the web app
bun run test:www
bun run build:www
The production site is written to packages/www/dist. It is a static application: serve that directory from any static web server or hosting provider. Projects remain in the user's browser storage; no application server, database, Core Framework account, or license service is required.
For a domain root such as https://framework.example.com/, use the command above. For a subpath, pass the public base path to Vite:
bun run --filter './packages/www' build -- --base=/core-framework/
Then publish packages/www/dist at the matching path, such as https://example.com/core-framework/.
WordPress development
Requirements: WordPress 6.0 or newer, PHP 8.0 or newer, Composer, Bun 1.3.x, and a local HTTPS certificate.
Link the plugin package into your WordPress installation:
ln -s <path-to-core-framework>/packages/wp <path-to-wordpress>/wp-content/plugins/core-framework
Copy packages/wp/.env.example to packages/wp/.env, then set DEV_URL, DEV_PROTOCOL, and CERT_PATH for the local site.
Install PHP dependencies and start development:
cd packages/wp
bun run composer:dev
cd ../..
bun run dev:wp
Activate Core Framework in WordPress.
Build the production plugin with bun run build:wp. Tagged releases are assembled by the automated release workflow; pushes to main do not publish a plugin update. Maintainers can find the full process in RELEASING.md.
Run bun run e2e:wp to build the distributable ZIP and install it into a disposable Docker-based WordPress site. The test uses WP-CLI to verify installation, activation, database setup, generated CSS, REST authorization, the Figma connection-key lifecycle, local editor assets, and deactivation/reactivation. Docker and curl are required; the test environment is removed automatically.
Install the Figma plugin
Each GitHub Release includes a self-contained core-framework-figma-X.Y.Z.zip:
- Download and extract the Figma ZIP.
- Open Figma Desktop.
- Go to Plugins → Development → Import plugin from manifest.
- Select
core-framework-figma/manifest.json from the extracted folder.
This local installation is independent of Figma Community and does not update automatically. Download and import the newer archive when a new release is available. Publishing an update to Figma Community is a separate maintainer action in Figma Desktop; the GitHub release workflow does not publish to Community.
Figma development
bun run build:figma
In Figma, open Plugins → Development → Import plugin from manifest and select packages/figma/manifest.json. Run bun run dev:figma while working on the plugin. The shared editor is built into the plugin; no hosted Core Framework app or license key is required.
How the repository fits together
packages/core Shared application and CSS engine
│
├── packages/www Standalone, browser-storage app
├── packages/wp WordPress plugin and REST integration
└── packages/figma Figma plugin and sandbox
packages/gutenberg WordPress editor integration
packages/blocks Gutenberg blocks
packages/builder-integrations Bricks and Oxygen bundles
The visual application lives in packages/core. The web, WordPress, and Figma packages provide platform-specific storage, transport, and integration layers around that shared system.
Development commands
| Command |
Purpose |
bun run dev:www |
Start the standalone web app |
bun run test:www |
Run web-app tests |
bun run build:www |
Build the standalone web app |
bun run dev:wp |
Build integrations and start WordPress development |
bun run build:wp |
Build WordPress assets |
bun run php-test:wp |
Run WordPress PHP tests after Composer install |
bun run dev:figma |
Watch the Figma plugin |
bun run build:figma |
Build the Figma plugin |
bun run release:figma -- X.Y.Z |
Build the self-contained Figma release ZIP |
bun run lint |
Lint the web and WordPress packages |
Hosted services and privacy
Editing a local project and generating CSS do not require a Core Framework account, license server, or API key. The bundled Figma editor works locally, while optional Figma-to-WordPress synchronization connects directly to a user-selected WordPress site using a site-generated connection credential (not a license key).
The Google Fonts catalog is bundled locally. Google is contacted only when a user selects, previews, or imports a Google-hosted font; the application requests CSS from fonts.googleapis.com and, during import, font files from fonts.gstatic.com. The WordPress integration stores imported font files locally. See Google's Terms of Service and Privacy Policy.
The application does not load preview images, interface fonts, telemetry, or executable code from Core Framework servers.
Third-party licensing
Core Framework's original source is MIT licensed. Dependencies and adapted source retain their respective open-source licenses. Release builds include THIRD_PARTY_NOTICES.md (or third-party-notices.txt) and a generated THIRD_PARTY_LICENSES.txt (or third-party-licenses.txt) containing the production dependency inventory and available license texts.
Marketplace
The Core Framework Marketplace offers optional design kits and packs. These are content products, live outside this repository, and are not required to use the plugin, web app, Figma integration, or builder integrations.
Who's behind this
Core Framework is built by a team focused on giving designers and developers powerful visual tools without taking away ownership of their work. We also build:
- Motion.page — a complete visual animation stack for the web, combining a desktop app, an SDK, and a WordPress plugin. Build professional timelines, interactions, scroll effects, and responsive animations visually, then use them on any website—not only WordPress—through Motion.page's independent animation engine and tooling.
- Instatic — a free, full-featured, open-source alternative to Framer, Webflow, and WordPress. It is a self-hosted visual CMS for building and managing fast, content-driven websites. Explore the project at instatic.com or view the source on GitHub.
Contributing
Bug reports, focused pull requests, tests, and documentation improvements are welcome. Read CONTRIBUTING.md before opening a pull request. Report security vulnerabilities privately using the process in SECURITY.md.
License
Core Framework is released under the MIT License. Third-party notices are listed in THIRD_PARTY_NOTICES.md.
Core Framework — это визуальный CSS-фреймворк и конструктор дизайн-токенов, работающий в вебе, WordPress и Figma: вы один раз строите дизайн-систему и экспортируете переносимый, готовый к продакшену CSS.