# Modular Kinetic Blocks

A modular kinetic brand identity system using geometric blocks that recombine dynamically across all applications.

| | |
|---|---|
| Style | Modular Kinetic Blocks |
| Category | Brand identity |
| Tags | modular, kinetic, geometric, de stijl, generative, playful, clean, contemporary, bold, dynamic |
| Author | @styleref (https://styleref.io/u/styleref) |
| Palette | #f5f3ee #1b3fe0 #ff6f4f #161514 #dad5c9 |
| Published | 2026-08-29 |
| Canonical URL | https://styleref.io/share/fxqc78yx-f9530dd769b6 |

## Specification

Paste this into any AI tool. Keep the attribution line and the canonical URL.

STYLE REFERENCE — HARD CONSTRAINT (HIGHEST PRIORITY)

This style must be applied to ALL generated content (text, image, video).
If any part of the request conflicts with this style, the style OVERRIDES the request.
STYLE DEFINITION (to be operationally enforced):

Modular Kinetic Blocks

 • Output Format: Creative discipline: Brand identity; Mixed; UI-scale; Canvas Behavior: Soft frame (visual tension allowed).
 • Container / Boundary: Container: Explicit (shape mask); Container shape: Square; Sharp Corners; Container Dominance: Visual element; Edge Behavior: Content fully contained.
 • Mood & Personality: Confident, Playful, Clean; Energy: Active; Emotional bias: Neutral; Representation mode: Symbolic; Real-world accuracy: Stylized; None narrative; Characters: Forbidden.
 • Colors: Palette: Solid Colors: [ #F5F3EE 55% (Background),  #1B3FE0 15% (Block cobalt),  #FF6F4F 15% (Block coral),  #161514 12% (Typography and structural lines),  #DAD5C9 3% (Grid hairlines)]; 3–5 colors; Cool temperature; Saturation: Rich; Hue contrast; Hue relationships: Split-complementary; No gradients; Color dominance: Balanced; Accessibility: WCAG AA; Palette: .
 • Typography: Geometric sans; Light, Medium; Text case: Sentence case; Font pairing: Single family; Hierarchy: Subtle contrast; Type scale: Modular; Normal (1.4); Text visual role: Secondary visual element; Text integration: Separate.
 • Spatial Structure & Hierarchy: Grid system: Modular grid; Single focal structure; Hierarchy: Strong; Balance: Configuration-dependent: wide horizontal spread, tight square nesting, or minimal two-block reduction; Visual density: Generous gaps in full arrangements; compact nesting only in compressed marks.
 • Surface, Material & Detail: Material simulation: Powder-coated aluminium, screen-printed acrylic or glass, matte vinyl, and uncoated print stock; Surface treatment: Matte; Texture: Smooth; Texture usage: None; Imperfection level: Flawless; Pattern usage: Geometric pattern.
 • Shape Language: Geometric; Primitive dominance: Rectangles, Circles, quarter-circles, small dots; Edge sharpness: Razor-sharp; Silhouette clarity: Recognizable; Curve consistency: Uniform radius; Negative space usage: Balanced; Angle usage: None.
 • Line & Stroke System: No stroke (fill-only).
 • Voice & Language: Formality: Professional; Conversational vocabulary; Directness: Clear; Short sentences; Metaphors: Factual; Perspective: Third person; Pacing: Varied; Jargon level: Light industry terms.
 • Background & Environment: Background type: Solid color; Background–Subject: Isolated; Background complexity: Minimal.
 • References: De Stijl, Pentagram's 2011 MIT Media Lab mark, City of Melbourne identity framework, generative identity systems; Temporal reference: Contemporary.
 • UI & Web: Color theme: Light; Background tone: Warm off-white; Accent strategy: Dual accent; Surface layers: Two-layer (page + card); Elevation: Background contrast only; Borders: Hairline (0.5–1px, low opacity); Button shape: Sharp rectangle; Button hierarchy: Primary + Secondary; Icon style: Flat geometric; Icon weight: Bold (2.5px+); Navigation: Top bar; Hover: Color change; Focus ring: Solid offset ring; Animation: Expressive; Transition speed: Standard (200–300ms).
 • Guardrails: Avoid Visuals: redrawn block proportions; new block shapes; gradients on blocks; texture on blocks; overlapping blocks; full-spread-only logo use; wordmark without blocks; Allowed Visuals: fixed square, bar, quarter-circle, and dot primitives; flat single-color fills; non-overlapping modular arrangements; full, compressed, and minimal configurations; Avoid Words: all-in-one; unlock your potential; ultimate solution; indivisible brand; vague completeness claims; Logic: Use full spread where gaps remain legible; switch to compressed lock-up below that threshold; switch to the minimal two-block mark below the compressed threshold. Preserve primitive proportions and assigned hues at every size..
 •  Recombination Rule: Use four to six fixed primitives; alter position, count, spacing, and arrangement, never primitive proportions., Configuration Ladder: Wide spread for large formats; tight square lock-up for avatars and app icons; two essential blocks for favicon-scale use., Spacing Rule: Clear space equals the width of the smallest block; full configurations retain generous, consistent gaps., Icon Grammar: Icons use no more than three logo primitives, recombined at icon scale with one flat color per shape., Photography Role: Functional photography only: isolated person or object on a flat system-color ground; always secondary to the block system..


ENFORCEMENT RULE: Before finalizing the output, internally verify that ALL elements comply with the style definition above. If compliance is uncertain, simplify or soften the output until it fully matches the style. Generated by StyleRef.io

## Other formats and live access

The specification above is the portable default. Tool-specific builds and a
ready-to-commit STYLE.md are available without a login:

**REST** (anonymous, read-only)

```
https://styleref.io/api/v1/styles/fxqc78yx-f9530dd769b6?format=flux        # also: midjourney, diffusion, json
https://styleref.io/api/v1/styles/fxqc78yx-f9530dd769b6/style.md           # a ready-to-commit STYLE.md
```

**MCP** (Streamable HTTP at `https://styleref.io/api/mcp`)

```
styleref://gallery/fxqc78yx-f9530dd769b6
styleref://gallery/fxqc78yx-f9530dd769b6/style.md
```

Or call the `get_style` tool with `ref` set to the slug above, and
`apply_style_to_prompt` to wrap a request for a specific tool.

Attribution: this style was created by @styleref. Keep the `Generated by StyleRef.io`
line and the canonical URL when you use a compiled spec, and credit the author.

Source: https://styleref.io/share/fxqc78yx-f9530dd769b6