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.
Reuse in another project
Install with the element CLI
Published primitives copy into another repo the same way skills install with dot-skills: one npx command. See @levi-putna/element for the full CLI docs. Each published element page also has its own copy-ready command.
npx @levi-putna/element@latest list levi-putna/elements
npx @levi-putna/element@latest add levi-putna/elements
npx @levi-putna/element@latest add levi-putna/elements --element buttonWhat 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
Cool light grey canvas (--clr-mono-10). Default page background.
Surface
--surface / bg-surface
Cards, raised reading surfaces, and inputs.
Primary
--primary / bg-primary
Jumbo navy: brand, headings on light, primary actions.
Secondary
--secondary / text-secondary
Sky blue: interactive accents, focus, and secondary actions.
Tertiary
--tertiary / bg-tertiary
Coral: high-emphasis CTAs (Contact us / Find out more).
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
Button
Primary, outline, ghost, and link button variants.
Dialog
Modal surface for forms, confirmations, and focused tasks.
Alert dialog
Interruptive confirmations for irreversible actions.
Switch
Binary toggle paired with Field for labelled settings.
Tabs
Layered content panels shown one at a time.
Field
Labels, helper text, and errors for form controls.
Tag
Code-comment category tags with per-topic colour variants.
Colour swatch
Card, compact, and inline palette preview variants.
Terminal
Monospace output panel for demos and tooling docs.
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.
Code preview
HTML/CSS/JS snippets with a live, style-isolated Result tab alongside the source.
JS Run
RunJS-style JavaScript playground with stacked editor and terminal output.
Sorting algorithm demo
Interactive bar-chart sorting animations with live comparison, move, and demo-time counters.
Pathfinding demo
Live BFS/Dijkstra/Greedy/A* stealth pathfinding over a patrolled grid, with learned-failure trails and per-level stats.
Inline prompt
Full-width copyable prompt examples for agent harness documentation.
Conversation
AI Elements chat transcript with stick-to-bottom scroll and empty state.
Prompt input
AI Elements chat composer with textarea, submit control, and toolbar slots.
Mermaid diagram
Branded flowcharts and sequence diagrams with full-screen expand.
Charts
Interactive line, bar, area, and radar charts for data, with hover tooltips and clickable legends.
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.
Audio player
Composable player with waveform scrubbing for blog audio and voice content.
Post card
Blog listing and archive card layouts with background art and text overlays.
Social post
Platform-authentic embeds for X, LinkedIn, Reddit, Facebook, and GitHub in MDX articles.
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.