Gildwyn Studio

Overview

Gildwyn Studio is a luxury portfolio design system for creative professionals and template designers, embodying a 'Sophisticated Minimalism' aesthetic that merges deep, jewel-toned backgrounds with vibrant gradient accents. The visual language evokes premium craftsmanship, artistic refinement, and confident self-presentation—transforming a portfolio into a gallery experience. The brand personality is poised, articulate, and unapologetically bold: it speaks to designers who understand that restraint and precision amplify impact. Voice example: 'Designed with intention. Every template tells a story.'

Colors

The color system centers on a rich, dark burgundy foundation (#4c0f2e surface, #0f1015 background) that provides sophisticated depth and visual weight. Primary accent is a vibrant violet (#8b3dff), used exclusively for interactive CTAs and key focus states—this is the signature brand color that commands attention without aggression. Secondary accent is a luminous cyan (#00c4cc), deployed in gradient combinations (linear-gradient(90deg, #00C4CC 0%, #7D2AE8 100%)) for hover states on premium buttons, creating a sense of motion and energy. Tertiary red (#db142c) is reserved for error states and critical alerts. The on-surface palette (#e0c3b5 for primary text, #cac1b2 for secondary) uses warm, desaturated tones that read elegantly against dark backgrounds. Surface containers (#2d1f2a to #4d35

Typography

The type system pairs Canva Sans (display, headlines) with system fonts (-apple-system, BlinkMacSystemFont, Segoe UI) for body text, creating a hierarchy that balances personality with legibility. Display (84px, 400 weight, -0.04em tracking) anchors hero sections with elegant restraint; headline-lg (40px, 500 weight) introduces major sections; body-md (16px, 400 weight, 24px line-height) ensures comfortable reading on dark backgrounds. Label-md (14px, 600 weight, 0.01em tracking) is applied to all interactive elements (buttons, badges, form labels) with a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) when rendered over busy gradient backgrounds to maintain legibility. Smaller labels use 0.05em letter-spacing for crisp, technical precision.

Layout

The layout follows a 12-column grid system with a fixed container max-width of 1288px, centered on viewport. Page rhythm uses lg spacing (40px) for major section separation, md spacing (24px) for component padding, and sm spacing (12px) for internal element gaps. The hero section occupies full viewport height (720px in the reference design) with centered, large-scale typography. White-space is intentional and generous—never cramped—allowing the dark background and accent colors to breathe. Gutter spacing is consistently 24px on desktop, collapsing to 12px on mobile. The footer uses a compact horizontal pill layout (padding: 6px, gap: 8px) with a black background (#000000) to anchor the page and provide visual closure.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (base): solid background color (#0f1015 or #4c0f2e). Level 2 (cards, modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container}, creating gentle separation. Level 3 (elevated modals, overlays): box-shadow: 0px 2px 18px 0px rgba(14, 19, 24, 0.25), 0px 0px 1px 0px rgba(14, 19, 24, 0.02), with backdrop-filter: blur(4px) on mobile to soften the layer beneath. Interactive elements use rgba(255, 255, 255, 0.1) backgrounds to suggest glass or frosted surfaces, reinforcing a pre

Shapes

The shape philosophy is 'Refined Precision'—combining sharp architectural lines with selective softness. Buttons and pills use border-radius: 1000px (full rounding) to convey friendliness and approachability in interactive elements. Cards and containers use 12px (md radius) for a balanced, modern feel that avoids both harsh corners and excessive roundness. Form inputs and modals use 8px (DEFAULT radius) for subtle definition. The footer pill buttons specifically use 1000px radius with a gradient background and animated wipe effect on hover, creating a signature micro-interaction. This tiered a

Components

Action Elements Buttons are the primary interactive currency. The button-primary component uses {colors.primary} (#8b3dff) background, {colors.on-primary} (white) text, label-md typography, full rounding (1000px), and compact padding (4px 8px, 32px height). On hover, the background transitions to {colors.primary-fixed-dim} (#8b3dff) with a 0.2s ease transition. A premium variant, button-primary-gradient, applies a linear-gradient(90deg, #00C4CC 0%, #7D2AE8 100%) background for emphasis, with an animated wipe effect (transform: translateX(110%), 0.7s transition) on hover. Button-secondary uses transparent background with {colors.on-surface} text, 4px border-radius, and a subtle hover state (rgba(255, 255, 255, 0.1) background). ### Containers & Surfaces Cards use {colors.surface-contain

Do's and Don'ts

**Do**

• Do use {colors.primary} (#8b3dff) exclusively for primary CTAs and focus states—it is the signature brand accent and should never be diluted or overused.
• Do apply lg spacing (40px) between major sections to create breathing room and visual hierarchy on the page.
• Do use the gradient linear-gradient(90deg, #00C4CC 0%, #7D2AE8 100%) for premium hover states and animated interactions to convey energy and sophistication.
• Do maintain the dark surface palette (#4c0f2e, #0f1015) as the foundation—it is the brand's visual anchor and conveys luxury and refinement.
• Do use label-md (14px, 600 weight) for all button text and form labels to ensure crisp, scannable hierarchy.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and containers for subtle, elegant depth without harshness.

**Don't**

• Don't use primary violet (#8b3dff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus indicators.
• Don't apply border-radius values smaller than 4px (sm) or larger than 24px (xl) outside of the defined scale; consistency is critical to the system.
• Don't use system fonts (Segoe UI, Arial) for display or headline text—always use Canva Sans to maintain the brand's distinctive voice.
• Don't apply shadows stronger than {elevation.lg} (0px 2px 18px 0px rgba(14, 19, 24, 0.25)) on standard components; excessive depth dilutes the refined aesthetic.
• Don't mix the cyan secondary accent (#00c4cc) with the violet primary (#8b3dff) in the same component—use them in separate, intentional contexts.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements; generous spacing reinforces the premium, spacious feel of the brand.