Synck

Overview

Synck is a professional IT services WordPress theme designed for businesses seeking to communicate technical expertise with approachable clarity. The brand serves B2B technology consultants, managed service providers, and digital transformation agencies—audiences that value precision, reliability, and forward momentum. The aesthetic is 'Technical Minimalism': a clean, white-dominant canvas punctuated by a bold primary blue (#1351d8) that signals trust, action, and digital innovation. The UI evokes confidence without coldness, combining generous white space (40px–64px section gaps) with sharp geometric elements (3–4px border-radius on cards, 9999px on buttons) to create a sense of modern professionalism.

The brand voice is direct, confident, and solution-focused. Synck speaks in active verbs and concrete outcomes: 'We propel your business forward,' 'Seamless IT for your business,' 'Level up your business with SYNCK.' Vocabulary favors business-outcome language ('growth,' 'expertise,' 'support,' 'propel') over technical jargon. Tone is warm but authoritative—never breathless, always grounded. Example sentence in brand voice: 'We provide the expertise and support to propel your business forward in the digital landscape.'

Colors

The Synck color system is anchored in a high-contrast, professional palette built around trust and action. Primary (#1351d8) is the signature accent—a medium-saturation blue deployed on CTAs ('Get Started,' 'Learn More'), section subtitles, icon backgrounds, and hover states. It appears sparingly but decisively, guiding the user's eye to conversion moments. Secondary (#54595f) is a neutral charcoal used for body text, secondary headings, and structural elements; it provides readable contrast (WCAG AA) against white surfaces without the harshness of pure black. Tertiary (#61ce70) is a fresh green reserved for success states, positive badges, and accent highlights in feature lists.

The surface stack is predominantly white (#ffffff) with carefully calibrated grays for depth: surface-containe

Typography

Synck's type system is built entirely on DM Sans, a geometric sans-serif that balances technical precision with human warmth. The hierarchy spans from display (66px, 500 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and form labels. Display and headline-lg use negative letter-spacing (-0.02em, -0.015em) to tighten the visual mass and convey authority; body and label sizes use neutral to slightly positive letter-spacing (0.005em–0.03em) to maintain readability at smaller scales. Line-height is generous: 76px for display (1.15× multiplier), 28px for body-lg (1.56× multiplier), and 16px for label-sm (1.33× multiplier), ensuring comfortable reading across all screen sizes.

When displaying small labels (12–14px) over busy backgrounds or within dense data tables, a

Layout

Synck uses a fluid 12-column grid with a fixed max-width of 1140px, centered on the viewport. The page rhythm is defined by a spacing scale: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for gutter and card padding, lg (40px) for section separation, and xl (64px) for major section breaks (hero to features, features to testimonials). Container padding is consistently md (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile to maximize content width on small screens.

White space is treated as a design material, not a void. Sections are separated by lg (40px) vertical spacing minimum; hero sections use xl (64px) top and bottom padding. Cards within a grid maintain md (24px) gaps. The gutter width is md (24px) between columns. This rhythm crea

Elevation & Depth

Depth in Synck is achieved through subtle shadows and strategic use of background color shifts, not through dramatic layering. The elevation system has three levels: Base (no shadow, white background), Standard (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), surface-container background), and Elevated (box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1), surface-container-high background). Cards and modals default to Standard elevation; on hover or focus, they transition to Elevated over 200ms (transition: all 200ms ease-in-out). Buttons use no shadow at rest; on hover, they shift to a darker primary s

Shapes

Synck employs 'Technical Sharpness'—a shape philosophy that balances precision with approachability. Border-radius values are deliberately small: sm (3px) for subtle rounding on minor elements, DEFAULT (4px) for most cards and containers, md (6px) for slightly more prominent cards, and lg (8px) for larger modular components. Buttons and CTAs use full (9999px) border-radius to create pill-shaped buttons that feel modern and clickable. This hierarchy—tight rounding on data containers, full rounding on actions—creates visual distinction: data is contained and precise, actions are inviting and for

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor {colors.primary} (#1351d8), textColor {colors.on-primary} (#ffffff), rounded full (9999px), padding 12px 32px, and height 48px. On hover, transition to backgroundColor #0d3a99 over 200ms with no shadow. button-secondary mirrors the primary button but uses a 2px border in primary and transparent background; on hover, the background becomes primary-container (#e8f0ff). button-ghost is a text-only variant with no background, primary text color, and an underline; use for tertiary actions like 'Learn More' or 'Contact Us.' All buttons must have a minimum touch target of 48px height and 44px width to meet accessibility standards.

Containers & Surfaces Cards (card component) use backgroundCol

Do's and Don'ts

**Do**

• Do use primary (#1351d8) exclusively for CTAs, focus states, and key interactive elements; it should appear sparingly to maintain impact.
• Do maintain md (24px) gutter spacing between grid columns and lg (40px) between major sections to create visual breathing room.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards at rest and upgrade to 0 4px 10px -2px rgba(0, 0, 0, 0.1) on hover to signal elevation.
• Do use DM Sans at 500–600 weight for all headlines and 400 weight for body text; avoid mixing typefaces.
• Do set input focus states with a 3px rgba(19, 81, 216, 0.1) box-shadow and primary border to provide clear visual feedback.
• Do use full (9999px) border-radius on buttons and 4px on cards to distinguish actions from containers.

**Don't**

• Don't use secondary (#54595f) or tertiary (#61ce70) as background colors; reserve them for text, icons, and accent strokes only.
• Don't apply shadows to text, small UI elements, or buttons at rest; shadows are reserved for cards and modals.
• Don't exceed 1140px container max-width on desktop; this preserves optimal line-length (65–75 characters) for body text.
• Don't mix border-radius values within a single component; if a card uses 4px, internal elements should use 4px or smaller.
• Don't use pure black (#000000) for body text; use on-surface (#000000) from the token system for consistency.
• Don't animate transitions faster than 150ms or slower than 300ms; use 200ms as the default for hover and focus state changes.