Storesynk

Overview

Storesynk is a no-code integration platform that bridges Shopify's ecommerce backend with Webflow's design-first frontend, enabling agencies and brands to build custom storefronts without code or embeds. The brand aesthetic is 'Technical Minimalism'—a disciplined, high-contrast design language that prioritizes clarity and developer ergonomics. The UI uses a near-black canvas (rgb(24, 23, 72) on light, rgb(253, 255, 252) as default surface) paired with a vibrant electric blue primary accent (#3276ea) and a neon cyan secondary (#2bd7fd) that signal interactivity and technical sophistication. The emotional response is one of confidence and control: users feel they are operating a powerful, well-engineered system, not a consumer tool.

The brand voice is precise, direct, and solution-focused. Vocabulary skews technical but remains accessible: 'real-time sync,' 'native workflow,' 'no trade-offs,' 'headless architecture.' The tone avoids hype; instead, it emphasizes reliability and developer respect. Example sentence in brand voice: 'Manage 500+ product variants with autosync—edit in Shopify, publish in Webflow, zero conflicts.'

Colors

The color system is built on a high-contrast, technically-minded palette. Primary (#3276ea, a saturated electric blue) is the signature accent used on all interactive elements—CTAs, focus states, links, and brand moments. It commands attention without aggression, evoking trust and technical precision. On-primary is pure white (#ffffff) for maximum contrast and legibility at small sizes. Primary-container (#ebf1fd, a very light blue tint) provides a soft background for secondary information, with on-primary-container (#1e478c, a deep navy) for text. Secondary (#2bd7fd, a neon cyan) is reserved for status indicators, highlights, and supporting interactive states—it appears less frequently but signals real-time activity and system responsiveness. Tertiary (#ff6154, a warm coral-red) is used s

Typography

The type system centers on Forma DJR Text, a geometric sans-serif from Adobe Typekit that communicates technical sophistication and modern design sensibility. Display (76.8px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and must always be white or near-white on dark backgrounds for maximum impact. Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) establish information hierarchy for section titles and card headers, using the full on-surface color (#181748) on light backgrounds. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the core reading experience, with generous line-height to support scanning and accessibility. Label-md (14px, 500 weight, 0.01em letter-spacing) is used for button text, form label

Layout

The layout system uses a 12-column grid with a max-width of 1150px, centered on the viewport. The hero section breaks this constraint intentionally—it spans full-width with a dark gradient background (from #01181d to #1e1d53) to create visual drama and separate the value proposition from the rest of the page. Section spacing follows the semantic scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) separates cards and subsections within a section, and sm (12px) separates inline elements and list items. The gutter (24px) is applied consistently to left/right padding on all containers, creating a breathing room that prevents the layout from feeling cramped. Container max-width is 1150px; on screens below 991px, the layout shifts to a single-column stack with gut

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of background color shifts. Level 1 (Base): The default surface (#fdfdfd) with no shadow, used for the main page background and card backgrounds. Level 2 (Raised): Cards and input fields use box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), creating a subtle lift that separates them from the base. Level 3 (Elevated/Modals): Modals, dropdowns, and floating elements use box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), a compound shadow that suggests greater distance. Hover states on cards increase the

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are used sparingly and consistently to signal interactive affordances without softening the overall aesthetic. Buttons use rounded.DEFAULT (5px), a subtle radius that feels modern without appearing playful. Cards and containers use rounded.lg (20px) for a more pronounced softness that invites interaction and reduces visual harshness. Input fields use rounded.DEFAULT (5px) to match buttons and maintain visual cohesion. Badges and tags use rounded.full (9999px) to signal their compact, self-contained nature. The hero section and full-

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (blue background, white text, 48px height, 15px 32px padding, 5px radius), secondary (transparent background, dark text, 1px outline, 40px height, 9px 22px padding), and accent (lime-green background #c8ff00, dark text, 48px height, used exclusively for high-priority CTAs like 'Create Account'). All buttons use label-md typography (14px, 500 weight) and transition on hover with 150ms cubic-bezier(0.4, 0, 0.2, 1) easing. Primary buttons shift to #2d6ad3 on hover; secondary buttons shift to surface-container-low (#f5f8fe); accent buttons shift to #b8e600. Focus states apply a 3px outline in primary color with 2px offset. Buttons must never use text-transform: uppercase; maintain sentence case

Do's and Don'ts

**Do**

• Do use primary (#3276ea) for all interactive elements—buttons, links, focus states, and active indicators—to create a cohesive, recognizable interaction language.
• Do maintain 7:1+ contrast between text and background on all surfaces; test with WCAG AA standards using tools like WebAIM Contrast Checker.
• Do apply the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing to all hover and focus state changes for a consistent, snappy feel.
• Do use the full-width dark hero section (gradient from #01181d to #1e1d53) to separate the value proposition from supporting content and create visual drama.
• Do reserve the accent green (#c8ff00) exclusively for the primary conversion CTA ('Create Account'); never use it for secondary actions or decorative elements.
• Do apply generous white-space (lg spacing for section separation, md for card groups) to prioritize clarity and reduce cognitive load.

**Don't**

• Don't use secondary (#2bd7fd) or tertiary (#ff6154) as primary button colors; they are reserved for status indicators and error states only.
• Don't apply rounded corners larger than 20px to cards or containers; the brand rejects soft, bubbly aesthetics in favor of technical precision.
• Don't use text-transform: uppercase on any body or label text; maintain sentence case for accessibility and brand voice consistency.
• Don't apply glassmorphism, backdrop-filter blur, or transparency effects to containers; the design favors solid colors and clear visual separation.
• Don't stack more than 3 columns of cards on desktop; prioritize readability and scanning over density.
• Don't use shadows larger than 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); excessive shadows dilute the technical aesthetic and create visual noise.