A DesignMD user

Generated Nov 5, 2026

DESIGN.md for loanyhome.vn

loanyhome.vn7 colors2 componentsTimes New Roman + Arial

Remix

2 screenshots captured· loanyhome.vn

1 / 2 · Loany Home | Sắp ra mắt · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Loanyhome
description: |
  Loany Home embodies a sophisticated, contemplative luxury with a Vietnamese
  cultural sensibility. The design speaks to rest, refinement, and careful
  anticipation through muted earth tones, elegant serif typography, and
  deliberately sparse layouts. The aesthetic is modern yet timeless—drawing from
  minimalism while celebrating the quiet beauty of domestic spaces. Soft
  overlays, generous whitespace, and a restrained color vocabulary create an
  atmosphere of calm attentiveness, inviting users into a curated, unhurried
  experience where every element serves the mood.
source:
  url: "https://loanyhome.vn"
  pagesAnalyzed: 1
  extractedAt: 2026-11-05
  tokensMeasured: true
colors:
  primary: "#19231F"
  ink: "#FAF7F1"
  body: "#E3E5DE"
  muted: "#E0C79F"
  hairline: "#E5E7EB"
  accent-1: "#111827"
  neutral-1: "#D1D6CF"
typography:
  display:
    fontFamily: "Times New Roman"
    fontSize: 80.64px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -2.02px
  body-lg:
    fontFamily: Arial
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0px
  body-md:
    fontFamily: Arial
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.95
    letterSpacing: 0px
  body-sm:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.55px
  caption-md:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.7
    letterSpacing: 0.55px
  caption-sm:
    fontFamily: Arial
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 3.3px
    textTransform: uppercase
  caption-sm-tight:
    fontFamily: Arial
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 2.42px
    textTransform: uppercase
  caption-xs:
    fontFamily: Arial
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 2.2px
    textTransform: uppercase
rounded:
  none: 0px
spacing:
  xxs: 20px
  xs: 24px
  sm: 36px
  md: 64px
  lg: 80px
  xl: 128px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#111212"
    textMuted: "#737474"
    border: "#D8D8D8"
    accent: "#19231F"
    accentFg: "#FFFFFF"
    focusRing: "#19231F"
    elevation: shadow
  dark:
    bg: "#0F1011"
    surface: "#0F1010"
    surfaceRaised: "#222323"
    text: "#FAF7F1"
    textMuted: "#E3E5DE"
    border: "#E5E7EB"
    accent: "#4C6A5E"
    accentFg: "#FFFFFF"
    focusRing: "#19231F"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: linear
    value: "linear-gradient(90deg, rgba(12, 22, 18, 0.86), rgba(12, 22, 18, 0.72) 46%, rgba(12, 22, 18, 0.3)), linear-gradient(0deg, rgba(12, 22, 18, 0.65), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(12, 22, 18, 0.2))"
components:
  footer:
    typography: "{typography.caption-sm}"
    textColor: "{colors.neutral-1}"
    border: "1px solid rgba(250, 246, 240, 0.2)"
    padding: "23px 0px 23px 0px"
  link:
    typography: "{typography.body-sm}"
    textColor: "{colors.neutral-1}"
states:
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
  input-focus:
    target: input
    state: focus
    outline: "transparent solid 2px"
    outlineColor: transparent
    outlineWidth: 2px
  other-focus:
    target: other
    state: focus
    outline: "transparent solid 2px"
    outlineColor: transparent
    outlineWidth: 2px
  other-disabled:
    target: other
    state: disabled
    opacity: 0.4
  other-hover:
    target: other
    state: hover
    borderColor: "rgba(44, 60, 152, 0.3)"
breakpoints:
  - width: 375
    containerWidth: 308
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 36
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 630
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 44
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 820
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 57
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 72
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 81
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 61
  gradientsFound: 1
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Loany Home

1. Visual Theme & Atmosphere

Loany Home embodies a sophisticated, contemplative luxury with a Vietnamese cultural sensibility. The design speaks to rest, refinement, and careful anticipation through muted earth tones, elegant serif typography, and deliberately sparse layouts. The aesthetic is modern yet timeless—drawing from minimalism while celebrating the quiet beauty of domestic spaces. Soft overlays, generous whitespace, and a restrained color vocabulary create an atmosphere of calm attentiveness, inviting users into a curated, unhurried experience where every element serves the mood.

Key Characteristics

Deep, muted earth tones ({colors.primary} — #19231F) anchoring the visual language
Serif display typography paired with clean sans-serif body text for contrast
Generous whitespace and sparse layouts that breathe
Soft gradient overlays creating depth without visual noise
Carefully tracked captions in uppercase for hierarchy without aggression
Photography-forward design with subtle color-blocking rather than shadow depth

2. Color Palette & Roles

Primary

Brand Accent ({colors.primary} — #19231F): Deep forest green used for primary CTAs, brand mark emphasis, and active states. Anchors the brand identity and denotes the most important interactive elements.

Accent Colors

Decorative Accent ({colors.accent-1} — #111827): Near-black decorative tone with no measured role; used sparingly for visual layering or background texture.

Neutral Scale

Ink / Headings ({colors.ink} — #FAF7F1): Warm off-white reserved for primary headings and hero text, ensuring strong contrast against dark backgrounds.
Body Text ({colors.body} — #E3E5DE): Soft neutral gray for body copy and main content; slightly warmer than standard neutrals to align with the earth-tone palette.
Muted / Secondary Text ({colors.muted} — #E0C79F): Warm beige for captions, secondary text, and supporting copy; adds visual hierarchy without jarring contrast.
Hairline / Borders ({colors.hairline} — #E5E7EB): Pale gray for 1px borders, dividers, and subtle structural lines.
Neutral / Unassigned ({colors.neutral-1} — #D1D6CF): Decorative neutral with no specific measured role; available for background accents or secondary surfaces.

3. Typography Rules

Font Family

Primary (Display/Headings): Times New Roman, serif
Fallback stack: Georgia, 'Times New Roman', serif

Secondary (Body/UI): Arial, sans-serif
Fallback stack: Arial, Helvetica, sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display	Times New Roman	80.64px	400	1.2	-2.02px	Hero / main headline; dramatic negative tracking
Body Large	Arial	18px	400	1.8	0px	Feature prose and introductory paragraphs
Body Medium	Arial	15px	400	1.95	0px	Standard body copy and paragraph text
Body Small	Arial	12px	400	1.7	0.55px	Links and compact body content
Caption Medium	Arial	12px	600	1.7	0.55px	Semibold labels and emphasized captions
Caption Small	Arial	11px	400	1.5	3.3px	Uppercase section labels (text-transform: uppercase)
Caption Extra Small	Arial	10px	400	1.5	2.2px	Uppercase metadata (text-transform: uppercase)
Caption Small Tight	Arial	11px	400	1.5	2.42px	Uppercase labels with tight tracking (text-transform: uppercase)

Principles

Serif + Sans Contrast: Large serif headlines create prestige and visual anchor; clean Arial body text ensures scannability and modern legibility.
Negative Display Tracking: The -2.02px letter-spacing on the 80.64px display size creates visual tension and sophistication, drawing the eye into the composition.
Uppercase Captions: Consistent use of text-transform: uppercase on captions (11px–10px range) with varying letter-spacing (2.2px–3.3px) provides flexible micro-hierarchy without size changes.
Warm Line Heights: Body text uses 1.8–1.95 line-height for open, comfortable reading; captions use tighter 1.5 for density and focus.
Minimal Font Weight Variation: The system uses weight 400 throughout, except caption-md at weight 600 for emphasis, keeping the design restrained.

4. Component Stylings

Footer

Default State

Font: Arial, {typography.caption-sm} (11px, weight 400, line-height 1.5)
Color: {colors.neutral-1} (#D1D6CF)
Background: transparent
Padding: 23px 0px
Border: 1px solid rgba(250, 246, 240, 0.2) (hairline top border, semi-transparent off-white)
Box Shadow: none
Border Radius: {rounded.none} (0px; sharp corners)
Text alignment: typically left-aligned
Note: Footer spans full width with minimal visual weight, creating a subtle structural boundary.

5. Layout Principles

Spacing System

Base unit: 4px (inferred from responsive grid observations)

Scale:

{spacing.xxs} = 20px (sub-component gaps, tight spacing)
{spacing.xs} = 24px (component padding, small sections)
{spacing.sm} = 36px (medium section spacing)
{spacing.md} = 64px (standard section separation, vertical rhythm)
{spacing.lg} = 80px (large vertical breaks, major section divisions)
{spacing.xl} = 128px (hero section height, full-screen components)

Usage Context:

{spacing.xxs} and {spacing.xs} for internal component padding and button groups
{spacing.sm} and {spacing.md} for section separation and breathing room
{spacing.lg} and {spacing.xl} for hero sections and major compositional breaks

Grid & Container

Max Width: Adaptive; measured at 1440px viewport: 1440px full-width container
Content Column Width (measured):
- 375px viewport: 308px
- 768px viewport: 630px
- 1024px viewport: 820px
- 1280px viewport: 1280px
- 1440px viewport: 1440px
Section Padding Horizontal: 0px across all measured breakpoints (full-width sections with internal margin or padding on child elements)
Column Strategy: Single-column layout on mobile and tablet; flexible vertical stacking favoring full-width hero imagery and prose blocks

Whitespace Philosophy

The design employs abundant negative space to create a sense of luxury and intentionality. Large typographic elements sit in vast whitespace; body copy flows with ample line-height (1.8–1.95) and generous vertical separation between sections. This breathing room allows photography and typography to command attention independently, reflecting a premium positioning where restraint signals confidence.

Border Radius Scale

{rounded.none} = 0px

Component Application:

All measured interactive and static elements use sharp corners (0px), reinforcing a modern, architectural aesthetic with no softened edges.

6. Depth & Elevation

The Loany Home design system employs color-blocking as its primary depth strategy rather than layered shadows. Depth emerges from surface color changes, transparency shifts, and strategic image overlays—creating a flat, contemporary visual language that relies on juxtaposition rather than simulated physical lift.

Gradient & Overlay Strategy

Hero Overlay (verbatim CSS):

background: linear-gradient(90deg, rgba(12, 22, 18, 0.86), rgba(12, 22, 18, 0.72) 46%, rgba(12, 22, 18, 0.3)), 
            linear-gradient(0deg, rgba(12, 22, 18, 0.65), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(12, 22, 18, 0.2));

This dual-gradient creates directional depth: a left-to-right horizontal fade (86% dark → 30% transparent) combined with vertical fading (65% dark at bottom, transparent in middle, subtle return at top). The result is darkened edges that frame the image and ensure text readability without casting literal shadows.

Opacity Levels (Extracted)

100% — Default, full opacity for primary text and interactive elements
0.5 — Disabled button opacity; signals unavailability subtly
0.4 — Disabled other element opacity; even more recessive
0.2–0.86 — Gradient overlay ranges; fine-grained transparency for depth layering without hard edges

Elevation Philosophy

Flat and intentional. No box-shadows are measured in the design system. All depth comes from:

Color value shifts (darker tones advance; lighter recede)
Transparency gradients layered on images
Border color and weight changes
Typography weight and scale contrast

This approach keeps the interface modern and print-like, avoiding skeuomorphic relief effects.

7. Do's and Don'ts

Do

Use Times New Roman for headline drama. The serif typeface with tight negative tracking (-2.02px) creates immediate visual authority; pair it with generous whitespace.
Embrace single-column layouts on small screens. Trust the content hierarchy and photography to carry the design across all breakpoints.
Layer transparent overlays on hero imagery. Use the dual-gradient pattern to ensure text legibility and create compositional depth without shadows.
Apply uppercase captions sparingly. Leverage the 11px–10px range with 2.2px–3.3px tracking for section labels, metadata, and micro-hierarchy.
Maintain sharp corners (0px radius) for consistency. The architectural feel depends on angular, unrounded elements.
Build generous line-height into body copy. 1.8–1.95 ensures readability and creates visual breathing room that reinforces the premium positioning.
Use color-blocking, not shadows, for depth. Rely on darker and lighter background tones, transparency, and image layering.

Don't

Don't soften corners with border-radius. The system is explicitly sharp; any rounding disrupts the modern, architectural aesthetic.
Don't introduce new colors outside the 7-color palette. The warm, muted earth tones are intentional; additional hues fragment the mood.
Don't reduce line-height below 1.5 on body text. The generous spacing is core to readability and the luxury feel.
Don't use box-shadows for depth. The system avoids literal shadows; use color and transparency instead.
Don't mix serif and sans-serif at the same size/weight. Times New Roman is display-only; Arial handles all body and UI text to prevent visual conflict.
Don't center navigation on desktop. The measured layouts show nav links consistently aligned left or hidden; avoid centering disruptions.
Don't over-track captions. The 2.2px–3.3px range is tight but intentional; exceeding 3.3px risks illegibility.

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Content Column	Heading Size	Body Size	Key Behavior
Mobile	375px	308px	36px	16px	Single-column, full-width sections, compact padding
Tablet	768px	630px	44px	16px	Wider breathing room, text begins to expand
Small Desktop	1024px	820px	57px	16px	Generous whitespace, larger headlines
Desktop	1280px	1280px	72px	16px	Full-width optimized, maximum headline impact
Large Desktop	1440px	1440px	81px	16px	Largest display treatment, epic hero sections

Collapse Points:

No navigation menu toggle is measured (0 nav links visible at all breakpoints); suggest this may be a single-page hero or navigation is hidden/vertical.
Section padding-x remains 0px across all breakpoints, indicating full-width container strategy with internal margin/padding on child elements.

Touch Targets

Minimum interactive element height: 44px (measured on 1024px+ viewports; use 48px minimum on mobile for comfortable touch)
Link/button padding: At least {spacing.xxs} (20px) vertical + horizontal for adequate tap zones
Spacing between interactive elements: {spacing.xs} (24px) minimum to prevent accidental activation

Collapsing Strategy

Mobile (375px): Single-column layout; hero imagery scales responsively; typography reduces from 80.64px display to 36px while maintaining serif/sans contrast; section padding collapses to 0px horizontal, forcing content to rely on internal component spacing.
Tablet (768px): Content column expands to 630px; display type grows to 44px; whitespace increases between sections using {spacing.sm} (36px) and {spacing.md} (64px).
Desktop (1024px+): Full-width sections lock to measured column widths; display type scales to 57px–81px; generous {spacing.lg} (80px) and {spacing.xl} (128px) separate major sections, creating epic white space and visual breathing room.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent: Brand ({colors.primary} — #19231F)
Background / Canvas: Decorative Accent ({colors.accent-1} — #111827) or image overlays
Heading Text: Ink ({colors.ink} — #FAF7F1)
Body Text: Body ({colors.body} — #E3E5DE)
Secondary / Captions: Muted ({colors.muted} — #E0C79F)
Borders / Hairlines: Hairline ({colors.hairline} — #E5E7EB)
Neutral Accents: Neutral ({colors.neutral-1} — #D1D6CF)

Iteration Guide

Typography Foundation: Use Times New Roman at 80.64px with -2.02px tracking for hero headlines; pair with Arial body at 15px–18px with 1.8–1.95 line-height for readability and luxury feel.
Color Blocking: Depth comes from surface color shifts and transparency gradients, not shadows; apply the dual-gradient hero overlay (exact CSS provided) to all hero sections for consistent image darkening and text contrast.
Sharp Geometry: All components measure 0px border-radius; maintain sharp corners throughout to preserve the modern, architectural aesthetic.
Spacing Discipline: Use the 6-step spacing scale ({spacing.xxs} through {spacing.xl}) consistently; avoid ad-hoc pixel values to ensure rhythm and predictability.
Full-Width Sections: Sections span viewport width (0px horizontal padding) with content confined via max-width or internal child margins; do not constrain sections to a centered column at the layout level.
Hierarchy via Caps: Uppercase captions (11px–10px, Arial, weight 400, 2.2–3.3px tracking, text-transform: uppercase) signal micro-hierarchy without size jumps; use sparingly for labels and metadata.
Disabled States: Reduce opacity to 0.5 (buttons) or 0.4 (other elements) for unavailable states; avoid color shifts or strikethrough text.

10. Known Gaps

No Semantic Color Ramp: The site does not declare error, success, or warning states in its markup. No red, green, yellow, or alert colors are measured; assume these are either not yet designed or not visible on the public-facing homepage.
Unassigned Color Roles: Two extracted colors ({colors.accent-1} — #111827 and {colors.neutral-1} — #D1D6CF) have no measured role; they are treated as decorative. Their specific purpose on secondary pages or in interactive states is unknown.
Single Page Analyzed: Only the hero landing page ("Sắp ra mặt" / "Coming Soon") was captured; surfaces behind authentication, product pages, booking flows, and account management are not included.
Interaction States: While hover, focus, disabled, and active states were extracted from stylesheets, many of these appear to derive from Tailwind utilities and may not all be visually present on the single measured page. Full interaction coverage across all components is not confirmed.
Button Component Details: Only footer and link components were fully extracted with CSS values. Primary, secondary, and ghost button variants (if present) are not explicitly documented with measured padding, font, and hover states from this page; implementation should follow the color and typography rules and assume icon + label layouts at minimum.
Shadow System: No box-shadows are measured in the extracted design. The system relies entirely on color-blocking and transparency; if shadows are used elsewhere in the product, they are not evident on the homepage.
Grid / Multi-Column Layouts: The measured responsive table shows "n/a" for grid columns across all breakpoints. The homepage is single-column; multi-column grid behavior on other pages is unknown.
Form Components: Input and form field styling is not fully captured beyond focus state border-color. Placeholder text, error borders, and field backgrounds are not measured.

Want a DESIGN.md like this for your own website?

Remixes of loanyhome.vn

Latest remixes

No public remixes yet. Be the first to make one.

Remix it