Architecture Matrix

Layout Clusters

The skeleton of your ecosystem. Our architecture eschews rigid containers—master the unified Frame Topology to synthesize dynamic CSS Flex and CSS Grid matrices.

Frame

The universal architectural unit. Frames are adaptive carriers that can contain any node and be styled through advanced metadata properties. Every node in BrilliantNode is a Frame.

Preview Morphology

Standard Frame Carrier

Deployment Cases

As a carrier node for grouping other architectural elements.
To synthesize custom layouts with granular precision.
When you require a styled block with fills, strokes, and spatial padding.

Configurable Node Settings

Display MorphologyChoose between Flex, Grid, Block, or Inline protocols to control node flow.

DimensionalityAssign width, height, and min/max boundaries for precise spatial mapping.

Spatial BufferingGovern padding (internal) and margin (external) coordinates.

Surface FillApply solid-state colors, gradients, or visual artifacts as backgrounds.

Semantic TaggingChoose HTML5 semantic markers like div, section, article, for optimal engine indexing.

Flex Row

A Frame protocol optimized for horizontal topologies via `display: flex`. Nodes are distributed side-by-side with elastic spacing and alignment logic.

Preview Morphology

Node Alpha

Node Beta

Node Gamma

Deployment Cases

For navigation manifests and horizontal arrays.
To distribute elements side-by-side (abstract next to artifact).
When synthesizing button clusters or functional bars.

Configurable Node Settings

Node GapSpatial distance between child nodes.

Vertical AlignmentY-axis alignment of items (start, center, end, stretch).

Justification LogicHorizontal distribution (start, center, end, space-between).

Wrap ProtocolAllow nodes to wrap to sequential lines when spatial limits are reached.

Flex Column

A Frame protocol optimized for vertical stacking. Nodes are arrayed top-to-bottom, perfect for assembling structural page sections.

Preview Morphology

Node A

Node B

Node C

Deployment Cases

For vertical architecture sections.
To stack cards or functional blocks.
When building forms or vertical navigation manifests.

Configurable Node Settings

Vertical GapSpatial distance between stacked nodes.

Horizontal AlignmentX-axis alignment of items (start, center, end, stretch).

Justification LogicVertical distribution of nodes within the container.

Grid Matrices

Frame protocols configured with `display: grid` for complex multi-node layouts. Supports uneven distributions like Bento Grids and responsive matrices.

Preview Morphology

NODE 1

NODE 2

NODE 3

NODE 4

NODE 5

NODE 6

Deployment Cases

For feature matrices and card distributions.
Media galleries and image-node grids.
Dashboard-style layouts with multiple distinct clusters.
Modern bento-style hero architectures.

Configurable Node Settings

Column MatrixDefine column count (e.g., "repeat(3, 1fr)" for 3 equal columns).

Row TopologyDefine row structure for precise matrix control.

Matrix GapSpatial distance between grid nodes.

Area Span (Child)Force child nodes to span multiple columns or rows.

Centered Carrier

A Frame protocol with max-width and auto-margin logic, optimized for centering architecture on ultra-wide viewports.

Preview Morphology

Centered Logic (max-w-1200px)

Deployment Cases

For primary content nodes that should not exceed structural width limits.
To create readable text manifests.
When building centered section clusters.

Configurable Node Settings

Terminal WidthMaximum width before node growth is inhibited (e.g., 1200px).

Edge PaddingInternal buffer to prevent node edge collision on mobile viewports.