Back to DesignMD
Phương Mai Võ Hồ
Generated Oct 28, 2026
DESIGN.md for hoidoanhnghiep.phuongtanhung.gov.vn
Remixes of hoidoanhnghiep.phuongtanhung.gov.vn
Latest remixes
No public remixes yet. Be the first to make one.
Remix itPhương Mai Võ Hồ
Generated Oct 28, 2026
Latest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Hoidoanhnghiep
description: |
The Hội Doanh nghiệp phường Tân Hưng (TAHUBA) design system expresses
institutional trust and professional growth through a confident blend of deep
navy authority and vibrant gold warmth. The visual language balances formal
Vietnamese business culture with approachable, service-oriented clarity. Large
hero imagery with semi-transparent gradient overlays creates depth and visual
drama, while white cards and light surfaces ensure content remains readable
and scannable. The system favors gentle curves (mostly pill-shaped interactive
elements) and progressive layering of shadows to guide attention without
overwhelming. Decorative gradients—including conic and radial patterns in
blues and golds—reinforce the brand's dual commitment: institutional
credibility (navy) and membership prosperity (gold). The overall impression is
collaborative, forward-thinking, and grounded in community values.
source:
url: "https://hoidoanhnghiep.phuongtanhung.gov.vn/"
pagesAnalyzed: 6
extractedAt: 2026-10-28
tokensMeasured: true
colors:
primary: "#FF9B00"
accent: "#074691"
link: "#0877B5"
canvas: "#FFFFFF"
surface: "#F5F8FC"
surface-alt: "#031D3D"
ink: "#252525"
body: "#333333"
muted: "#666666"
faint: "#64748B"
hairline: "#E2E8F0"
accent-1: "#475569"
accent-2: "#94A3B8"
accent-3: "#78B4FF"
accent-4: "#DAA520"
typography:
heading-xxl:
fontFamily: Inter
fontSize: 32px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-xl:
fontFamily: Inter
fontSize: 22.4px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-lg:
fontFamily: Inter
fontSize: 21.6px
fontWeight: 800
lineHeight: 1.4
letterSpacing: 0px
heading-md:
fontFamily: Inter
fontSize: 18.72px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
heading-sm:
fontFamily: Inter
fontSize: 17.6px
fontWeight: 800
lineHeight: 1.4
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 16.8px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
body-xl:
fontFamily: Inter
fontSize: 18.88px
fontWeight: 600
lineHeight: 1.6
letterSpacing: 0px
body-lg:
fontFamily: Inter
fontSize: 17.6px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 14.4px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md-strong:
fontFamily: Inter
fontSize: 14.4px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 13.76px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
body-xs:
fontFamily: Inter
fontSize: 13.6px
fontWeight: 600
lineHeight: 1.2
letterSpacing: 0px
textTransform: uppercase
button-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 450
lineHeight: 1.6
letterSpacing: 0px
button-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
button-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: 700
lineHeight: 1.6
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 13.3333px
fontWeight: 400
lineHeight: 1.35
letterSpacing: 0px
caption-xs:
fontFamily: Inter
fontSize: 12px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
caption-xs-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 500
lineHeight: 1.6
letterSpacing: 0px
rounded:
none: 0px
xs: 4px
sm: 7px
md: 8px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 52px
borderWidths:
thin: 1px
medium: 3px
shadows:
sm: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px"
md: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
lg: "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px"
xl: "rgba(7, 70, 145, 0.35) 0px 4px 12px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F5F8FC"
surfaceRaised: "#EDF0F3"
text: "#252525"
textMuted: "#333333"
border: "#E2E8F0"
accent: "#C27600"
accentFg: "#000000"
focusRing: "#FF9B00"
elevation: shadow
dark:
bg: "#161109"
surface: "#241F18"
surfaceRaised: "#302B24"
text: "#FFFBF5"
textMuted: "#A6A29B"
border: "#3B3730"
accent: "#FF9B00"
accentFg: "#0B0B0C"
focusRing: "#FF9B00"
elevation: "border+surface"
gradients:
- context: section
kind: radial
value: "radial-gradient(circle, rgba(120, 180, 255, 0.18) 0%, rgba(0, 0, 0, 0) 70%)"
- context: section
kind: radial
value: "radial-gradient(circle, rgba(218, 165, 32, 0.12) 0%, rgba(0, 0, 0, 0) 70%)"
- context: section
kind: conic
value: "conic-gradient(rgba(255, 215, 0, 0) 0deg, rgba(255, 215, 0, 0.9) 60deg, rgb(255, 255, 180) 90deg, rgba(255, 215, 0, 0.9) 120deg, rgba(255, 215, 0, 0) 180deg, rgba(120, 180, 255, 0) 200deg, rgba(120, 180, 255, 0.9) 270deg, rgb(180, 210, 255) 300deg, rgba(120, 180, 255, 0.9) 330deg, rgba(120, 180, 255, 0) 360deg)"
- context: section
kind: linear
value: "linear-gradient(rgba(7, 70, 145, 0.82), rgba(7, 70, 145, 0.88)), url(\"https://hoidoanhnghiep.phuongtanhung.gov.vn/assets/images/total_bg.jpg\")"
- context: section
kind: linear
value: "repeating-linear-gradient(-45deg, rgb(187, 222, 245), rgb(204, 229, 247) 40px, rgb(204, 229, 247) 40px, rgb(204, 229, 247) 80px)"
- context: hero
kind: linear
value: "repeating-linear-gradient(-45deg, rgb(187, 222, 245), rgb(204, 229, 247) 40px, rgb(204, 229, 247) 40px, rgb(204, 229, 247) 80px)"
components:
button-filled:
textColor: "{colors.canvas}"
border: "1px solid {colors.canvas}"
height: 45.5938px
padding: "9px 18px 9px 18px"
fontSize: 16px
fontFamily: Inter
fontWeight: 700
lineHeight: 1.6
rounded: "{rounded.sm}"
backgroundColor: "{colors.accent}"
button-filled-sm:
typography: "{typography.button-sm}"
textColor: "{colors.canvas}"
border: "1px solid rgba(255, 255, 255, 0.7)"
height: 42.3906px
padding: "9px 14px 9px 14px"
rounded: 999px
backgroundColor: "rgba(0, 0, 0, 0.72)"
button-primary:
typography: "{typography.body-xs}"
textColor: "{colors.canvas}"
height: 34.3125px
padding: "9px 18px 9px 18px"
rounded: 30px
backgroundColor: "{colors.primary}"
button-primary-lg:
textColor: "{colors.canvas}"
height: 39.1875px
padding: "10px 24px 10px 24px"
fontSize: 16px
fontFamily: Inter
fontWeight: 600
lineHeight: 1.2
rounded: 30px
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.canvas}"
height: 46px
fontSize: 19.2px
boxShadow: "rgba(7, 70, 145, 0.35) 0px 4px 12px 0px"
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
rounded: "50%"
backgroundColor: "{colors.accent}"
button-icon-sm:
textColor: "{colors.canvas}"
height: 40px
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
rounded: "50%"
backgroundColor: "rgba(255, 255, 255, 0.2)"
card:
textColor: "{colors.accent}"
border: "1px solid {colors.hairline}"
padding: "12px 12px 12px 12px"
fontSize: 16px
fontFamily: Inter
fontWeight: 700
lineHeight: 1.6
rounded: "{rounded.md}"
backgroundColor: "{colors.surface}"
card-lg:
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px"
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
rounded: "{rounded.md}"
backgroundColor: "{colors.canvas}"
navigation:
textColor: "{colors.body}"
height: 36px
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
footer:
textColor: "{colors.accent}"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
link:
textColor: "{colors.body}"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
backgroundColor: "{colors.surface}"
link-lg:
textColor: "{colors.body}"
fontSize: 16px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.6
states:
button-hover:
target: button
state: hover
transform: "translateY(-2px)"
nav-hover:
target: nav
state: hover
opacity: 1
transform: "translateY(0px)"
other-hover:
target: other
state: hover
transform: "translateY(-5px)"
card-hover:
target: card
state: hover
transform: "translateY(-10px)"
link-hover:
target: link
state: hover
transform: "translateY(-3px)"
input-focus:
target: input
state: focus
outline: "rgba(241, 181, 34, 0.35) solid 2px"
outlineColor: "rgba(241, 181, 34, 0.35)"
outlineWidth: 2px
input-focus-visible:
target: input
state: focus-visible
outline: "rgba(7, 70, 145, 0.25) solid 3px"
outlineColor: "rgba(7, 70, 145, 0.25)"
outlineWidth: 3px
breakpoints:
- width: 375
containerWidth: 8
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 31
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 17
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 15
gridColumns: 6
navLinksVisible: 3
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1200
gridColumns: 6
navLinksVisible: 3
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1200
gridColumns: 6
navLinksVisible: 3
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 48
gradientsFound: 8
rolesUnassigned: 4
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
The Hội Doanh nghiệp phường Tân Hưng (TAHUBA) design system expresses institutional trust and professional growth through a confident blend of deep navy authority and vibrant gold warmth. The visual language balances formal Vietnamese business culture with approachable, service-oriented clarity. Large hero imagery with semi-transparent gradient overlays creates depth and visual drama, while white cards and light surfaces ensure content remains readable and scannable. The system favors gentle curves (mostly pill-shaped interactive elements) and progressive layering of shadows to guide attention without overwhelming. Decorative gradients—including conic and radial patterns in blues and golds—reinforce the brand's dual commitment: institutional credibility (navy) and membership prosperity (gold). The overall impression is collaborative, forward-thinking, and grounded in community values.
Key Characteristics
{colors.primary} — #FF9B00) for warmth and action visibility{colors.accent} — #074691) as secondary anchor, used in hero bands and authority contexts{colors.surface} — #F5F8FC) that reduce cognitive load{rounded.full}) and rounded cards ({rounded.md}) for accessibility and approachability{colors.primary} — #FF9B00): Dominant accent for primary call-to-action buttons, hero accents, and active state indicators. Warm, energetic, and commands attention without aggression.{colors.accent} — #074691): Deep navy used in hero band backgrounds, navigation highlights, and institutional touchpoints. Conveys trust and formality.{colors.link} — #0877B5): Slightly lighter navy for inline hyperlinks, allowing distinction from the accent while maintaining the blue family.{colors.accent-1} — #475569): Slate tone with no assigned semantic role; used in decorative and background contexts only.{colors.accent-2} — #94A3B8): Soft blue-gray; decorative only, no functional role assigned.{colors.accent-3} — #78B4FF): Light sky blue; decorative accent, appears in gradient compositions and background layers.{colors.accent-4} — #DAA520): Muted gold tone; decorative only, complements primary gold in layered backgrounds.{colors.canvas} — #FFFFFF): Default page background and primary surface for maximum readability.{colors.surface} — #F5F8FC): Subtle light blue tint for card and panel backgrounds, providing visual separation without harsh contrast.{colors.surface-alt} — #031D3D): Dark navy band surface, used in alternating hero sections and footer regions for dramatic contrast.{colors.ink} — #252525): Primary text colour for headings; near-black for maximum contrast and hierarchy prominence.{colors.body} — #333333): Body copy text, slightly lighter than ink to differentiate from headings while maintaining readability.{colors.muted} — #666666): Secondary and caption text, reduced prominence for supplementary information.{colors.faint} — #64748B): Tertiary text for placeholders and lowest-priority supporting copy.{colors.hairline} — #E2E8F0): 1px borders and subtle dividers between elements; nearly invisible on white backgrounds, visible on light surfaces.Primary: Inter (https://fonts.googleapis.com/) Fallback Stack: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Inter | 32px | 700 | 1.4 | 0px | Largest marketing and page-level headings |
| Heading Large | Inter | 21.6px | 800 | 1.4 | 0px | Section titles and strong emphasis |
| Heading XL | Inter | 22.4px | 700 | 1.4 | 0px | Major subsection headings |
| Heading Medium | Inter | 18.72px | 700 | 1.4 | 0px | Card titles and subsection leads |
| Heading Small | Inter | 16.8px | 700 | 1.4 | 0px | Minor headings and list headers |
| Heading Micro | Inter | 17.6px | 800 | 1.4 | 0px | Compact headings (h4 equivalent) |
| Body XL | Inter | 18.88px | 600 | 1.6 | 0px | Large body emphasis text |
| Body Large | Inter | 17.6px | 700 | 1.2 | 0px | Strong/bold body text |
| Body Medium | Inter | 14.4px | 400 | 1.6 | 0px | Standard body copy and links |
| Body Small | Inter | 13.76px | 800 | 1.2 | 0px | Compact text with emphasis |
| Body XSmall | Inter | 13.6px | 600 | 1.2 | 0px uppercase | All-caps labels and badge text |
| Body Medium Strong | Inter | 14.4px | 700 | 1.6 | 0px | Semi-bold body for accents |
| Button Large | Inter | 16px | 600 | 1.9 | 0px | Primary button text |
| Button Large Bold | Inter | 16px | 800 | 1.2 | 0px | Emphasis button variant |
| Button Medium | Inter | 16px | 450 | 1.6 | 0px | Standard button text |
| Button Small | Inter | 14px | 700 | 1.6 | 0px | Compact button text |
| Caption XSmall | Inter | 12px | 500 | 1.6 | 0px | Semi-bold captions |
| Caption XSmall Regular | Inter | 12px | 400 | 1.6 | 0px | Standard captions |
| Caption Small | Inter | 13.33px | 400 | 1.35 | 0px | Slightly larger captions |
Primary Button (Large)
#FF9B00#FFFFFF{rounded.full} (30px)rgba(255, 155, 0, 0.4) 0px 6px 16pxtranslateY(-3px)#FF9B00Primary Button (Small)
#FF9B00#FFFFFF{rounded.full} (30px)Filled Button (Secondary, Dark)
#074691#FFFFFF{rounded.sm} (7px)#FFFFFFvar(--shadow-md) or rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2pxtranslateY(-2px)#FFFFFFFilled Button (Small, Semi-transparent)
rgba(0, 0, 0, 0.72)#FFFFFF{rounded.full} (999px)rgba(255, 255, 255, 0.7)Icon Button (Circular, Large)
#074691#FFFFFF{rounded.full} (50%)rgba(7, 70, 145, 0.35) 0px 4px 12px 0pxIcon Button (Circular, Small, Transparent)
rgba(255, 255, 255, 0.2)#FFFFFF{rounded.full} (50%)Default Card (Horizontal)
#F5F8FC#E2E8F0{rounded.md} (8px)#074691var(--shadow-md) or rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2pxtranslateY(-4px)#FF9B00Default Card Large (Vertical)
#FFFFFF#E2E8F0{rounded.md} (8px)#333333rgba(0, 0, 0, 0.05) 0px 2px 4px 0pxrgba(8, 119, 181, 0.12) 0px 6px 24pxtranslateY(-3px)Default Navigation Bar
#333333#074691 (on nav links)#F5F8FC (light blue highlight)translateY(0px)Input Field (Text) — Focus State
#074691rgba(7, 70, 145, 0.12)rgba(7, 70, 145, 0.12)Input Field — Focus Visible State
#FF9B00 (gold accent)rgba(241, 181, 34, 0.35) (gold with transparency)rgba(241, 181, 34, 0.35)Inline Link (Default)
#333333#FF9B00 (gold) — standard link hover#FFFFFF — when on dark backgroundstranslateY(-3px) or scale(1.05) — animated linksBase Unit: 4px
Scale with Usage Context:
{spacing.xxs} = 4px — micro gaps, tight list spacing{spacing.xs} = 8px — small internal padding, icon spacing{spacing.sm} = 12px — component internal padding{spacing.md} = 16px — standard padding, button internal space{spacing.lg} = 20px — content margins, section breathing room{spacing.xl} = 24px — large padding, card spacing{spacing.xxl} = 28px — comfortable gap between major content blocks{spacing.xxxl} = 32px — substantial margin between sections{spacing.section} = 40px — section top/bottom padding{spacing.band} = 52px — hero and full-width band vertical paddingMax Width: 1200px (observed at 1280px and 1440px breakpoints)
Column Strategy:
Section Patterns:
#F5F8FC) and dark (#031D3D) backgrounds for visual rhythmThe system prioritizes generous breathing room. Section padding scales from edge (40–52px) to ensure content never feels cramped. Card spacing and internal margins (16–24px) create visual separation without visual clutter. Vertical rhythm is maintained through consistent line-height multiples and section-to-section spacing, making the design feel intentional and trustworthy rather than dense or cluttered.
{rounded.none} = 0px — images and full-bleed sections{rounded.xs} = 4px — subtle decorative elements{rounded.sm} = 7px — secondary buttons and compact components{rounded.md} = 8px — cards, input fields, panels (most common){rounded.full} = 9999px — pill-shaped buttons and circular icons (primary interactive paradigm)| Level | Treatment | Use |
|---|---|---|
| Flat (base) | No shadow; flat background colour only | Form inputs, flat badges, text |
| Subtle (sm) | rgba(0, 0, 0, 0.05) 0px 2px 4px 0px | Cards with minimal lift; gentle depth |
| Layered (md) | rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px | Dropdowns, hovered cards, modals with context |
| Elevated (lg) | rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px | Cards at rest (alternative to sm); strong emphasis |
| Brand Shadow (xl) | rgba(7, 70, 145, 0.35) 0px 4px 12px 0px | Icon buttons and navy-accented elements; brand-coloured glow |
| Gold Shadow | rgba(255, 155, 0, 0.4) 0px 6px 16px | Primary buttons at hover; warm emphasis |
| Deep Lift | rgba(8, 119, 181, 0.12) 0px 6px 24px | Large cards at hover; pronounced elevation |
| Customized Deep Lift | rgba(7, 70, 145, 0.25) 0px 18px 34px | High-emphasis card interactions; strong spatial separation |
Shadow Philosophy: The system uses a progressive shadow ladder where subtle (sm) serves as the baseline for cards at rest, and stronger shadows (md, lg) appear on hover or when content requires emphasis. The brand navy ({colors.accent} — #074691) shadow on icon buttons reinforces institutional identity, while gold shadows on primary buttons emphasize calls-to-action. No element relies on shadow alone; colour blocking and transform (translateY, scale) work in concert to communicate depth, interaction, and state change.
#FF9B00 ({colors.primary}) for all primary calls-to-action (buttons, links, key actions). It is instantly recognizable and commands attention without aggression.{rounded.full} = 9999px) to interactive buttons and icon buttons. This paradigm is consistent throughout and signals "tapable."#074691 ({colors.accent}) with white text for hero sections, navigation headers, and authority contexts. The contrast ensures readability.#F5F8FC ({colors.surface}) backgrounds for supporting content, and #FFFFFF ({colors.canvas}) for primary content cards. This subtle distinction guides focus.{colors.link} (#0877B5) for inline hyperlinks to distinguish them from body text while keeping the navy family cohesive.translateY(-3px) to -6px, scale(1.05) to 1.08) to cards and buttons. Motion confirms interaction and delights users.#FF9B00 for secondary buttons or less critical actions. Reserve it for primary CTAs to maintain visual hierarchy and reduce cognitive load.{rounded.none}) to interactive elements. Buttons and inputs must use {rounded.full} or {rounded.md} to signal affordance.{colors.muted} (#666666) on white backgrounds for body copy. Insufficient contrast harms readability and accessibility.{spacing.xxs} through {spacing.band}). Consistency builds trust and reduces visual noise.{colors.accent-1} through {colors.accent-4}) for functional UI elements (buttons, links, status badges). They are for backgrounds and ornamental gradients only.| Breakpoint | Width | Content Column | Grid Columns | Nav Links Visible | Key Changes |
|---|---|---|---|---|---|
| Mobile | 375px | ~8px margin | 1 | 0 (menu toggle active) | Full-width, hamburger menu, single-column cards |
| Tablet | 768px | ~17px margin | 2 | 0 (menu toggle active) | Two-column card grids, menu toggle remains |
| Desktop | 1024px | ~15px margin | 6 | 3 | Full nav bar visible, six-column grid, nav links active |
| Large Desktop | 1280px–1440px | 1200px max | 6 | 3 | Max-width container, centered layout, full feature parity |
Responsive Scaling Notes:
Minimum Interactive Sizes:
Mobile Considerations:
{spacing.md} (16px) at mobile to prevent mis-taps.Mobile → Tablet (375px → 768px):
Tablet → Desktop (768px → 1024px):
Desktop Refinement (1024px → 1440px):
{colors.primary} — #FF9B00) — use for main buttons, key links, and hero accents{colors.accent} — #074691) — use for headers, hero bands, and institutional touchpoints{colors.link} — #0877B5) — inline hyperlinks only{colors.canvas} — #FFFFFF) — default canvas{colors.surface} — #F5F8FC) — supporting cards and panels{colors.surface-alt} — #031D3D) — alternating hero sections and footers{colors.ink} — #252525) — h1–h4 text{colors.body} — #333333) — paragraph copy{colors.muted} — #666666) — secondary and metadata{colors.hairline} — #E2E8F0) — 1px separatorsAlways start buttons with #FF9B00 ({colors.primary}), pill-shape ({rounded.full}), and white text. If a secondary button is needed, use #074691 with white border and {rounded.sm}.
Cards default to #F5F8FC ({colors.surface}) background, #E2E8F0 ({colors.hairline}) 1px border, {rounded.md} (8px radius). Add shadow (sm) on hover; lift with translateY(-3px) to -6px transform.
All interactive elements get transform + shadow on hover. Buttons: translateY(-3px) + gold shadow. Cards: translateY(-4px) + navy shadow. Links: color shift to #FF9B00 or #FFFFFF (context-dependent).
Typography: use {typography.heading-xxl} (32px, 700 weight) for page titles; {typography.heading-md} (18.72px) for sections; {typography.body-md} (14.4px) for body copy. Never deviate from the specified px and weight values.
Spacing: internal padding is 16px ({spacing.md}), section margins 40px ({spacing.section}), large gaps 52px ({spacing.band}). Use the scale; do not invent intermediate values.
Responsive grid: 1 column at mobile, 2 at tablet (768px+), 6 at desktop (1024px+). Max-width container 1200px centered at 1280px+. No nav links visible below 1024px.
Shadow ladder: none → sm (rgba(0,0,0,0.05)) → md (multi-layer) → lg (strong) → xl (brand navy). Never skip levels or apply multiple shadows at once unless explicitly layered.
Form inputs get focus state: rgba(7, 70, 145, 0.12) outline (3px) and navy border. On focus-visible, gold accent outline instead. Always include visible focus ring for accessibility.
Hero sections: use #031D3D ({colors.surface-alt}) background with linear gradient overlay (opacity 0.82) + background image. Ensure text legible via overlay.
Icons: use 40–46px circular buttons with {rounded.full}. Primary icon buttons get #074691 background + navy shadow ({colors.accent} xl shadow). Secondary get semi-transparent white (rgba(255,255,255,0.2)). No sharp corners on any interactive icon.
Semantic Status Palette: The site does not expose error, success, warning, or info colours in any measured markup. No semantic status ramp (red/green/yellow/blue) was extracted. If status colours are needed, they must be added as new design tokens outside this system.
Interaction States (Partial): Hover and focus states were extracted from stylesheets, but disabled, active (non-hover), and visited states were not observed or may be absent from the measured pages. Implement disabled states (typically reduced opacity 0.5–0.6) and active tab states following common UI patterns, as they are not specified here.
Dark Mode / Derived Theme: The extracted token set includes only the measured (light) theme. One palette side was not derived or explicitly measured as a dark variant. If dark mode is required, it must be designed separately and is not covered by this document.
Animation / Transition Timing: Transform and shadow properties were observed, but CSS transition durations, timing functions (ease-in, cubic-bezier, etc.), and animation keyframes were not extracted. Implement smooth transitions (typically 200–300ms ease-out for standard interactions) as a reasonable default; exact timing was not declared.
Decorator Accent Colours (4 unassigned): {colors.accent-1} through {colors.accent-4} have no assigned functional role. They appear only in decorative background gradients (radial, conic, linear). Do not use them for buttons, links, badges, or semantic UI elements.
Cross-Origin Stylesheet Gaps: Some third-party or external stylesheets were not readable due to CORS restrictions. CSS-declared detail for those resources (animations, pseudo-elements, third-party component styling) may be incomplete.
Authentication-Gated Surfaces: The site's backend pages (member login, admin dashboards, etc.) were not crawled. Design patterns, colour roles, or component variants behind authentication are not documented here.
Micro-Interaction Details: While hover states (transforms, shadow changes) were extracted, more complex interactions (focus-within, active, toggled states, multi-step animations) may not be fully represented. Document additional states as they are discovered.
Letter Spacing Precision: All measured letter-spacing values are 0px. No negative tracking or subtle tracking adjustments were detected in the typography measurements. If fine-tuned letter-spacing is desired for display sizes, it must be added manually and is not part of the measured system.
Print Styles & Media Queries: No print stylesheets or media-query-specific overrides (e.g., high-contrast mode, prefers-reduced-motion) were observed or extracted. If print or accessibility-specific styling is needed, implement it separately.