Browse the library
Web library
The essentials first. Components next. Motion last.
Find a pattern. Point to a section.
Use the numbered sections below when sharing feedback. The website uses these same controls, motion backgrounds and brand assets.
01 / Foundations
From the Figma design system
ON LIGHT / ORIGINAL SVG
ON DARK / ORIGINAL SVG
The A’s transparent-to-ink fade, extended into blue, midnight and soft edges.
#0C10D4#010113#FAFAFA#FFFFFFHEADINGS / POPPINS
BODY / GOOGLE SANS FLEX
Clear, readable and quietly confident.
Figma colours and typefaces. A 4px spacing scale, fluid headings and responsive layout rules.
RHYTHM & SPACING
Small steps. Consistent rhythm.
Use the same scale for padding, gaps and margins. Tight spaces connect related items; larger spaces separate ideas.
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
Inside a component
8–16px between related labels and controls. 24–32px of comfortable internal space.
Between components
24–48px between cards or content groups. Keep the gap consistent within each row.
Between sections
64–112px on the website, scaling with the screen. Space stays outside full-colour panels.
LAYOUT & SCALING
A shared edge. Room to breathe.
Navigation, headings and content align to the same page edges. Columns adapt to the available space; reading lines stay short.
Responsive grid
4, 8 or 16 columns. Grouped content stacks on smaller screens without changing its reading order.
Fluid type
Display 40–80px. Section headings 32–54px. Body text starts at 16px with generous line spacing.
Consistent alignment
Use the shared container. Scale outer margins with the viewport and keep controls at least 44px tall.
Type, spacing and layout scales
| Style | Size / line height | Weight |
|---|---|---|
| heading-03 | 20 / 28 | 400 |
| heading-04 | 28 / 36 | 400 |
| heading-05 | 32 / 40 | 400 |
| heading-06 | 42 / 50 | 300 |
| heading-07 | 54 / 64 | 300 |
Spacing tokens: 4, 8, 12, 16, 24, 32, 48, 64 and 96px. Control radius: 4px. New card and panel radii: 24 and 32px.
The layout grid has 4 columns below 672px, 8 columns below 1056px and 16 columns above. Content is capped at 1584px. All values are expressed in rem; headings for page patterns scale fluidly.
02 / Buttons & links
Figma controls
Hover, pressed, keyboard focus and disabled states. Use links for navigation and buttons for actions.
03 / Navigation
Aventropy navigation patterns
The compact pattern is shown below. The website menu expands into site links, three service groups and a contact panel, following the Legency structure with a 500ms horizontal and vertical expansion.
Compact floating header with an expandable menu. On small screens, the contact link remains in the menu.
04 / Cards
New Aventropy patterns
Work cards use a 4:3 image area and one clear link. Artwork and project labels are placeholders.
Reusable content structures. See the website for current service scope and project evidence.
05 / Accordion
Adapted from Figma
Does the library need a JavaScript framework?
No. The components use ordinary HTML and CSS. A small, optional JavaScript file adds menu dismissal, modal dialogs, character counts and the form demonstration.
Can the content be edited directly?
Yes. Every heading, paragraph, image and link is in the HTML. There is no build step or content hidden inside JavaScript.
Which parts are new?
The navigation, hero, card family, editorial sections, quote layout, call to action and footer extend the Figma foundations for a consultancy website.
Native details and summary elements work without JavaScript. The Figma chevron is reused as supplied.
06 / Forms & feedback
Adapted from Figma
Text input, email, select, textarea, checkbox, helper text, inline errors and success feedback. The Figma Select (2008:165336) powers the Work industry filter. The experience finder gives visitors separate routes through industry experience and platform options. Larger web labels and input text improve readability.
Enter an email address in the format [email protected].
Explain why the field is unavailable when it matters.
07 / Dialog
Accessible web extension
Native dialog provides a focus boundary and makes the background inactive. Focus returns to the opening button when closed.
08 / Hero
New Aventropy pattern
Complex workflows.
Clearer experiences.
We help product teams make complex digital workflows easier to use and build.
Fluid display type, a focused introduction and a pixel motion background. Example composition using the current product-workflow positioning.
09 / Content sections
New Aventropy patterns
Our approach
Space to make the complex feel clear.
A flexible introduction that pairs a short section label with a larger idea and supporting context.
Understand
Introduce the first part of the story, the question or the challenge.
Explore
Describe the thinking and decisions that shape the direction.
Refine
Explain how the work comes together and what happens next.
An editorial layout for approaches, capabilities or process steps. The sequence is illustrative.
10 / Quotes & metrics
New Aventropy patterns
“A thoughtful client quote belongs here, in their own words.”
- Outcome label
- XX%
- Outcome label
- XX×
- Outcome label
- XX
Layout placeholders only. Replace with approved quotes and verified results before using these patterns on the website.
12 / Motion
16 dot compositions · two surfaces
Sixteen distinct forms share the flowing dots, colour and depth of the original designs. Choose a composition that supports the story of each section.
Open motion studioDot motion / 01—16
Open waves, folded surfaces, arcs and layered forms. One consistent material, with a different silhouette and movement for each composition.
Use a different composition for each scene on a page. Keep scale, speed and dispersion consistent; preserve a clear reading area for content. All sixteen compositions share the footer motion control and include a still fallback.
13 / Using the library
Version 2.2
Copy. Compose. Make it yours.
Download the library, keep its folders together and start with the page example. Expand “HTML” below a specimen to copy its markup. Give repeated components unique IDs and update the links.
<link rel="stylesheet" href="/css/fonts.css?v=2.8.5">
<link rel="stylesheet" href="/css/tokens.css?v=2.8.5">
<link rel="stylesheet" href="/css/components.css?v=2.8.5">
<script src="/js/aventropy.js?v=2.8.5" defer></script>
<!-- Add these for motion backgrounds -->
<link rel="stylesheet" href="/css/entropy.css?v=2.8.5">
<script src="/js/entropy-core.js?v=2.8.5" defer></script>
<script src="/js/field-core.js?v=2.8.5" defer></script>
<script src="/js/dot-core.js?v=2.8.5" defer></script>
<script src="/js/entropy.js?v=2.8.5" defer></script>Foundations
Edit colours, typography, spacing and radii in tokens.css. Fonts and the supplied light/dark logos are bundled locally.
Layouts
Use container, stack, cluster and grid classes. Layouts move from multiple columns to a single column on smaller screens.
Interactions
Menus and accordions use native HTML. The optional script adds Escape dismissal, dialog focus, character counts and the form demo.
Before a real launch
Replace example copy and artwork, connect any contact form, and add approved legal and social links.
Design sources and adaptations
The supplied Figma file provides the brand colours, Poppins and Google Sans Flex typography, buttons, links, fields, tags, checkboxes and accordion details.
Legency informs the floating navigation, generous spacing, display type and rounded content panels. The Aventropy branding and component implementation are independent.
The missing web patterns are new. Web adaptations include 16px input text, 14px labels, touch-friendly controls, fluid type, card radii, dark surfaces and reduced-motion support. Exact Figma node references are included in the download.