System Architecture

2. System Architecture Byblocks is composed of two primary layers that work together: the Core Figma file and the Byblocks web library (platform). 2.1 Core Figma File The Core is a downloadable Figma design file that serves as the single source of truth for the Byblocks system. It contains all the foundational design elements, including: Design tokens: predefined design values (such as colors, typography scales, spacing sizes, etc.) Variables: configurable styles and measurements that drive the look of components Text styles: a set of consistent typography styles for headings, body text, etc. Base components: the core UI components and elements that blocks are built from System rules: built-in guidelines and constraints that ensure consistency All blocks in Byblocks depend on this core file. This means you adjust visual parameters by editing tokens, styles, and component properties in Figma – not by redesigning the blocks themselves. The Core acts as the engine of the system: update something in the Core file (for example, a color or a spacing value) and it propagates through all blocks, keeping everything consistent. 2.2 Byblocks Web Library The Byblocks web platform is a private online library of blocks (it’s not a drag-and-drop page builder itself). This platform allows you to: Browse available blocks, often organized by category or purpose Learn when to use each block (with guidance and examples for each block type) Copy the block design and paste it into your Figma file for customization The platform is essentially a catalog and guide – it helps you select the right blocks for your needs. It does not automatically assemble pages for you, enforce your content, or do any live editing on your site. In other words, the web library guides your selection of blocks, but the execution (placing blocks, entering content, tweaking design details) happens in Figma and in your design process. The platform won’t, for example, stop you from putting too much text in a block or fill in your images; instead, it provides the building blocks and best practices, and you as the designer make the creative decisions within the system’s framework.