Made by Circular

Overview

Made by Circular is a curated marketplace of premium design templates for Adobe Creative Suite, serving design professionals, agencies, and creative entrepreneurs who demand both aesthetic sophistication and production-ready functionality. The design system embodies 'Architectural Minimalism'—a philosophy that treats negative space as a material, typography as structure, and color as strategic accent rather than decoration. The UI evokes a sense of refined restraint: a predominantly black canvas (rgb(0, 0, 0)) punctuated by a signature violet accent (#a581fd) that signals interactivity and brand presence, paired with warm terracotta (#d99874) and cool blue (#3898ec) for secondary actions and status indicators. The emotional response is one of professional confidence: users feel they are engaging with a premium, curated product designed by people who understand their craft.

The brand voice is direct, knowledgeable, and unapologetically design-forward. Vocabulary patterns favor precision over marketing flourish: 'comprehensive', 'thoughtfully designed', 'premium product', 'well-laid out'. The tone assumes the user is a skilled creative professional, never condescending, never breathless. Example sentence in brand voice: 'This template gives you a complete, editable color system and typography scale—adapt it, expand it, make it yours.'

Colors

The color system operates on a principle of 'dark-first minimalism with strategic accent': the dominant surface is pure black (#000000), which serves as both background and a neutral container that allows accent colors to command attention without visual noise. The primary accent, violet (#a581fd), is reserved exclusively for interactive elements—buttons, links, focus states, and brand-critical UI—ensuring that every instance of this color signals actionability. Secondary colors support specific communication needs: terracotta (#d99874) conveys warmth and approachability in secondary CTAs and highlights, while blue (#3898ec) is used for informational badges and tertiary actions. The surface stack progresses from pure black (surface: #000000) through carefully calibrated grays (surface-cont

Typography

The type system pairs two distinct families to create a hierarchy that balances editorial sophistication with functional clarity. Signifier (serif, light weight 300) is used exclusively for display and headline levels (display: 60px, headline-lg: 40px, headline-md: 28px), establishing a premium, editorial voice that signals design authority and cultural awareness. Graphik (sans-serif, weights 400–600) handles all body and label text (body-lg: 18px, body-md: 16px, label-md: 14px), ensuring legibility and functional clarity in dense information hierarchies. The serif-to-sans pairing communicates 'designed by designers'—it signals that typography choices are intentional, not default. Line heights are generous (68px for display, 48px for headline-lg, 28px for body-lg) to create breathing room

Layout

The page layout uses a fluid 12-column grid with a maximum container width of 1280px, allowing content to scale responsively from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter between columns is consistently 24px, creating a rhythm that feels spacious without wasting horizontal real estate. Section separation uses the lg spacing token (40px) for major content breaks, md spacing (24px) for subsection breaks, and sm spacing (12px) for component-level grouping. The hero section occupies the full viewport height with generous vertical padding (lg: 40px on top and bottom), establishing a sense of arrival and importance. Card-based layouts use a 2–3 column grid on desktop, collapsing to single column on mobile, with md spacing (24px) between cards to maint

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the dark aesthetic and avoids the 'floating card' cliché. Level 1 (Base): no shadow; elements sit flush on the black background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that suggests subtle lift without visual drama. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), a larger blur radius and spread that creates clear separation from the background. Shadows are always pure black (rgba(0, 0, 0, x)) to maintain color harmony and avoid introducing unwanted color casts. Int

Shapes

The shape philosophy is 'Precise Minimalism'—border-radius values are kept small and consistent, avoiding the soft-rounded aesthetic that dominates contemporary design. The rounded scale progresses from sm (2px) for subtle refinement on inputs and small UI elements, through DEFAULT (3px) for standard buttons and cards, to lg (5px) for larger containers and modals, and xl (9px) for the most prominent surfaces like hero sections or featured cards. Buttons use DEFAULT (3px) border-radius, creating a slight visual softness that prevents a harsh, utilitarian appearance while maintaining geometric p

Components

Action Elements Buttons are the primary interactive currency of the system. The button-primary component uses the violet accent (#a581fd) as background with black text (rgb(26, 26, 26)), creating maximum contrast and unmistakable affordance. Padding is 12px 24px with a height of 48px, meeting accessibility touch-target minimums. The button-primary-hover state shifts the background to the darker primary-container (#7a5fd9) with a 200ms ease-out transition, providing tactile feedback without animation excess. Button-secondary uses a transparent background with a 1px border in primary (#a581fd) and matching text color, allowing secondary actions to coexist without visual dominance. On hover, button-secondary applies a subtle background shift to rgba(165, 129, 253, 0.08), a 8% opacity viol