The widget library for Squarespace is here Learn more

Technical Manifesto Process - Text Only

Free

Achieve a high-end, avant-garde look without relying on heavy media files. The Technical Manifesto Process widget utilizes a "brutalist" design language focused purely on typography and minimalist interaction.

It features a stark dark mode palette using a near-black background and sharp neon-green accents. The layout contrasts large, bold sans-serif headlines with technical monospaced fonts for numbering and lists, resembling a system readout or terminal screen.

Key Features:

  • Text-Only Design: Zero images or videos required. The visual impact comes entirely from typography and spacing.
  • "Spotlight" Hover Effect: A sophisticated CSS interaction where hovering over the list dims inactive items, while the currently hovered step lights up with bright text and a glowing border.
  • Technical Typography: Combines a clean font (like Inter) for readability with a monospace font (like Roboto Mono) for a technical feel.
  • Rich Text Descriptions: Uses data-richtext-editable to allow for bullet points and multi-paragraph explanations within each step.
  • Auto-Numbering (Optional): Includes a lightweight JavaScript snippet to automatically format steps as "01/", "02/", etc., even when reordered.
  • Iframe Safe: Relies on standard CSS positioning (no sticky) for robust compatibility across all editors.

 

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.