Cao hung

Generated Oct 24, 2026

DESIGN.md for www.hobien.com.vn

www.hobien.com.vn/partner8 colors5 componentsNoto Sans

Remix

2 screenshots captured· www.hobien.com.vn

1 / 2 · Hobien · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Hobien
description: |
  Hobien embodies a contemporary, professional aesthetic grounded in dark
  minimalism and strategic color accents. The design system prioritizes clean
  typography, generous whitespace, and purposeful use of a vibrant brand red to
  guide user action. The overall mood is sophisticated and trustworthy—suited to
  a B2B service platform targeting enterprise clients and partners. Deep
  charcoal canvas surfaces (#1B1B1B) anchor layouts, while light neutrals
  (#F5F5F5) provide breathing room for content. The visual language is
  intentionally restrained, allowing messaging and imagery to command focus
  without decorative distraction.
source:
  url: "https://www.hobien.com.vn/partner"
  pagesAnalyzed: 1
  extractedAt: 2026-10-24
  tokensMeasured: true
colors:
  primary: "#FFFFFF"
  canvas: "#1B1B1B"
  surface: "#F5F5F5"
  on-primary: "#1B1B1B"
  ink: "#FFFFFF"
  body: "#F5F5F5"
  muted: "#8E8E8E"
  hairline: "#D1D1D1"
  accent-1: "#ED1846"
  neutral-1: "#2A2A2A"
  neutral-2: "#AEAEAE"
typography:
  display-lg:
    fontFamily: "Noto Sans"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  display-lg-tight:
    fontFamily: "Noto Sans"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: 0px
  display-md:
    fontFamily: "Noto Sans"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
  display-md-tight:
    fontFamily: "Noto Sans"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "Noto Sans"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
  heading-md-tight:
    fontFamily: "Noto Sans"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md-strong:
    fontFamily: "Noto Sans"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.28
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Noto Sans"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: "Noto Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-lg-tight:
    fontFamily: "Noto Sans"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: "Noto Sans"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  body-lg-2:
    fontFamily: "Noto Sans"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
  body-lg-3:
    fontFamily: "Noto Sans"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
  body-md:
    fontFamily: "Noto Sans"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  nav:
    fontFamily: "Noto Sans"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  button:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Noto Sans"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
  sm: 8px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px
borderWidths:
  thin: 1px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#1D1D1D"
    textMuted: "#707070"
    border: "#D8D8D8"
    accent: "#707070"
    accentFg: "#FFFFFF"
    focusRing: "#8F8F8F"
    elevation: shadow
  dark:
    bg: "#1B1B1B"
    surface: "#F5F5F5"
    surfaceRaised: "#F6F6F6"
    text: "#FFFFFF"
    textMuted: "#F5F5F5"
    border: "#D1D1D1"
    accent: "#FFFFFF"
    accentFg: "#0B0B0C"
    focusRing: "#FFFFFF"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on surface = 1.09:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(rgb(27, 27, 27) 0%, rgba(0, 0, 0, 0) 35.65%)"
  - context: section
    kind: linear
    value: "linear-gradient(in oklab, rgb(20, 21, 28) 0%, rgb(37, 40, 54) 100%)"
components:
  button-filled:
    typography: "{typography.body-lg-3}"
    textColor: "{colors.ink}"
    height: 57.1875px
    padding: "16px 32px 16px 32px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.accent-1}"
  button-filled-sm:
    typography: "{typography.body-lg-3}"
    textColor: "{colors.ink}"
    height: 49.1875px
    padding: "12px 32px 12px 32px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.accent-1}"
  button-text:
    typography: "{typography.button}"
    textColor: "lab(7.78673 1.82345 -15.0537)"
    height: 36px
    padding: "8px 12px 8px 12px"
    rounded: "{rounded.sm}"
  button-icon:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.hairline}"
    height: 48px
    fontSize: 16px
    fontFamily: "Noto Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "3.35544e+07px"
  button-icon-2:
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.hairline}"
    height: 48px
    fontSize: 16px
    fontFamily: "Noto Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "3.35544e+07px"
    backgroundColor: "{colors.primary}"
  card-featured:
    textColor: "{colors.on-primary}"
    fontSize: 16px
    fontFamily: "Noto Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  card:
    textColor: "{colors.on-primary}"
    padding: "40px 32px 40px 32px"
    fontSize: 16px
    fontFamily: "Noto Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xs}"
    backgroundColor: "rgb(22, 22, 22)"
  card-sm:
    textColor: "{colors.on-primary}"
    fontSize: 16px
    fontFamily: "Noto Sans"
    fontWeight: 400
    lineHeight: 1.5
    rounded: "{rounded.xs}"
  navigation:
    typography: "{typography.button}"
    textColor: "lab(7.78673 1.82345 -15.0537)"
    height: 48px
  footer:
    typography: "{typography.button}"
    textColor: "lab(7.78673 1.82345 -15.0537)"
    padding: "64px 70px 64px 70px"
    backgroundColor: "{colors.surface}"
  link:
    typography: "{typography.button}"
    textColor: "lab(7.78673 1.82345 -15.0537)"
    padding: "12px 0px 12px 0px"
    rounded: "{rounded.xs}"
  link-sm:
    typography: "{typography.nav}"
    textColor: "{colors.neutral-2}"
states:
  other-hover:
    target: other
    state: hover
    opacity: 0.9
  other-active:
    target: other
    state: active
    opacity: 0.8
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
breakpoints:
  - width: 375
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 1920
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1920
    gridColumns: 2
    navLinksVisible: 0
    menuToggleVisible: true
    headingPx: 28
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1920
    gridColumns: 3
    navLinksVisible: 2
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 70
  - width: 1440
    containerWidth: 1920
    gridColumns: 3
    navLinksVisible: 2
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 70
coverage:
  statesFound: 7
  gradientsFound: 2
  rolesUnassigned: 3
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Hobien

1. Visual Theme & Atmosphere

Hobien embodies a contemporary, professional aesthetic grounded in dark minimalism and strategic color accents. The design system prioritizes clean typography, generous whitespace, and purposeful use of a vibrant brand red to guide user action. The overall mood is sophisticated and trustworthy—suited to a B2B service platform targeting enterprise clients and partners. Deep charcoal canvas surfaces ({colors.canvas} — #1B1B1B) anchor layouts, while light neutrals ({colors.surface} — #F5F5F5) provide breathing room for content. The visual language is intentionally restrained, allowing messaging and imagery to command focus without decorative distraction.

Key Characteristics

Dark-first canvas with light surface accents for high contrast readability
Bold, confident typography hierarchy emphasizing hierarchy through weight and scale
Strategic deployment of brand red ({colors.accent-1} — #ED1846) as the primary call-to-action signal
Pill-shaped button geometry reflecting modern UI conventions
Generous padding and breathing room supporting content-led storytelling
Gradient overlays on hero sections adding depth without layered shadows

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #FFFFFF): Heading text, primary CTA labels, active states, and brand accent on dark backgrounds. Serves as the dominant ink color for readability against canvas.

Accent Colors

Accent / Brand Red ({colors.accent-1} — #ED1846): Primary call-to-action button fills; decorative accents; brand-centric UI signals.

Interactive

Canvas / On Primary ({colors.canvas} — #1B1B1B): Default page background; label text overlaid on brand-colored surfaces; primary interactive element background.

Neutral Scale

Surface / Body ({colors.surface} — #F5F5F5): Card and panel backgrounds; body copy container; light surface for dark-mode contrast.
Muted ({colors.muted} — #8E8E8E): Captions, secondary text, and de-emphasized copy.
Neutral Decorative ({colors.neutral-2} — #AEAEAE): Decorative text elements; no measured semantic role.

Surface & Borders

Hairline ({colors.hairline} — #D1D1D1): 1px borders, dividers, and icon button strokes.
Neutral Decorative ({colors.neutral-1} — #2A2A2A): Decorative surface; no measured semantic role.

3. Typography Rules

Font Family

Primary: Noto Sans (sans-serif) – all body, heading, and display roles
Secondary: ui-sans-serif (system sans-serif stack) – navigation, links, button text
Decorative: Red Rose (display accent, if used) – not measured on primary content

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Noto Sans	48px	600	1.08–1.2	0px	Hero headlines; use `{typography.display-lg-tight}` (1.08 LH) for constrained space
Display Medium	Noto Sans	40px	600	1.2–1.28	0px	Section titles; `{typography.display-md-tight}` (1.2 LH) tighter option
Heading Large	Noto Sans	32px	600–700	1.2–1.28	0px	Subsection headers; use `{typography.heading-md-strong}` (700 weight) for emphasis
Heading Small	Noto Sans	28px	600	1.2	0px	Card titles, tertiary headers
Body Large	Noto Sans	18px	400–700	1.28–1.4	0px	Paragraph text, featured content; `{typography.body-lg-3}` (700 weight) for strong accent
Body Medium	Noto Sans	14px	400	1.4	0px	Body links, secondary copy
Navigation	ui-sans-serif	16px	400	1.4	0px	Primary nav links, footer links
Button	ui-sans-serif	16px	400	1.5	0px	Interactive button text
Caption	Noto Sans	12px	400	1.2	0px	Metadata, figure captions

Principles

Noto Sans dominates headings and body content for consistent brand voice and technical clarity
ui-sans-serif reserved for navigation and buttons to differentiate interactive affordances
Line height increases with smaller type sizes (12px captions use 1.2; 18px body uses 1.4) to maintain readability
Letter-spacing uniform at 0px across all roles; tracking is not modulated
Weight progression (400 → 600 → 700) creates clear visual hierarchy without size manipulation alone
Line-height tightens for display sizes (1.08–1.2 for 40–48px) to compact headlines; loosens for body (1.4) to aid scanning

4. Component Stylings

Buttons

Primary Filled (Large)

Background: {colors.accent-1} (#ED1846)
Text color: {colors.primary} (#FFFFFF)
Padding: {spacing.md} 32px (vertical {spacing.md} 16px)
Font: Noto Sans, 18px, weight 700, line-height 1.4
Border: none
Border radius: {rounded.xs} (4px)
Width: 297px; Height: 57.1875px
Box shadow: none
State: Hover opacity 0.9; Active opacity 0.8; Disabled opacity 0.5–0.6

Primary Filled (Small)

Background: {colors.accent-1} (#ED1846)
Text color: {colors.primary} (#FFFFFF)
Padding: 12px 32px (vertical 12px)
Font: Noto Sans, 18px, weight 700, line-height 1.4
Border: none
Border radius: {rounded.sm} (8px)
Width: 297px; Height: 49.1875px
Box shadow: none

Text / Ghost

Background: transparent
Text color: {colors.canvas} (#1B1B1B)
Padding: {spacing.xs} 12px (vertical {spacing.xs} 8px)
Font: ui-sans-serif, 16px, weight 400, line-height 1.5
Border: none
Border radius: {rounded.sm} (8px)
Width: 72px; Height: 36px
Box shadow: none
State: Hover opacity 1 with text-decoration none

Icon Button

Background: transparent (default variant) or {colors.primary} (#FFFFFF) for filled variant
Text color: {colors.canvas} (#1B1B1B)
Padding: 0px (icon centered)
Font: Noto Sans, 16px, weight 400, line-height 1.5
Border: {colors.hairline} (#D1D1D1) 1px solid
Border radius: {rounded.full} (9999px / pill)
Width: 48px; Height: 48px
Box shadow: none

Cards & Containers

Featured Card

Background: {colors.surface} (#F5F5F5)
Text color: {colors.canvas} (#1B1B1B)
Padding: 0px (image-led layout)
Border: none
Border radius: {rounded.xs} (4px)
Width: 408.656px; Height: 636px
Font: Noto Sans, 16px, weight 400, line-height 1.5
Box shadow: none

Default Card (Dark)

Background: #161616
Text color: {colors.canvas} (#1B1B1B)
Padding: {spacing.band} 40px (32px horizontal)
Border: none
Border radius: {rounded.xs} (4px)
Width: 452px; Height: 514px
Font: Noto Sans, 16px, weight 400, line-height 1.5
Box shadow: none

Default Card (Light, Compact)

Background: transparent
Text color: {colors.canvas} (#1B1B1B)
Padding: 0px
Border: none
Border radius: {rounded.xs} (4px)
Width: 573px; Height: 332px
Font: Noto Sans, 16px, weight 400, line-height 1.5
Box shadow: none

Inputs & Forms

No form input styles were extracted from the measured page. Refer to "Known Gaps" for limitation.

Navigation

Nav Link (Default)

Background: transparent
Text color: {colors.canvas} (#1B1B1B)
Padding: 0px
Font: ui-sans-serif, 16px, weight 400, line-height 1.4
Border: none
Border radius: 0px (sharp)
Width: 346px; Height: 48px
Box shadow: none
State: Hover opacity 0.9; Focus-visible ring applied

Footer

Background: {colors.surface} (#F5F5F5)
Text color: {colors.canvas} (#1B1B1B)
Padding: 64px {spacing.band} 70px (full-width footer)
Font: ui-sans-serif, 16px, weight 400, line-height 1.4
Border: none
Border radius: 0px
Box shadow: none

5. Layout Principles

Spacing System

Base unit: {spacing.xs} = 8px. All spacing scales in multiples of 4px for fine-grain control.

{spacing.xxs} = 4px (micro-spacing: icon gaps, tight line spacing)
{spacing.xs} = 8px (compact padding for small components)
{spacing.sm} = 12px (button inner padding, form spacing)
{spacing.md} = 16px (standard component padding, nav gaps)
{spacing.lg} = 20px (section spacer, card margins)
{spacing.xl} = 24px (generous padding, container gutters)
{spacing.xxl} = 28px (large feature spacing)
{spacing.xxxl} = 32px (extra-large padding, card interiors)
{spacing.section} = 36px (section divider, vertical rhythm)
{spacing.band} = 40px (hero section padding, full-width margin)

Context: Buttons use {spacing.md} to {spacing.xxxl} for padding; cards reserve {spacing.band} (40px) for breathing room. Sections are vertically separated by {spacing.section} (36px) or {spacing.band} (40px).

Grid & Container

Max content width: 1920px (observed; no narrower max-width applied)
Layout strategy: Full-bleed sections on dark canvas; centered card grids
Horizontal padding: 0px on mobile (375–1024px); {spacing.band} 70px on desktop (1280px+)
Column counts: Responsive progression from single-column (mobile) to 2–3 columns (1280px+); exact counts measured and stated in Responsive Behavior section

Whitespace Philosophy

The design system prioritizes generous whitespace to avoid cognitive overload. Dark canvas backgrounds receive light surface cards or images with substantial padding ({spacing.band} 40px minimum). Between sections, vertical rhythm is maintained through {spacing.section} (36px) or {spacing.band} (40px) gaps. Text blocks are never edge-to-edge; horizontal padding is at minimum {spacing.md} (16px) on compact layouts and {spacing.band} (70px) on desktop, ensuring content never appears cramped.

Border Radius Scale

{rounded.none} = 0px – images, full-bleed sections, sharp footer edges
{rounded.xs} = 4px – cards, buttons (large filled), moderate softness
{rounded.sm} = 8px – buttons (small), input-like elements, softer feel
{rounded.full} = 9999px – icon buttons, pill-shaped affordances, maximum softness

Cards and primary buttons default to {rounded.xs} (4px), providing subtle softness without appearing overly rounded. Icon buttons and toggle-like elements use {rounded.full} (pill) for clear affordance.

Border Widths

thin = 1px – icon button strokes, hairline dividers, light borders (used on icon buttons with {colors.hairline})

6. Depth & Elevation

The design system employs color-blocking as its depth strategy rather than layered shadows. Depth is conveyed through surface-color contrast: dark canvas ({colors.canvas} #1B1B1B) recedes; light surfaces ({colors.surface} #F5F5F5) and cards advance. No box-shadow is applied to components; instead, background color shifts and gradient overlays on hero sections create visual separation.

Elevation Philosophy: Flat, modern aesthetic prioritizing color and typography over shadow depth. Dark backgrounds with light accents naturally create perceived elevation without shadow. Hero sections employ linear gradients (linear-gradient(rgb(27, 27, 27) 0%, rgba(0, 0, 0, 0) 35.65%) and linear-gradient(in oklab, rgb(20, 21, 28) 0%, rgb(37, 40, 54) 100%)) to add layered depth and visual interest without relying on blur or shadow.

Level	Treatment	Use
Base (Flat)	No shadow; canvas background (`#1B1B1B`)	Body sections, default state
Lifted (Card)	Light surface background (`#F5F5F5`) or dark card (`#161616`); no shadow	Featured content, statistics cards, data containers
Overlay (Hero)	Linear gradient with oklab color space; fades to transparent	Hero section backgrounds, image overlays

Opacity Levels

The system defines opacity modulation for interactive and disabled states:

80% (0.80) – Hover state softening on text and icons
75% (0.75) – Decorative overlay opacity
60% (0.60) – Disabled state (secondary)
35% (0.35) – Disabled state (pronounced) or very faint overlay

Z-index / Layering

Base (1): Default elements, page content
Dropdown (10–50): Navigation dropdowns, modals, and overlay menus; exact values: 10 and 50 (likely 10 for dropdowns, 50 for higher-priority overlays or sticky elements)

7. Do's and Don'ts

Do

Use the brand red ({colors.accent-1} #ED1846) for all primary CTAs, ensuring they command attention on dark backgrounds
Maintain generous padding inside cards and around text blocks; never let content edge-to-edge against canvas
Apply {rounded.full} (pill) only to icon buttons and toggle-like affordances for clear circular intent
Stack spacing using the defined scale ({spacing.xs}, {spacing.md}, {spacing.band}) to maintain vertical rhythm across the page
Use Noto Sans for all headings and body copy to preserve brand voice and legibility
Apply opacity shifts (0.8, 0.9) on hover rather than color changes for subtle, consistent interaction feedback
Leverage color-blocking (light surface on dark canvas, or vice versa) for depth; avoid shadow layering
Increase padding and spacing on desktop (70px horizontal) vs. mobile (0–12px) to avoid cramping

Don't

Do not apply box-shadow to cards or buttons; rely on background-color contrast for elevation
Do not use {rounded.full} on standard buttons or cards; reserve for icon buttons
Do not mix font families within a single text block; Noto Sans for headers, ui-sans-serif for nav only
Do not reduce padding below {spacing.md} (16px) on interactive elements or card interiors
Do not invent new colors outside the defined palette; all text, fills, and borders must map to named roles
Do not apply multiple opacity levels in cascade (e.g., 0.8 hover then 0.6 focus); use one clear state per interaction
Do not darken or lighten colors by hand; the palette is fixed and should not be algorithmically adjusted
Do not apply decorative gradients outside hero and overlay contexts; keep sections flat and content-focused
Do not blur or shadow-layer depth; the system is flat-first

8. Responsive Behavior

Breakpoints

Breakpoint	Viewport Width	Content Column	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font	Section Padding-X
Mobile	375px	1920px	N/A	0	Yes	28px (`{typography.heading-sm}`)	16px (`{typography.nav}`)	0px
Tablet	768px	1920px	N/A	0	Yes	28px (`{typography.heading-sm}`)	16px (`{typography.nav}`)	0px
Desktop (Small)	1024px	1920px	2	0	Yes	28px (`{typography.heading-sm}`)	16px (`{typography.nav}`)	0px
Desktop (Medium)	1280px	1920px	3	2	Yes	48px (`{typography.display-lg-tight}`)	16px (`{typography.nav}`)	70px
Desktop (Large)	1440px	1920px	3	2	Yes	48px (`{typography.display-lg-tight}`)	16px (`{typography.nav}`)	70px

Breakpoint collapse: Navigation switches from hamburger menu (no visible links) to a 2-link visible state at 1280px. Heading size jumps from 28px to 48px; section padding-x increases from 0px to 70px at the same threshold.

Touch Targets

Minimum height: 48px for buttons, nav links, icon buttons (measured: all interactive elements at 36–57px)
Minimum width: 48px for icon buttons
Padding around targets: {spacing.xs} (8px) minimum gap between adjacent interactive elements to prevent mis-taps

Collapsing Strategy

Mobile (375–1024px): Single-column layout, full-bleed sections, menu toggle active, section padding-x = 0px (edge-to-edge). Heading size remains 28px. Content cards stack vertically.
Tablet (768px): Same as mobile; no multi-column grid observed.
Desktop (1280px+): 3-column grid activates; 2 nav links visible; heading expands to 48px; section padding-x increases to 70px, centering content and creating breathing room on wide screens.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Red ({colors.accent-1} — #ED1846) – all primary buttons, action signals
Background/Canvas: Dark Canvas ({colors.canvas} — #1B1B1B) – page background, dark sections
Card/Surface: Light Surface ({colors.surface} — #F5F5F5) – featured cards, light sections
Text/Heading: Primary White ({colors.primary} — #FFFFFF) – headings on dark backgrounds
Secondary Text: Muted ({colors.muted} — #8E8E8E) – captions, de-emphasized copy
Border/Divider: Hairline ({colors.hairline} — #D1D1D1) – 1px strokes, icon button borders

Iteration Guide

All buttons with primary action use {colors.accent-1} (#ED1846) fill with {colors.primary} text. Secondary buttons are ghost/text-only with transparent background and {colors.canvas} text.
Card surfaces alternate: featured cards use {colors.surface} (#F5F5F5); default cards use dark (#161616) or transparent. Padding inside cards is always {spacing.band} (40px) or above.
Headings scale by breakpoint: 28px on mobile; 48px on 1280px+. All headings use Noto Sans at weight 600–700 with 0px letter-spacing.
Horizontal padding on sections: 0px mobile; {spacing.band} 70px desktop (1280px+). This prevents cramping and centers wide layouts.
Icon buttons are always {rounded.full} (9999px) with 1px {colors.hairline} border. Standard buttons use {rounded.xs} (4px).
Opacity on hover: 0.9 for text/icons, 0.8 for active states, 0.5–0.6 for disabled. No color darkening; modulate opacity only.
Hero sections use linear gradients (linear-gradient(rgb(27, 27, 27) 0%, rgba(0, 0, 0, 0) 35.65%)) for depth; no box-shadow elsewhere.
Nav links collapse to hamburger at 1024px; 2 links visible at 1280px+. Menu toggle z-index = 50.
All typography is Noto Sans except navigation and buttons, which use ui-sans-serif. Line-height increases from 1.2 (display) to 1.4 (body).
Spacing scale: Base 8px unit; use {spacing.md} (16px) as default padding; {spacing.band} (40px) for sections; scale up to {spacing.xxxl} (32px) for card interiors on desktop.

10. Known Gaps

No measured interaction states beyond opacity and hover/active/disabled/focus-visible applied globally; specific button variant states (e.g., "pressed" on toggles) were not extracted from the measured page.
No form input styles (text fields, checkboxes, radios, selects) were measured; the page does not expose input markup or styling.
No semantic color ramp (error, success, warning, info) declared; the site does not apply status colours to UI elements.
3 neutral colors ({colors.neutral-1} #2A2A2A, {colors.neutral-2} #AEAEAE, and one additional) have no measured semantic role and are described as decorative only; their intended use remains unconfirmed.
Limited elevation/shadow data: The system employs color-blocking and flat design; only 2 gradient definitions were extracted (both hero overlays). Box-shadow is not used on components in the measured page.
No dark/light theme variant observed; the extracted design is single-theme dark-first with light surface accents. Any light-mode counterpart is not included.
Authentication/gated surfaces not visited: The extraction covers only the public-facing Hô Biến Partners page. Logged-in dashboards, account settings, or admin interfaces are not represented.
1 page analysed: Design tokens derive from https://www.hobien.com.vn/partner only. Other Hobien pages may introduce additional components, colours, or responsive patterns.
No motion/animation data extracted: Transitions, keyframe timings, and easing curves are not recorded; implement standard defaults (e.g., 200–300ms ease-out) if not otherwise specified.

tokens:

colors:
  primary:
    value: "#FFFFFF"
    description: "Primary / Brand / Ink"
    role: "Primary CTA, brand accent, headings, primary text on dark backgrounds"
  accent-1:
    value: "#ED1846"
    description: "Accent / Brand Red"
    role: "Primary action button fills, decorative accents"
  canvas:
    value: "#1B1B1B"
    description: "Canvas / On Primary"
    role: "Default page background, dark sections, label text on brand surfaces"
  surface:
    value: "#F5F5F5"
    description: "Surface / Body"
    role: "Card and panel backgrounds, light sections, body copy container"
  muted:
    value: "#8E8E8E"
    description: "Muted"
    role: "Captions, secondary text, de-emphasized copy"
  hairline:
    value: "#D1D1D1"
    description: "Hairline"
    role: "1px borders, dividers, icon button strokes"
  neutral-1:
    value: "#2A2A2A"
    description: "Neutral (decorative)"
    role: "Unassigned; decorative surface"
  neutral-2:
    value: "#AEAEAE"
    description: "Neutral (decorative)"
    role: "Unassigned; decorative text"

typography:
  display-lg:
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Hero headline"
  display-lg-tight:
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Compact hero headline"
  display-md:
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Section title"
  display-md-tight:
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Compact section title"
  heading-md:
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Subsection header"
  heading-md-strong:
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.28
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Emphasized subsection header"
  heading-md-tight:
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Compact subsection header"
  heading-sm:
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Card title, tertiary header"
  body-lg:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Paragraph text"
  body-lg-tight:
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Tight paragraph text"
  body-lg-2:
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.28
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Featured paragraph (medium weight)"
  body-lg-3:
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Strong paragraph accent"
  body-lg-strong:
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Semibold paragraph"
  body-md:
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Body link, secondary copy"
  nav:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
    fontFamily: "ui-sans-serif"
    description: "Navigation link"
  button:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
    fontFamily: "ui-sans-serif"
    description: "Button text"
  caption:
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
    fontFamily: "Noto Sans"
    description: "Metadata, figure caption"

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 36px
  band: 40px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  full: 9999px

borders:
  thin: 1px

opacity:
  level-80: 0.80
  level-75: 0.75
  level-60: 0.60
  level-35: 0.35

zIndex:
  dropdown: 10
  modal: 50

gradients:
  hero-overlay-1: "linear-gradient(rgb(27, 27, 27) 0%, rgba(0, 0, 0, 0) 35.65%)"
  hero-overlay-2: "linear-gradient(in oklab, rgb(20, 21, 28) 0%, rgb(37, 40, 54) 100%)"

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

Design tokens

Extracted from www.hobien.com.vn/partner

Primary

#FFFFFF

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

#ED1846

Accent / decorative

Neutral

#1B1B1B

Default page background; label colour on brand surfaces

#F5F5F5

Card / panel background; Body copy

#8E8E8E

Captions, secondary text

#D1D1D1

1px borders and dividers

#2A2A2A

Neutral

#AEAEAE

Neutral

Typography · Noto Sans

h148px · 600 · 57.6px

h240px · 600 · 51.2px

h328px · 600 · 33.6px

body18px · 400 · 25.2px

link14px · 400 · 19.6px

nav-link16px · 400 · 22.4px

body18px · 400 · 23.04px

heading32px · 700 · 40.96px

body18px · 600 · 23.04px

body18px · 700 · 25.2px

heading32px · 600 · 40.96px

heading32px · 600 · 38.4px

display40px · 600 · 48px

body18px · 500 · 25.2px

body14px · 400 · 17.92px

body18px · 700 · 23.04px

body20px · 400 · 28px

body16px · 600 · 22.4px

body18px · 600 · 21.6px

body14px · 700 · 17.92px

caption12px · 400 · 14.4px

body24px · 600 · 30.72px

display48px · 600 · 51.84px

body24px · 600 · 36px

body14px · 600 · 19.6px

body18px · 600 · 25.2px

body24px · 600 · 28.8px

Typography · ui-sans-serif

button16px · 400 · 24px

Typography · Red Rose

body24px · 700 · 30.72px

Spacing

4px

8px

12px

16px

20px

24px

28px

32px

Components · 5

Remixes of www.hobien.com.vn

Latest remixes

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

Remix it