Twisted Brackets
Elements
Elements is the design system for Twisted Brackets This section of the site documents the brand, site design guidelines, and UI components used across the site, blog and portfolio.
This is my single reference used when designing screens, reviewing work, and prompting AI tools to build on-brand Twisted Brackets UI. Design intent in three words: clear, crafted, quiet. The content is the hero.
What you will find here
One system, four layers
Brand guidelines
Colour, typography, spacing, motion, and voice rules that define how Twisted Brackets looks and reads across the blog and portfolio.
Fundamentals
Design tokens and foundational rules: palette roles, type scale, grid rhythm, elevation, and animation catalogue.
Elements & components
Documented UI primitives and composed patterns: buttons, code snippets, post cards, with live previews and usage code.
Game design
Sprite scenes, parallax layers, rule tiles, and autotile tools for documenting game experiments. Built for display and docs, not production game loops.
Brand overview
Editorial-minimalist, code-native
Twisted Brackets is a developer publication that doubles as its my (Levi Putna's) portfolio. Every page must make technical writing a pleasure to read and signal craft to a fellow engineer. The personality is editorial-minimalist with a code-native edge: monospaced metadata, comment-styled category tags (// AI;), and syntax-aware accents. How I write supports that: see Tone of voice.
Both light and dark themes are supported. Light mode keeps warm paper neutrals as the default canvas; dark mode maps the same roles to deep surfaces for low-light reading. Semantic tokens carry across both themes so components adapt without one-off overrides.
Colour palette
Monochrome-plus-one
The palette is not arbitrary. A warm greyscale carries 95% of the interface; indigo marks interactivity; syntax green is reserved for code-comment treatment. That discipline is what makes the site read as professional rather than busy.
Background
--background / bg-background
Warm paper neutral: the page canvas. Default for most sections.
Surface
--surface / bg-surface
Cards, raised reading surfaces, and inputs.
Primary
--primary / bg-primary
Links, primary buttons, active nav, and focus rings.
Secondary
--secondary / text-secondary
Syntax green: comment-tags and inline code accents only.
Key decisions
How the system stays coherent
Monochrome first, indigo with purpose
Warm neutrals carry most of the interface. Indigo marks interactivity; syntax green is reserved for comment-tags and inline code accents. Colour signals meaning, not decoration.
Serif authority, sans-serif clarity
Bungee gives headlines and the logo a bold, geometric voice. Inter handles body copy and UI. JetBrains Mono threads metadata and code into a single brand voice.
Soft-rectangular, calm forms
8px on controls, 12px on cards. Measured corners and generous whitespace: never playful pills. Restraint is the brand.
Plain language, peer-to-peer tone
Copy is direct and free of hype. The visual system supports that voice: calm layouts, readable type, and accents that guide rather than distract.
Foundation
Tokens and rules
Colours
Palette tokens, semantic roles, and foreground rules.
Typography
Display, body, and mono type scale for reading and UI.
Logo
Lockup, icon mark, surfaces, and usage rules.
Spacing
8px grid, containers, gutters, and section rhythm.
Motion
Approved animation catalogue and duration tokens.
Radius
Corner radius tokens for controls, cards, and surfaces.
Elevation
Shadow and depth tokens for layered UI.
Elements
UI primitives
Game design
Interactive previews
Elements for documenting game work on this site: animated scenes, tile maps, and an autotile editor. They are for display and documentation only, not optimised for complex runtime scenarios. Start with the game design overview for a live scene and the full element index.
Game design overview
Live parallax scene, scope notes, and links to every primitive and composed element.
Scenes and tools
Sprite sheet
Plain sprite sheet player with grid, speed, and frame controls.
Parallax layer
Horizontally scrolling tiled backdrops for SpriteSheetStage scenes.
Tile map
Read-only tile layer for displaying resolved autotile layouts at runtime.
Autotile editor
Paint canvas, neighbour rules, tileset switcher, and JSON export.
Game primitives
Sprite sheet stage
Sized viewport for stacking sprite, parallax, and tile layers.
Rule tile
Single atlas cell renderer with pixelated scaling and PNG transparency.
Neighbour editor
3×3 grid for cycling autotile neighbour constraints (null, true, false).
Sprite atlas picker
Clickable atlas grid for choosing output sprites in rule authoring.
Components
Documented UI
Code snippet
Syntax-highlighted fenced code blocks with copy control.
Inline prompt
Full-width copyable prompt examples for agent harness documentation.
Mermaid diagram
Branded flowcharts and sequence diagrams with full-screen expand.
Table
Branded HTML tables for comparisons, reference data, and specs in prose.
Table of contents
Fixed right-rail On this page navigation with compact indicators and hover expansion.
Post card
Blog listing and archive card layouts with background art and text overlays.
Background art card
Image cards with customisable text overlays: centred titles or editorial layouts on square grain gradients.
Sections
ElevenLabs-style marketing sections: bento, API, and impact mosaic layouts.