Gallery screenshot, saved 2026-10-24
How it’s built
- Layout
- A gallery board shows four distinct web-page states in a two-by-two arrangement, each with small corner logo and a cluster of circular utility icons. Upper left is a gray hero with an abstract white shape, pricing/actions and oversized SYBIOSME wordmark; upper right is a light floating-example view of several site thumbnails; lower left is a plan-selection/pricing page; lower right is a black step/instruction page with a timeline-like marker and copy. This is a multi-screen presentation board, not one continuous page state.
- Type
- Across the screens: large lightweight sans wordmark/hero copy, compact sans labels and small step text. Font-family and exact metrics are not established.
- Color and surface
- Alternating gray, white and black textured panels; bright orange action, orange plan tile and neutral gray cards. The four panel backgrounds are separate screen states, not a single website canvas.
- Components
- Four page-state panels with recurring small logo and utility buttons: hero, portfolio examples, pricing selection, onboarding/instruction step.
What makes it work
- Compact recurring corner identity and utility-control vocabulary
- Fine stippled/halftone-like tonal surfaces
- Clear sans hierarchy on restrained contrasting grounds
- Small vivid action accent within mostly neutral fields
On a new subjectGive an unrelated service a consistent compact identity/control vocabulary, restrained textured neutral grounds, clear sans hierarchy and a limited action accent across the views its users actually need. Choose content panels and tasks for the new subject; do not reproduce four views as one screen or require the source sales flow.
Live behavior
- Today
- The saved Sybiosme hero has a fine dotted gray field, a large white curved arrow-like form, a small S mark and four circular controls at the desktop upper right. White copy reads “Your custom website, live in 10 days. A team behind your growth.”; the lower left shows a starting price of $119/month and rounded “Book a call” and “Explore our plans” actions, while a very large thin “SYBIOSME” wordmark spans the bottom. The selected gallery image is a separate montage of page sections and should not be substituted for the live hero.
- Responsive
- Desktop, tablet and phone viewports are 1440×1000, 768×1024 and 390×844; each captured document equals its viewport. At tablet and phone widths, the tagline, curved graphic, price/actions and wordmark stack vertically. The individual frames do not establish breakpoint thresholds or show content beyond the captured viewport.
- Scroll
- The file labeled desktop-scroll measures a 1440×1000 document and actual scrollY=0. It remains on the hero with the dotted curve, tagline, price and actions. No lower-page content or scrolling behavior was captured.
