Cao hung

Generated Oct 21, 2026

DESIGN.md for dezon.vn

dezon.vn/business13 colors6 componentsInter Tight

Remix

12 screenshots captured· dezon.vn

1 / 12 · Dezon Business — Hệ thống thư viện dữ liệu chuyên ngành Kiến trúc, Nội thất và Xây dựng tại Việt Nam · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Dezon
description: |
  Dezon's design system embodies premium minimalism refined for the
  architecture, interior design, and construction industries in Vietnam. The
  visual identity balances stark geometric precision with welcoming openness,
  using a near-black primary palette accented by electric blue for digital
  moments. The system prioritizes clarity and hierarchy through negative space,
  restrained colour application, and typography that commands attention without
  ornament. Photography and project imagery dominate surfaces, with the
  interface stepping back to serve as a sophisticated scaffold. The mood is
  professional yet approachable—formal enough for enterprise stakeholders
  (architects, contractors, suppliers) but accessible to creative practitioners
  (designers, emerging studios). Sharp edges and flush layouts reinforce a
  contemporary, direct aesthetic; typography is generous and breathing. Depth
  emerges through surface colour shifts rather than shadows, and interaction
  rewards are understated—a scale, a glow, a subtle lift.
source:
  url: "https://dezon.vn/business/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-21
  tokensMeasured: true
colors:
  primary: "#0A0A0A"
  accent: "#0D6EFD"
  link: "#094BF4"
  canvas: "#FFFFFF"
  on-primary: "#FFFFFF"
  ink: "#0A0A0A"
  body: "#111111"
  muted: "#333333"
  faint: "#525252"
  hairline: "#E5E5E5"
  accent-1: "#212529"
  accent-2: "#8F96A3"
  neutral-1: "#C2C2C2"
  neutral-2: "#000000"
  neutral-3: "#E9EBEF"
typography:
  display-lg:
    fontFamily: "Inter Tight"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.44px
  display-lg-strong:
    fontFamily: "Inter Tight"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.1px
  display-md:
    fontFamily: "Inter Tight"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.28
    letterSpacing: -0.4px
  heading-lg:
    fontFamily: "Inter Tight"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "Inter Tight"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.32px
  heading-md-strong:
    fontFamily: "Inter Tight"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Inter Tight"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: -0.18px
  heading-sm-strong:
    fontFamily: "Inter Tight"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Inter Tight"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: "Inter Tight"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: "Inter Tight"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "Inter Tight"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md-strong:
    fontFamily: "Inter Tight"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-sm:
    fontFamily: "Inter Tight"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.6
    letterSpacing: 0px
  body-xs:
    fontFamily: "Inter Tight"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.26px
    textTransform: uppercase
  nav:
    fontFamily: "Inter Tight"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-md:
    fontFamily: "Inter Tight"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: "Inter Tight"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  label:
    fontFamily: "Inter Tight"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs:
    fontFamily: "Inter Tight"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption-xs-strong:
    fontFamily: "Inter Tight"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  caption-xs-2:
    fontFamily: "Inter Tight"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0px
  caption-xs-tight:
    fontFamily: "Inter Tight"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 8px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 48px
  band: 60px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F7F7F7"
    surfaceRaised: "#EEEEEE"
    text: "#0A0A0A"
    textMuted: "#111111"
    border: "#E5E5E5"
    accent: "#0D6EFD"
    accentFg: "#000000"
    focusRing: "#0D6EFD"
    elevation: shadow
  dark:
    bg: "#090E16"
    surface: "#181C24"
    surfaceRaised: "#242930"
    text: "#F5F9FF"
    textMuted: "#9BA0A6"
    border: "#30353B"
    accent: "#217AFD"
    accentFg: "#0B0B0C"
    focusRing: "#0D6EFD"
    elevation: "border+surface"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%)"
components:
  button-filled:
    typography: "{typography.body-sm}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.link}"
    height: 46.3906px
    padding: "11px 22px 11px 22px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.link}"
  button-primary:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary}"
    height: 31px
    padding: "4px 12px 4px 12px"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.5
    rounded: 6px
    backgroundColor: "{colors.primary}"
  button-primary-lg:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary}"
    height: 37px
    padding: "7px 16px 7px 16px"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.5
    rounded: 50px
    backgroundColor: "{colors.primary}"
  button-filled-sm:
    textColor: "{colors.on-primary}"
    height: 33px
    padding: "6px 16px 6px 16px"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.5
    backgroundColor: "{colors.link}"
  button-outline:
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 31px
    padding: "4px 12px 4px 12px"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.5
    rounded: 6px
  button-outline-lg:
    typography: "{typography.body-lg-strong}"
    textColor: "{colors.accent-1}"
    border: "1px solid {colors.primary}"
    height: 43px
    padding: "7px 16px 7px 16px"
    rounded: "{rounded.xs}"
  card:
    textColor: "{colors.ink}"
    fontSize: 16px
    fontFamily: "Inter Tight"
    fontWeight: 400
    lineHeight: 1.6
  card-sm:
    textColor: "{colors.body}"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 400
    lineHeight: 1.5
  badge-outline:
    typography: "{typography.caption-xs-2}"
    textColor: "{colors.ink}"
    border: "1px solid rgb(199, 199, 199)"
    height: 29.1875px
    padding: "4px 12px 4px 12px"
    rounded: "{rounded.xs}"
  badge-outline-2:
    typography: "{typography.caption-xs-2}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.canvas}"
    height: 29.1875px
    padding: "4px 12px 4px 12px"
    rounded: "{rounded.xs}"
  badge-filled:
    textColor: "rgb(91, 63, 176)"
    height: 23.1875px
    padding: "2px 10px 2px 10px"
    fontSize: 12px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.6
    rounded: 999px
    backgroundColor: "rgb(239, 234, 252)"
  badge-filled-2:
    textColor: "rgb(22, 87, 168)"
    height: 23.1875px
    padding: "2px 10px 2px 10px"
    fontSize: 12px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.6
    rounded: 999px
    backgroundColor: "rgb(231, 240, 251)"
  navigation:
    typography: "{typography.nav}"
    textColor: "rgb(185, 189, 198)"
    height: 20.7969px
  navigation-lg:
    textColor: "{colors.ink}"
    height: 37px
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 500
    lineHeight: 1.5
  footer:
    textColor: "{colors.on-primary}"
    padding: "56px 0px 20px 0px"
    fontSize: 16px
    fontFamily: "Inter Tight"
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "{colors.primary}"
  footer-lg:
    textColor: "{colors.on-primary}"
    fontSize: 14px
    fontFamily: "Inter Tight"
    fontWeight: 400
    lineHeight: 1.5
    backgroundColor: "{colors.primary}"
  link:
    typography: "{typography.nav}"
    textColor: "rgb(185, 189, 198)"
  link-2:
    textColor: "{colors.on-primary}"
    fontSize: 13px
    fontFamily: "Inter Tight"
    fontWeight: 600
    lineHeight: 1.6
states:
  link-hover:
    target: link
    state: hover
    textColor: "{colors.on-primary}"
  button-hover:
    target: button
    state: hover
    filter: "brightness(1.08)"
  other-hover:
    target: other
    state: hover
    textDecoration: underline
  input-focus:
    target: input
    state: focus
    borderColor: "{colors.neutral-2}"
    backgroundColor: "{colors.canvas}"
  other-disabled:
    target: other
    state: disabled
    textColor: "rgb(204, 204, 204)"
  input-disabled:
    target: input
    state: disabled
    opacity: 1
  other-focus:
    target: other
    state: focus
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
    borderColor: "rgb(134, 183, 254)"
  input-active:
    target: input
    state: active
    filter: "brightness(90%)"
  button-disabled:
    target: button
    state: disabled
    filter: none
    opacity: 0.65
  other-active:
    target: other
    state: active
    backgroundColor: "rgb(182, 212, 254)"
  nav-focus-visible:
    target: nav
    state: focus-visible
    boxShadow: "rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem"
breakpoints:
  - width: 375
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1920
    gridColumns: 4
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 35
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1920
    gridColumns: 4
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 40
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1920
    gridColumns: 4
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 40
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 65
  gradientsFound: 1
  rolesUnassigned: 5
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by Dezon

1. Visual Theme & Atmosphere

Dezon's design system embodies premium minimalism refined for the architecture, interior design, and construction industries in Vietnam. The visual identity balances stark geometric precision with welcoming openness, using a near-black primary palette accented by electric blue for digital moments. The system prioritizes clarity and hierarchy through negative space, restrained colour application, and typography that commands attention without ornament. Photography and project imagery dominate surfaces, with the interface stepping back to serve as a sophisticated scaffold. The mood is professional yet approachable—formal enough for enterprise stakeholders (architects, contractors, suppliers) but accessible to creative practitioners (designers, emerging studios). Sharp edges and flush layouts reinforce a contemporary, direct aesthetic; typography is generous and breathing. Depth emerges through surface colour shifts rather than shadows, and interaction rewards are understated—a scale, a glow, a subtle lift.

Key Characteristics

Achromatic primary palette with electric blue accent (#0D6EFD)
Generous whitespace and breathing typography
Sharp edges (0px radius) on cards; pill-shaped buttons and badges ({rounded.full})
No drop shadows; depth via surface colour and opacity layering
Strong hierarchy through weight, scale, and restraint
Photography-forward layout with interface as facilitator
Touch-friendly interaction targets and gentle hover states
Multi-segment navigation for audience segmentation (Studios, Suppliers, Creators, Contractors)

2. Color Palette & Roles

Primary

Primary / Brand Ink ({colors.primary} — #0A0A0A): Headings, body copy, brand mark, primary CTAs, and active states. The dominant text and interactive colour across the system.
Brand Accent ({colors.accent} — #0D6EFD): Electric blue used for secondary CTAs, interactive highlights, focus states, and accent moments that signal digital affordance.

Link

Link ({colors.link} — #094BF4): Inline hyperlinks and navigation links; deeper blue than the general accent, reserved for semantic link purpose.

Neutral Scale

Canvas / On Primary ({colors.canvas} — #FFFFFF): Default page background and label text on dark/brand surfaces.
Body ({colors.body} — #111111): Primary body copy and standard text.
Muted ({colors.muted} — #333333): Secondary text, captions, and reduced-emphasis labels.
Faint ({colors.faint} — #525252): Tertiary text and placeholder copy.
Hairline ({colors.hairline} — #E5E5E5): 1px borders, dividers, and subtle surface delineation.

Decorative (Unassigned Roles)

Accent Decorative 1 ({colors.accent-1} — #212529): No measured role; used decoratively in the markup.
Accent Decorative 2 ({colors.accent-2} — #8F96A3): No measured role; used decoratively in the markup.
Neutral Decorative 1 ({colors.neutral-1} — #C2C2C2): No measured role; neutral placeholder.
Neutral Decorative 2 ({colors.neutral-2} — #000000): No measured role; pure black for decorative or overlay intent.
Neutral Decorative 3 ({colors.neutral-3} — #E9EBEF): No measured role; light neutral for backgrounds or surfaces.

3. Typography Rules

Font Family

Primary: Inter Tight (https://fonts.googleapis.com/)
Fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Inter Tight is a condensed sans-serif optimized for tight spacing and modern digital interfaces. Its geometric construction suits the architecture and design verticales.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XL	Inter Tight	44px	600	1.05	−1.1px	Bold hero statement; section opener
Display Large	Inter Tight	44px	500	1.2	−0.44px	Large display with negative tracking
Display Medium	Inter Tight	40px	500	1.28	−0.4px	Prominent section heading
Heading Large	Inter Tight	36px	600	1.2	0px	Primary section title
Heading Medium Strong	Inter Tight	32px	600	1.2	0px	Subsection title; card heading
Heading Medium	Inter Tight	32px	500	1.3	−0.32px	Section heading with reduced weight
Heading Small Strong	Inter Tight	18px	600	1.2	0px	Small section opener
Heading Small	Inter Tight	18px	500	1.6	−0.18px	Subheading with breathing room
Heading XS	Inter Tight	14px	500	1.2	0px	Mini heading; card title
Body Large Strong	Inter Tight	18px	500	1.5	0px	Emphasized body; CTA text
Body Large	Inter Tight	18px	400	1.5	0px	Large body copy; hero text
Body Medium Strong	Inter Tight	16px	500	1.4	0px	Emphasized inline text
Body Medium	Inter Tight	16px	400	1.5	0px	Standard body copy
Body Small	Inter Tight	14px	500	1.6	−0.13px	Secondary text; labels
Body XS	Inter Tight	13px	600	1.5	0.26px	Uppercase label; badge text
Caption XS	Inter Tight	12px	400	1.6	0px	Small caption; footnote
Caption XS Strong	Inter Tight	12px	500	1.5	0px	Emphasized caption
Caption XS Tight	Inter Tight	12px	700	1	0px	Dense, bold micro text
Caption XS–2	Inter Tight	12px	600	1.6	0px	Bold caption variant
Button Medium	Inter Tight	16px	500	1.5	0px	Standard button label
Button Small	Inter Tight	12px	400	1.3	0px	Small button label
Nav	Inter Tight	13px	400	1.6	0px	Navigation link text
Label	Inter Tight	15px	400	1.5	0px	Form label text

Principles

Negative Tracking on Display: Display sizes (display-lg, display-md) employ negative letter-spacing (−0.4px to −0.44px to −1.1px) to create visual tension and draw the eye; never flatten these values to 0.
Breathing Body: Body text (body-md, body-lg) use 1.5 line-height and 0px letter-spacing for comfort and legibility; captions reduce line-height to 1.6 for compact density.
Weight Hierarchy: Primary emphasis via 600-weight or 500-weight variants; 400-weight is default body. 700-weight is reserved for dense micro-text (captions).
Uppercase Micro: The body-xs role is uppercase + 0.26px letter-spacing, signalling labels and tags.
Navigation Consistency: Nav and label roles use 13–15px with 400-weight to remain secondary to body and heading hierarchy.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#0A0A0A)
Text: {colors.canvas} (#FFFFFF)
Padding: 4px 12px
Height: 31px
Font: {typography.button-md} (16px, 500, 1.5)
Border: 1px solid {colors.primary}
Border Radius: {rounded.xs} (8px)
Hover: filter: brightness(1.08), transform: translateY(-2px), background lightens to #E4E6EB

Primary Button Large

Background: {colors.primary} (#0A0A0A)
Text: {colors.canvas} (#FFFFFF)
Padding: 7px 16px
Height: 37px
Font: {typography.button-md} (16px, 500, 1.5)
Border: 1px solid {colors.primary}
Border Radius: {rounded.full} (9999px) — pill-shaped
Hover: Scale 1.05, translateY(-1px)

Filled Button (Secondary CTA)

Background: {colors.accent} (#0D6EFD)
Text: {colors.canvas} (#FFFFFF)
Padding: 11px 22px
Height: 46px
Font: {typography.button-md} (16px, 500, 1.5)
Border: 1px solid {colors.accent}
Border Radius: {rounded.xs} (8px)
Hover: brightness(1.08), translateY(-1px)

Filled Button Small

Background: {colors.accent} (#0D6EFD)
Text: {colors.canvas} (#FFFFFF)
Padding: 6px 16px
Height: 33px
Font: {typography.button-md} (16px, 500, 1.5)
Border: 0px
Border Radius: {rounded.none} (0px) — sharp
Hover: brightness(1.08)

Outline Button

Background: transparent
Text: {colors.primary} (#0A0A0A)
Padding: 4px 12px
Height: 31px
Font: {typography.button-md} (16px, 500, 1.5)
Border: 1px solid {colors.hairline} (#E5E5E5)
Border Radius: {rounded.xs} (8px)
Hover: Background shifts to #E4E6EB

Outline Button Large

Background: transparent
Text: {colors.muted} (#333333)
Padding: 7px 16px
Height: 43px
Font: {typography.body-lg-strong} (18px, 500, 1.5)
Border: 1px solid {colors.primary}
Border Radius: {rounded.xs} (8px)
Hover: Background shifts to #E4E6EB

Button Disabled State

Opacity: 0.65
All hover effects suppressed

Cards & Containers

Card Default

Background: transparent
Text: {colors.primary} (#0A0A0A)
Padding: 0px
Border: 0px
Border Radius: {rounded.none} (0px) — sharp edge
Font: {typography.body-md} (16px, 400, 1.5)
Box Shadow: none
Hover: transform: scale(1.05) (for image-based cards)

Card Default Small

Background: transparent
Text: {colors.body} (#111111)
Padding: 0px
Border: 0px
Border Radius: {rounded.none} (0px) — sharp edge
Font: {typography.body-sm} (14px, 500, 1.6)
Box Shadow: none
Hover: transform: scale(1.02)

Badges

Badge Outline

Background: transparent
Text: {colors.primary} (#0A0A0A)
Padding: 4px 12px
Height: 29px
Font: {typography.caption-xs-2} (12px, 600, 1.6)
Border: 1px solid {colors.neutral-1} (#C2C2C2)
Border Radius: {rounded.xs} (8px)

Badge Outline (Light)

Background: transparent
Text: {colors.canvas} (#FFFFFF)
Padding: 4px 12px
Height: 29px
Font: {typography.caption-xs-2} (12px, 600, 1.6)
Border: 1px solid {colors.canvas}
Border Radius: {rounded.xs} (8px)

Badge Filled (Purple)

Background: #EFEBFC
Text: #5B3FB0
Padding: 2px 10px
Height: 23px
Font: {typography.caption-xs-strong} (12px, 500, 1.5)
Border: 0px
Border Radius: {rounded.full} (9999px) — pill-shaped

Badge Filled (Blue)

Background: #E7F0FB
Text: #1657A8
Padding: 2px 10px
Height: 23px
Font: {typography.caption-xs-strong} (12px, 500, 1.5)
Border: 0px
Border Radius: {rounded.full} (9999px) — pill-shaped

Navigation

Navigation Default (Small/Muted)

Text: #B9BDBEC (muted blue-grey)
Font: {typography.nav} (13px, 400, 1.6)
Background: transparent
Padding: 0px
Border: 0px
Hover: color: var(--bs-nav-link-hover-color) (typically white or primary accent)
Focus: outline: 0px, box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem

Navigation Default Large

Text: {colors.primary} (#0A0A0A)
Font: {typography.body-sm} (14px, 500, 1.6)
Background: transparent
Padding: 0px
Border: 0px
Hover: Text colour changes to accent or lighter variant

Inputs & Forms

Input Base

Background: {colors.canvas} (#FFFFFF)
Text: {colors.body} (#111111)
Font: {typography.body-md} (16px, 400, 1.5)
Padding: varies by size
Border: 1px solid {colors.hairline} (#E5E5E5)
Border Radius: {rounded.xs} (8px)
Focus: border-color: #0A0A0A, box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem, outline: 0px
Disabled: opacity: 0.5, background: var(--bs-secondary-bg)
Placeholder: {colors.faint} (#525252)

Input Label

Font: {typography.label} (15px, 400, 1.5)
Color: {colors.body} (#111111)

Footer

Footer Default

Background: {colors.primary} (#0A0A0A)
Text: {colors.canvas} (#FFFFFF)
Padding: 56px 0px 20px 0px
Font: {typography.body-md} (16px, 400, 1.5)
Border: 0px
Border Radius: 0px
Width: full (1440px max-width context)

Footer Large

Background: {colors.primary} (#0A0A0A)
Text: {colors.canvas} (#FFFFFF)
Padding: 0px
Font: {typography.body-sm} (14px, 400, 1.6)
Border: 0px
Border Radius: 0px

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px

Full scale:

XXS: {spacing.xxs} = 4px — micro spacing between adjacent elements
XS: {spacing.xs} = 8px — padding inside small components, tight gutters
SM: {spacing.sm} = 12px — internal spacing for inputs, buttons
MD: {spacing.md} = 16px — standard padding for cards, sections
LG: {spacing.lg} = 20px — breathing room between components
XL: {spacing.xl} = 24px — larger section spacing
XXL: {spacing.xxl} = 28px — major separation
XXXL: {spacing.xxxl} = 32px — substantial gaps
Section: {spacing.section} = 48px — between major sections
Band: {spacing.band} = 60px — hero sections, full-width breaks

Grid & Container

Max Width: 1920px (observed across all breakpoints; content does not constrain)
Column Strategy: Flexible multi-column grid (4 columns at large viewports, collapsing to 1 at 375px)
Horizontal Padding: 0px at all breakpoints (full-bleed to viewport edges)
Gutter: Spacing managed via {spacing.md} and {spacing.lg} between card columns
Hero Section: Full width, centred text, large heading + body copy + CTA (see screenshots)

Whitespace Philosophy

Negative space is active design. The system embraces breathing room around typography and imagery. Sections are separated by {spacing.section} (48px) or {spacing.band} (60px) gaps; interior component padding uses {spacing.md} (16px) as default. Photography fills surfaces; the UI recedes. Text is generously spaced vertically (line-height 1.5–1.6), and horizontal gutters are balanced to avoid cramping. This breathing enables focus on content—projects, creators, services—while the interface remains transparent.

Border Radius Scale

None: {rounded.none} = 0px — cards, small buttons, sharp modern aesthetic
Small: {rounded.xs} = 8px — inputs, badge outlines, form elements
Full/Pill: {rounded.full} = 9999px — badges (filled), large primary buttons

Note: Button and badge styling alternates between sharp (0px) and pill (9999px) by variant; cards are uniformly sharp (0px).

Border Widths

Thin: 1px — button borders, input borders, badge outlines, divider lines

6. Depth & Elevation

Shadow Strategy

Color-blocking depth model: The system achieves depth and layering through surface colour shifts, opacity overlays, and spatial arrangement rather than drop shadows. No box-shadow values are measured in the component styles, confirming that elevation is expressed via:

Background Colour Change: Footer, dark sections, and brand surfaces use {colors.primary} (#0A0A0A) to create visual separation from white canvas.
Opacity Overlay: Gradient overlay on hero imagery: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%) — creates depth and readability over photography.
Scale Transform: Cards and interactive elements scale on hover (scale(1.05), scale(1.02)) to suggest lift.
Translation: Buttons translate on hover (translateY(-1px), translateY(-2px)) to imply floating above the surface.

This approach eliminates shadow complexity, maintaining the minimalist aesthetic while still signalling hierarchy.

Opacity Levels

55% (0.55): Light overlay in gradient (hero sections, image overlays)
80% (0.80): Medium transparency (secondary UI elements, uncertain use)
85% (0.85): Dark overlay in gradient (hero sections, strong contrast over imagery)

Z-index / Layering

Base: z-index 1, 2, 3, 6 — standard document flow, overlapping components
Dropdown: z-index 10, 15, 20 — navigation dropdowns, popovers above base content
Sticky: z-index 100 — sticky navigation, persistent headers

7. Do's and Don'ts

Do

Use negative letter-spacing on display type: Display sizes (display-lg, display-md, display-lg-strong) require −0.4px, −0.44px, or −1.1px tracking to maintain the system's contemporary tension; never flatten to 0px.
Apply the colour ramp consistently: {colors.primary} for headings and primary CTAs, {colors.accent} for secondary/highlight moments, neutrals for text hierarchy.
Breathe typography vertically: Body copy (16px, 18px) uses 1.5 line-height; maintain 1.6 for captions and 1.2 for headings to create rhythm.
Layer opacity for dark overlays: Use rgba(0, 0, 0, 0.85) and rgba(0, 0, 0, 0.55) in gradients to achieve readable text over photography.
Scale and translate on hover: Cards scale 1.02–1.05; buttons translateY by −1px to −2px; this subtle animation signals interactivity without overstatement.
Keep cards sharp (0px radius): Default card border-radius is 0px; pill-shaped elements (badges, large buttons) use {rounded.full}.
Maintain 1px borders: All button, badge, and input borders use thin (1px) stroke weight.
Segment navigation by audience: Offer "for Studios," "for Suppliers," "for Creators," "for Contractors" top-level links to enable user self-selection.

Don't

Add drop shadows: The system expresses depth through colour, opacity, and scale, never shadows. Remove any box-shadow declarations.
Introduce new accent colours: Stick to {colors.accent} (#0D6EFD); do not invent intermediate blues or secondary accents.
Round sharp edges on cards: Cards use {rounded.none} (0px); do not default to 8px or 12px radius.
Use decorative colours arbitrarily: The five decorative/unassigned colours should be reserved or removed; they have no measured semantic role in the system.
Compress typography line-height: Do not set body copy below 1.5 or captions below 1.6; breathing room is essential to legibility and the brand mood.
Omit letter-spacing on display text: Negative tracking (−0.4px and below) is a defining visual trait of display hierarchy; do not remove it.
Add shadow to focus states: Focus rings use box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem (soft blue halo); do not layer dark or hard shadows.
Flatten interactive states: Hover and focus must include scale, translate, or colour shifts; never remove animation in pursuit of minimalism.
Use {colors.canvas} as body text: {colors.canvas} (#FFFFFF) is reserved for text on dark/brand surfaces; use {colors.body} (#111111) or {colors.muted} for default text.

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Grid Columns	Max Content Width	Heading Size	Body Size	Nav Links Visible	Menu Toggle	Key Changes
Mobile	375px	1	1920px	28px	16px	0	yes	Full-bleed layout; hamburger menu; single column
Tablet	768px	n/a	1920px	28px	16px	6	no	Navigation expands; category tabs appear; grid begins
Large Tablet	1024px	4	1920px	35px	16px	6	no	Heading sizes scale; 4-column grid active; full sidebar nav
Desktop	1280px	4	1920px	40px	16px	6	no	Optimal layout; all features visible
Large Desktop	1440px	4	1920px	40px	16px	6	no	Headings stabilise at 40px; no further scaling

Touch Targets

Minimum Interactive Size: 44px height (buttons, links, nav items) for reliable touch; measured primary buttons are 31–46px.
Padding Around Controls: {spacing.md} (16px) minimum surrounding clickable areas to prevent accidental activation.
Link Hit Area: Nav links and text links are smaller (13–16px font) but bundled within larger padding zones in navigation bars.

Collapsing Strategy

375px (Mobile):
- Single-column layout (no grid)
- Hamburger menu (toggle) replaces horizontal nav
- Hero headings reduce to 28px
- Full-width sections with 0px horizontal padding
- Category tabs collapse to horizontal scroll or dropdown
768px (Tablet):
- Navigation expands to 6 visible links
- Hamburger menu disappears
- Grid begins (likely 2–3 columns)
- Headings still 28px; scaling begins at 1024px
1024px+ (Desktop):
- 4-column grid active
- Heading sizes expand (35px → 40px)
- Full horizontal navigation
- All UI elements visible at once

Adaptive Typography:

375px: heading-lg = 28px (body uses same 16px)
1024px: heading-lg = 35px
1280px–1440px: heading-lg = 40px (stabilises)

Padding & Margin:

Horizontal section padding remains 0px at all breakpoints (full-bleed design)
Vertical spacing ({spacing.section} = 48px, {spacing.band} = 60px) consistent across all sizes
Internal component padding ({spacing.md} = 16px) consistent

9. Agent Prompt Guide

Quick Color Reference

Implement interactive UI elements, text, and surfaces using these colour assignments:

Primary CTA & Headings: {colors.primary} (#0A0A0A) — all primary buttons, h1–h6, bold accents
Secondary CTA & Highlights: {colors.accent} (#0D6EFD) — filled secondary buttons, accent moments, focus indicators
Inline Links: {colors.link} (#094BF4) — hyperlink text
Body Copy: {colors.body} (#111111) — standard paragraph text
Secondary Text: {colors.muted} (#333333) — captions, helper text
Tertiary / Placeholder: {colors.faint} (#525252) — placeholder input text, very reduced emphasis
Borders & Hairlines: {colors.hairline} (#E5E5E5) — 1px dividers, input borders, badge outlines
Page Background: {colors.canvas} (#FFFFFF) — default page surface
Dark Surfaces: {colors.primary} (#0A0A0A) — footer, dark hero overlays, brand-accent sections

Iteration Guide

Never Add Shadows: Depth is expressed via rgba(0, 0, 0, 0.85) overlays, colour shifts, and scale transforms. Remove all box-shadow; no drop shadows exist in the measured system.
Scale & Translate on Interaction: Buttons scale to 1.08 brightness or translateY(−2px) on hover; cards scale 1.02–1.05. Animate these properties; never leave hover states flat.
Preserve Letter-Spacing on Display Type: Display headings (display-lg, display-md) require −0.4px to −1.1px letter-spacing. These negative values are intentional; do not round to 0px.
Apply Pill Shape Selectively: Large buttons and filled badges use border-radius: 9999px. Default cards and inputs use border-radius: 0px or 8px. Never make everything rounded.
Use 1.5 Line-Height for Body: Body text (16–18px) must use line-height: 1.5 to maintain the breathing aesthetic. Captions use 1.6; headings use 1.2.
Layer Focus States with Blue Halo: On input focus, apply box-shadow: rgba(13, 110, 253, 0.25) 0px 0px 0px 0.25rem + border-color: #0A0A0A. Never use sharp outlines.
Respect the Neutral Ramp: Use the measured greys (#111111 body, #333333 muted, #525252 faint) in order; do not invent intermediate shades.
Segment Navigation: Include audience-specific nav links ("for Studios," "for Suppliers," etc.) at the top level to enable user segmentation and self-serve routing.
Full-Bleed Horizontal Layout: Section padding-x = 0px at all breakpoints. Cards and content sit flush to the viewport edges or are constrained by a container within the section, not the section itself.
Grid at 4 Columns: At large viewports (1024px+), use a 4-column grid for project cards and listings. Below 768px, collapse to single column with horizontal scroll tabs for categories.

10. Known Gaps

Interaction States Not Fully Measured: The extraction captured many CSS pseudo-classes (:hover, :focus, :disabled, :active), but not all components' full state trees. Surfaces behind authentication or conditional logic were not inspected.
No Semantic Status Ramp: The site does not expose error, success, warning, or info colour states in its public markup. A semantic status ramp (red/green/yellow/blue) does not exist in this system; status should be communicated via context, labels, and state-specific components if added.
Five Unassigned Decorative Colours: Colours {colors.accent-1} (#212529), {colors.accent-2} (#8F96A3), {colors.neutral-1} (#C2C2C2), {colors.neutral-2} (#000000), and {colors.neutral-3} (#E9EBEF) were extracted but have no measured role in the UI. They may be placeholder tokens, unused legacy values, or decorative markup. Do not assume semantic purpose; confirm use before applying.
Shadow / Elevation Data: The extraction found no box-shadow values on measured components, confirming the system uses colour and scale for depth, not shadows. If shadow depth is needed in future extensions, it was not specified in the original design.
Dark Mode / Theme Variants: Only one theme (light) was analysed. No dark-mode styles or theme-switching logic was observed or measured; the system is presented as achromatic with a single light canvas.
Interaction Animation Timing & Curves: Hover and focus states include transform, scale, and filter properties, but easing functions (ease-in-out, cubic-bezier, etc.) were not captured. Default browser easing may apply; specify transition timing explicitly if smoothness matters.
Micro-Interaction Feedback: Some very small UI moments (toast notifications, loading states, inline validation) were not present on the inspected pages, so their styling is not documented.
Cross-Origin Stylesheets: Some external stylesheets (e.g., from CDNs or design libraries) may not have been readable during extraction, so minor CSS declarations or component behaviours could be missing.
Responsive Images & Lazy Loading: Image sizing strategies and lazy-load directives were not analysed; focus was on layout, typography, and colour only.
Accessibility Attributes (aria-*, role): The system's semantic HTML and screen-reader support were not formally audited. Focus states and keyboard navigation assume standard browser defaults.

Summary for Implementation:

This design system prioritizes minimalism, audience segmentation, and photography-forward layouts. Implement with sharp edges on cards (0px), pill-shaped badges and large buttons (9999px), and electric blue accents (#0D6EFD) for secondary interactivity. Typography is breathing and precise; negative tracking on display sizes is non-negotiable. Depth emerges from colour shifts and scaled transforms, never shadows. Navigation offers segment-specific routes (Studios, Suppliers, Creators, Contractors). The full-bleed, single-column mobile layout expands to a 4-column grid at 1024px+. Test extensively across the captured breakpoints (375px, 768px, 1024px, 1280px, 1440px) to ensure responsive imagery and text scaling behave as measured.

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

Design tokens

Extracted from dezon.vn/business

Primary

#0A0A0A

Primary CTA, brand accent, active state; Headings / primary text

#0D6EFD

Brand hue used alongside the achromatic primary

#094BF4

Inline link colour

#212529

Accent / decorative

#8F96A3

Accent / decorative

Neutral

#FFFFFF

Default page background; label colour on brand surfaces

#111111

Body copy

#333333

Captions, secondary text

#525252

Tertiary / placeholder text

#E5E5E5

1px borders and dividers

#C2C2C2

Neutral

#000000

Neutral

#E9EBEF

Neutral

Typography · Inter TightGoogle Fonts

body18px · 400 · 27px

body18px · 500 · 27px

body16px · 500 · 22.4px

body14px · 500 · 22.4px

body13px · 600 · 19.5px

button16px · 500 · 24px

body16px · 400 · 24px

body14px · 400 · 22.4px

caption12px · 600 · 19.2px

body14px · 600 · 22.4px

h136px · 600 · 43.2px

h414px · 500 · 16.8px

link14px · 400 · 21px

input16px · 400 · 24px

caption12px · 400 · 19.2px

button14px · 400 · 21px

body18px · 600 · 27px

body16px · 600 · 19.2px

body14px · 700 · 21px

heading32px · 600 · 38.4px

caption12px · 700 · 12px

h332px · 600 · 38.4px

h518px · 600 · 21.6px

body18px · 700 · 27px

caption12px · 500 · 18px

h140px · 500 · 51.2px

h232px · 500 · 41.6px

h318px · 500 · 28.8px

h415px · 500 · 24px

list-item16px · 400 · 25.6px

nav-link13px · 400 · 20.8px

body24px · 600 · 36px

heading17px · 500 · 27.2px

heading13px · 500 · 20.8px

body14px · 500 · 22.4px

body13px · 600 · 20.8px

h244px · 600 · 46.2px

h336px · 600 · 43.2px

h422px · 500 · 26.4px

link14px · 500 · 21px

input15px · 400 · 22.5px

body16px · 600 · 21.6px

body13px · 400 · 19.5px

button12px · 400 · 15.6px

heading12px · 600 · 16.2px

h428px · 500 · 35px

body12px · 400 · 18px

body22px · 500 · 26.4px

heading14px · 500 · 16.8px

body16px · 700 · 24px

h144px · 500 · 52.8px

link16px · 400 · 24px

body13px · 500 · 20.8px

h228px · 600 · 36.4px

heading19px · 600 · 22.8px

Spacing

12px

8px

4px

32px

16px

24px

20px

28px

Components · 6

Remixes of dezon.vn

Latest remixes

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

Remix it