Living design system
The pieces this site is built from, and how they fit together.
Every colour, size, font and spacing value on the site is a token defined once and used everywhere. Change one here and it updates across every page that uses it. 30 tokens drive 16 shared components.
Anyone can drag a slider or pick a colour to preview a change in their own browser. Saving — which changes the real site for everyone — needs the edit password (unlock in the sidebar).
Foundations
Seven colours run everything outside case studies.
Geist for headlines and body, one font for everything.
The rhythm of the page: margins, widths and gaps.
Responsive radii: larger on desktop, tighter on mobile.
The size, shape and weight shared by every button.
Timing for animations, transitions and auto-advance.
Lucide React icons, rounded stroke style.
Components
Floating pill navbar. Full-width at scroll 0, pill with border and shadow when scrolled. Logo, page links, login and register buttons.
Dark footer with logo, product/company/contact columns, copyright and Bento Development attribution.
Full-width section wrapper with standard vertical padding. White or off-white background.
The main h1 headline on every page. Geist, bold, tight tracking.
H2 heading for major sections within a page.
H3 for subsections, tab content titles, and card headings.
Small muted label above a section heading.
Body-size muted text below headings. Max-width constrained for readability.
Primary (green filled) and secondary (outlined) button pair. External links open in new tabs.
Text labels with sliding underline. Optional auto-advance timer. Used for workflow, role, and module tabs.
Collapsible question-answer pairs. Plus icon rotates to X on open. Smooth height animation.
Video with poster PNG fallback, or image with placeholder fallback. Used for all product visuals.
Interactive iframe of the BentoSMS demo. Portal switcher tabs, expand/minimize fullscreen, loading state.
Three cards with colored left border, quote, name, role, and auto-swappable profile image.
Clickable card linking to a step-by-step tutorial. Title, description, step count, role badge.
Six integration icons with auto-swap to real logos when PNG files are placed.