SID Thailand

Overview

SID Thailand is a luxury real estate and property development ecosystem positioned at the intersection of architectural ambition and refined minimalism. The brand serves high-net-worth investors and discerning property buyers in Phuket, offering a 360° integrated platform that builds, manages, consults, trains, and educates. The aesthetic is rooted in **Architectural Minimalism with Warm Luxury**—a design philosophy that rejects both sterile modernism and ornamental excess in favor of purposeful geometry, restrained color, and tactile warmth. The visual language evokes the precision of a blueprint rendered in warm earth tones (#ffce7e to #635e50 gradient) against a deep charcoal canvas (#202020), creating an atmosphere of sophisticated restraint and timeless authority. Users encounter a brand that feels both aspirational and grounded: the hero imagery showcases lush, sustainable development; the typography is measured and confident; the interaction patterns are deliberate and unhurried.

The brand voice is authoritative yet approachable, speaking to investors with clarity and conviction. SID does not use breathless marketing language; instead, it employs declarative statements grounded in data and vision. Vocabulary favors precision: "360° property ecosystem," "integrated platform," "sustainable development," "market participants." The tone is calm, professional, and occasionally poetic when describing the Phuket landscape. Example sentence in brand voice: "We don't just build—we architect the future of Phuket's property market, one sustainable development at a time."

Colors

The color system is built on a foundation of deep, sophisticated neutrals anchored by a warm, gradient-based primary accent. **Primary (#ffce7e to #997c4b gradient)** is the signature accent used exclusively on call-to-action buttons, key interactive elements, and brand moments that demand attention. This gradient—descending from a luminous golden yellow to a muted bronze—communicates luxury without ostentation, evoking natural materials and refined craftsmanship. **Secondary (#997c4b)** and **Tertiary (#786f61)** provide supporting warmth for secondary actions, badges, and accent text; they sit within the same warm earth-tone family but with reduced luminosity, ensuring visual hierarchy. **Surface (#202020)** is the dominant background, a near-black that provides maximum contrast for whit

Typography

The type system employs a single typeface family—HelveticaNeueCyr (with fallbacks to HelveticaNeue and system fonts)—across all scales, reinforcing the brand's commitment to refined minimalism and architectural precision. Font-weight is deliberately restrained: body copy uses weight 400 (regular) at 16–21px with 24–28px line-height for comfortable reading; headings use weight 500 (medium) exclusively, never bold, to maintain visual restraint. The display scale (78px, weight 500, -0.02em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through scale rather than weight. Headline-lg (48px, weight 500) and headline-md (32px, weight 500) serve section breaks and card titles, with negative letter-spacing (-0.015em to -0.01em) tightening the visual tex

Layout

The layout system employs a fluid 24-column grid (at desktop, 1280px max-width) that scales responsively to 12 columns at 860px and 4 columns at 460px breakpoints. Container padding is responsive: 2.78vw (approximately 36px at desktop) on desktop, 32px at tablet, and 16px at mobile, creating a breathing margin that adapts to viewport size. Column gap is 1.39vw (approximately 18px) at desktop, 30px at tablet, and 20px at mobile. The max-container width is 1280px, ensuring content remains legible and visually balanced on ultra-wide displays. Spacing is semantic and hierarchical: **lg spacing (40px)** separates major sections and creates visual breathing room; **md spacing (24px)** is the default padding for cards, form fields, and component internals; **sm spacing (12px)** is used for tight

Elevation & Depth

Depth in this system is conveyed through subtle shadow and surface-color progression rather than dramatic layering. The elevation scale uses three tiers: **Level 1 (sm, 0 1px 2px rgba(0, 0, 0, 0.12))** for minor interactive elements like hover states on list items; **Level 2 (md, 0 3px 8px rgba(0, 0, 0, 0.15))** for cards, modals, and primary interactive surfaces; **Level 3 (lg, 0 8px 24px rgba(0, 0, 0, 0.2))** for floating elements, dropdowns, and the most prominent overlays. Shadows are soft and diffuse, never sharp or high-contrast, maintaining the refined aesthetic. The surface-container s

Shapes

The shape philosophy is **Architectural Precision with Approachable Warmth**—a balance between sharp, geometric forms and subtle softness that prevents the interface from feeling cold or austere. Border-radius follows a deliberate scale: **sm (4px)** is used sparingly for minor UI elements like small badges or tight groupings; **DEFAULT (8px)** is the standard radius for inputs and secondary cards; **md (12px)** is applied to form fields and tertiary surfaces; **lg (16px)** is used for primary cards and secondary buttons; **xl (20px)** is reserved for primary call-to-action buttons and hero-le

Components

Action Elements

**Primary Button** uses the gradient primary (linear-gradient(180deg, #ffce7e, #997c4b)) as its background, with on-primary text color (#46361c) rendered in uppercase label-md typography. Padding is 18px horizontal × 12px vertical (fitting the 48px height), and border-radius is xl (20px). On hover, the button transitions to a darker gradient (linear-gradient(180deg, #997c4b, #635e50)) with a subtle brightness filter (brightness(0.95)), and the text content slides upward via transform: translateY(-120%) over 300ms using cubic-bezier(0.16, 1, 0.3, 1) easing. The duplicate content slides in from below simultaneously, creating a smooth, premium interaction. Disabled state applies filter: brightness(0.6) and cursor: not-allowed.

**Secondary Button** uses a transparent back

Do's and Don'ts

**Do**

• Do use the primary gradient (linear-gradient(180deg, #ffce7e, #997c4b)) exclusively on primary CTAs and hero accents—it is the brand's signature and should never be diluted or overused.
• Do maintain generous white-space and negative space; the brand thrives on restraint and breathing room, not density or visual clutter.
• Do apply uppercase text-transform to all button labels and form placeholders to reinforce the architectural, precise brand voice.
• Do use the surface-container stack for depth instead of shadows; color progression is more sophisticated and maintains the minimalist aesthetic.
• Do ensure all interactive elements (buttons, links, inputs) have clear hover and focus states with 300ms transitions to signal interactivity without jarring the user.
• Do pair HelveticaNeueCyr weight 500 (medium) with generous line-height (1.4–1.5) for body text to maintain legibility and sophistication on dark backgrounds.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary colors; the brand uses carefully calibrated near-black (#202020) and warm accents (#ffce7e) to avoid harshness.
• Don't apply border-radius greater than 20px (xl) to primary components; excessive rounding contradicts the architectural precision of the brand.
• Don't mix typefaces; HelveticaNeueCyr is the sole brand typeface. System font fallbacks are acceptable only for accessibility, never as a design choice.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.2)); deep shadows feel heavy and undermine the refined, minimalist aesthetic.
• Don't apply color transitions or gradients to secondary or tertiary elements; the primary gradient is reserved for the brand's signature accent and must remain distinctive.
• Don't use the error color (#e73737) for non-critical messaging; reserve it for validation errors, alerts, and status warnings only.