Synclify

Overview

Synclify is an agentic AI assistant that automates Instagram management for creators, brands, and agencies. The design system embodies a "Computational Minimalism" aesthetic—a sophisticated fusion of technical precision and warm, approachable typography. The interface prioritizes clarity and trust: every number displayed is traceable to its source, every recommendation is explainable, and the visual language reflects the rigor of data-driven decision-making without sacrificing warmth. The brand personality is conversational yet authoritative, speaking to creators in their own voice. Example: "Your Reels are outperforming carousel posts by 34%—here's why, and what to post next Tuesday."

Colors

The color palette centers on a deep, near-black canvas (#141210) paired with a luminous purple accent (#a78bff) that signals agency, intelligence, and creative possibility. Primary (#a78bff) is deployed on CTAs, focus states, and accent highlights—it appears sparingly but decisively, commanding attention without overwhelming. The surface stack progresses from #0a0908 (surface-dim, used for subtle dividers) through #141210 (base), #191715 (container-low, card backgrounds), and #222e1b (container, elevated surfaces), creating visual depth through luminosity rather than shadow. On-surface text is a warm off-white (#f7f5f2) that reduces eye strain on dark backgrounds. Secondary (#191715, the base dark) is used for buttons and interactive elements, while tertiary (#fac8e0, a muted magenta) prov

Typography

The type system pairs Satoshi (display and headlines) with DM Sans (body and labels), creating a hierarchy that balances personality with legibility. Satoshi's geometric warmth at large sizes (72px display, 48px headline-lg) conveys confidence and modernity, while its tight letter-spacing (-0.04em to -0.025em) reinforces precision. DM Sans at body sizes (16–18px) provides neutral, highly readable text for analytics and explanations. JetBrains Mono is reserved for labels, tags, and technical metadata (12px, 0.16em letter-spacing, uppercase), signaling data and computation. All headlines use font-weight 700–900 with line-height ratios of 0.98–1.1 to create visual compression and impact. Body text uses 400 weight at 1.5 line-height (24–28px) for comfortable reading. Apply text-shadow: 0 1px 2

Layout

The layout employs a 12-column grid with a fixed max-width of 1200px, centered with auto margins. Horizontal padding scales responsively: 24px on mobile (1.5rem), 32px on tablet (2rem), and 40px on desktop (2.5rem). Sections use a 64px vertical rhythm (xl spacing) for major band separations, with 40px (lg spacing) for subsection breaks. The container class (.shell) enforces consistent guttering across all pages. White-space is generous and intentional: cards breathe with 28px padding on top and 16px on sides/bottom, creating visual hierarchy through negative space rather than borders. The grid accommodates both full-width hero sections and constrained content zones, allowing asymmetric layouts that feel dynamic without chaos.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and surface-container progression rather than heavy drop shadows. Level 1 (Base): no shadow; surface-dim (#0a0908) or surface (#141210) with 1px outline-variant border. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background surface-container (#222e1b), 1px border outline-variant. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), background surface-container-high (#2d2925). Hover states elevate cards from Level 2 to Level 3 via shadow and background shift. Focus states on interactive elements use a 2

Shapes

The shape philosophy is "Technical Warmth"—sharp enough to feel precise and modern, rounded enough to feel approachable. Buttons use rounded-sm (0.25rem / 4px) for a crisp, minimal appearance that suggests computational efficiency. Cards and containers use rounded-lg (1rem / 16px) for a softer, more inviting feel. Input fields use rounded-DEFAULT (0.5rem / 8px) as a middle ground. Badges and pills use rounded-full (9999px) to signal completeness and status. The rationale: small radii on interactive elements (buttons, inputs) reinforce precision and control, while larger radii on content contai

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use background #a78bff, text #1f1c19, padding 16px 28px, height 48px, rounded-sm (4px), and font-weight 700. On hover, shift to #9370e8 with a 120ms ease-out transition. On active, darken to #8a5dd9. Secondary buttons (button-secondary) use background #191715, text #f7f5f2, padding 10px 16px, height 40px, rounded-lg (16px), and font-weight 600. Ghost buttons are transparent with a 1px outline-variant border, padding 12px 16px, and shift to surface-container-high on hover. All buttons use DM Sans at 14px (label-md) and support focus-visible with a 2px primary outline at 2px offset.

Containers & Surfaces Cards (card component) use background surface-container (#222e1b), rounded-lg (16px), p

Do's and Don'ts

**Do**

• Do use primary (#a78bff) exclusively for CTAs, focus states, and key interactive elements—never for backgrounds or body text.
• Do maintain the 64px (xl spacing) vertical rhythm between major sections; it creates predictable, scannable page flow.
• Do apply 1px outline-variant borders to all cards and containers to define edges crisply in the dark theme.
• Do use Satoshi at display and headline sizes with tight letter-spacing (-0.04em to -0.025em) to reinforce precision and confidence.
• Do layer focus-visible outlines (2px primary, 2px offset) on all interactive elements for keyboard navigation accessibility.
• Do transition hover states over 120–200ms with ease-out timing to feel responsive without jarring.

**Don't**

• Don't use primary (#a78bff) for body text, backgrounds, or non-interactive elements—it dilutes its signal strength.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.2); the dark theme already provides depth through surface progression.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm for buttons, DEFAULT for inputs, lg for cards, full for badges).
• Don't use DM Sans for display or headline text; Satoshi's geometric warmth is essential to the brand voice at large sizes.
• Don't omit outline-variant borders on cards and containers; they're critical for visual definition in the dark theme.
• Don't animate transitions faster than 100ms or slower than 300ms; the brand feels responsive and precise, not sluggish or hyperactive.