Remixes of toan040606.github.io
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest 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: Toan040606
description: |
The HIT Web Public 2026 design system presents a clean, professional, and
accessibility-focused educational interface. The visual personality is
minimalist yet warm, prioritizing clarity and legibility for technical
documentation and course content. The design emphasizes a light, spacious
canvas with deliberate accent colours that guide attention without
distraction. The overall mood is approachable and structured, balancing
informational density with generous whitespace and a soft, neutral background.
The brand's warm orange accent (#C64B0B) punctuates an otherwise cool,
ink-based palette, creating visual hierarchy and encouraging user interaction.
source:
url: "https://toan040606.github.io/HIT_WEB_PUBLIC_2026/Buoi7/README.html?fbclid=IwY2xjawVK9aBleHRuA2FlbQIxMABwZG9mBWJyaWQRMTZBall1ZFR2T1p3cFJ5UVFzcnRjBmFwcF9pZBAyMjIwMzkxNzg4MjAwODkyAAEeinEYlxbWcsFol5nzfb_wcSSnIXQvd4BturKcD8P3_FnoIIW2kW95pH3nLWw_aem_IUqJR9cQ7QNDFzk1PXEBPA"
pagesAnalyzed: 1
extractedAt: 2026-10-25
tokensMeasured: true
colors:
primary: "#172033"
link: "#C64B0B"
canvas: "#F4F7FB"
on-primary: "#FFFFFF"
ink: "#172033"
body: "#687188"
hairline: "#DFE5F0"
accent-1: "#24292F"
accent-2: "#CF222E"
accent-3: "#8250DF"
accent-4: "#0550AE"
accent-5: "#116329"
accent-6: "#F36B21"
neutral-1: "#D0D7DE"
neutral-2: "#FFF1E8"
typography:
display:
fontFamily: Inter
fontSize: 50px
fontWeight: 700
lineHeight: 1.08
letterSpacing: -2px
heading-lg:
fontFamily: Inter
fontSize: 36px
fontWeight: 700
lineHeight: 1.15
letterSpacing: -1.26px
heading-md:
fontFamily: Inter
fontSize: 24px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0px
heading-sm:
fontFamily: Inter
fontSize: 21px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 19px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0px
body-lg:
fontFamily: Inter
fontSize: 18px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0px
body-md-strong:
fontFamily: Inter
fontSize: 16px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0px
body-md-2:
fontFamily: Inter
fontSize: 16px
fontWeight: 800
lineHeight: 1.72
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 13px
fontWeight: 400
lineHeight: 1.72
letterSpacing: 0px
body-sm-strong:
fontFamily: Inter
fontSize: 13px
fontWeight: 700
lineHeight: 1.3
letterSpacing: 0px
nav:
fontFamily: Inter
fontSize: 12px
fontWeight: 650
lineHeight: 1.3
letterSpacing: 0px
button:
fontFamily: Inter
fontSize: 11px
fontWeight: 800
lineHeight: 1.72
letterSpacing: 0px
caption-md:
fontFamily: Inter
fontSize: 12px
fontWeight: 700
lineHeight: 1.72
letterSpacing: 0.48px
caption-md-strong:
fontFamily: Inter
fontSize: 12px
fontWeight: 900
lineHeight: 1.72
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: 800
lineHeight: 1.72
letterSpacing: 1.32px
textTransform: uppercase
caption-xs:
fontFamily: Inter
fontSize: 10px
fontWeight: 800
lineHeight: 1.72
letterSpacing: 1px
caption-xs-strong:
fontFamily: Inter
fontSize: 10px
fontWeight: 900
lineHeight: 1.3
letterSpacing: 0px
code-sm:
fontFamily: ui-monospace
fontSize: 14.08px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
code-xs:
fontFamily: ui-monospace
fontSize: 13.5px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
rounded:
xs: 7px
sm: 8px
md: 12px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 56px
borderWidths:
thin: 1px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F4F7FB"
surface: "#EDF0F3"
surfaceRaised: "#E4E8EB"
text: "#172033"
textMuted: "#687188"
border: "#DFE5F0"
accent: "#172033"
accentFg: "#FFFFFF"
focusRing: "#172033"
elevation: shadow
dark:
bg: "#0E0E10"
surface: "#1C1C1E"
surfaceRaised: "#29292A"
text: "#F6F6F7"
textMuted: "#9E9E9F"
border: "#353536"
accent: "#5F7BB7"
accentFg: "#0B0B0C"
focusRing: "#435E95"
elevation: "border+surface"
components:
button-filled:
typography: "{typography.nav}"
textColor: "{colors.link}"
border: "1px solid {colors.hairline}"
height: 29.5938px
padding: "6px 9px 6px 9px"
rounded: 6px
backgroundColor: "{colors.neutral-2}"
button-filled-lg:
textColor: "{colors.link}"
border: "1px solid {colors.hairline}"
height: 38.3594px
padding: "7px 13px 7px 13px"
fontSize: 13px
fontFamily: Inter
fontWeight: 700
lineHeight: 1.72
rounded: "{rounded.xs}"
backgroundColor: "{colors.on-primary}"
button-outline:
typography: "{typography.body-sm}"
textColor: "{colors.link}"
border: "1px solid {colors.hairline}"
height: 36.3594px
padding: "6px 10px 6px 10px"
rounded: 6px
button-outline-sm:
typography: "{typography.nav}"
textColor: "{colors.body}"
border: "1px solid {colors.hairline}"
height: 29.5938px
padding: "6px 9px 6px 9px"
rounded: 6px
card:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.hairline}"
padding: "9px 12px 9px 12px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.on-primary}"
card-2:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
border: "1px solid {colors.accent-6}"
padding: "9px 12px 9px 12px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.on-primary}"
navigation:
typography: "{typography.body-md}"
textColor: "{colors.ink}"
height: 29.5938px
footer:
typography: "{typography.body-sm}"
textColor: "{colors.body}"
padding: "20px 20px 55px 20px"
link:
typography: "{typography.body-md-2}"
textColor: "{colors.ink}"
states:
link-hover:
target: link
state: hover
textDecoration: underline
other-hover:
target: other
state: hover
textDecoration: none
button-hover:
target: button
state: hover
transform: "translateY(-1px)"
card-hover:
target: card
state: hover
textDecoration: none
nav-hover:
target: nav
state: hover
textDecoration: none
breakpoints:
- width: 375
containerWidth: 343
gridColumns: 2
navLinksVisible: 4
menuToggleVisible: false
headingPx: 43
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 736
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 46
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 900
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 50
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 900
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 50
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 900
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 50
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 5
gradientsFound: 0
rolesUnassigned: 8
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
The HIT Web Public 2026 design system presents a clean, professional, and accessibility-focused educational interface. The visual personality is minimalist yet warm, prioritizing clarity and legibility for technical documentation and course content. The design emphasizes a light, spacious canvas with deliberate accent colours that guide attention without distraction. The overall mood is approachable and structured, balancing informational density with generous whitespace and a soft, neutral background. The brand's warm orange accent ({colors.link} — #C64B0B) punctuates an otherwise cool, ink-based palette, creating visual hierarchy and encouraging user interaction.
Key Characteristics
{colors.primary} — #172033): Primary text, headings, active states, and brand accent; primary call-to-action fills and emphasis{colors.on-primary} — #FFFFFF): Label text on brand-coloured surfaces; high-contrast overlay text{colors.link} — #C64B0B): Inline links, link text, interactive accent elements, and button fills{colors.link}{colors.canvas} — #F4F7FB): Default page background; light surface for body content{colors.body} — #687188): Body copy text; secondary text colour for reduced emphasis{colors.hairline} — #DFE5F0): 1px borders, dividers, and subtle stroke lines{colors.neutral-1} — #D0D7DE): Secondary neutral for borders and subtle dividers{colors.neutral-2} — #FFF1E8): Light neutral surface, supporting background for secondary content{colors.accent-1} — #24292F): Decorative; code syntax highlighting{colors.accent-2} — #CF222E): Decorative; reserved for future semantic use (e.g. error state if added){colors.accent-3} — #8250DF): Decorative; code or visual accent{colors.accent-4} — #0550AE): Decorative; code or visual accent{colors.accent-5} — #116329): Decorative; code or visual accent{colors.accent-6} — #F36B21): Decorative; warm secondary accentPrimary: Inter
Fallback stack: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
Monospace: ui-monospace
Fallback stack: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Inter | 50px | 700 | 1.08 | -2px | Hero / largest heading; extreme negative tracking |
| Heading Large | Inter | 36px | 700 | 1.15 | -1.26px | Section headings; page title level |
| Heading Medium | Inter | 24px | 700 | 1.72 | 0px | Subsection headers |
| Heading Small | Inter | 21px | 700 | 1.72 | 0px | Secondary headers |
| Heading Extra Small | Inter | 19px | 700 | 1.72 | 0px | Card titles and minor headings |
| Body Large | Inter | 18px | 400 | 1.72 | 0px | Emphasis text or intro copy |
| Body Medium | Inter | 16px | 400 | 1.72 | 0px | Default body copy and prose |
| Body Medium Bold | Inter | 16px | 700 | 1.72 | 0px | Emphasized body text inline |
| Body Medium Extra Bold | Inter | 16px | 800 | 1.72 | 0px | Strong emphasis or accent text |
| Body Small | Inter | 13px | 400 | 1.72 | 0px | Secondary text, metadata |
| Body Small Bold | Inter | 13px | 700 | 1.3 | 0px | Emphasis in compact contexts |
| Button | Inter | 11px | 800 | 1.72 | 0px | Button labels and compact calls-to-action |
| Navigation | Inter | 12px | 650 | 1.3 | 0px | Nav links and navigation items |
| Caption Extra Small | Inter | 10px | 800 | 1.72 | 1px | Tiny labels, badges |
| Caption Extra Small Bold | Inter | 10px | 900 | 1.3 | 0px | Tiny bold labels |
| Caption Small | Inter | 11px | 800 | 1.72 | 1.32px | Small uppercase labels; text-transform uppercase |
| Caption Medium | Inter | 12px | 700 | 1.72 | 0.48px | Medium captions and labels |
| Caption Medium Strong | Inter | 12px | 900 | 1.72 | 0px | Strong captions |
| Code Extra Small | ui-monospace | 13.5px | 400 | 1.6 | 0px | Inline code and small code blocks |
| Code Small | ui-monospace | 14.08px | 400 | 1.4 | 0px | Code block text |
-2px at 50px, -1.26px at 36px) creates visual tightness and brand distinctiveness; this is intentional and maintains readability at large sizes.1.72 across most text roles ensures vertical rhythm and accessibility.1.3) to save space without sacrificing legibility.13.5px, 14.08px) as measured; render as-is for consistent code display.Button — Filled (Small)
#FFF1E8 (light warm neutral){colors.link} — #C64B0B6px 9px1px solid {colors.hairline} (#DFE5F0){rounded.xs} (7px)transform: translateY(-1px) and borderColor: {colors.primary} (#172033)Button — Filled Large
#FFFFFF{colors.link} — #C64B0B7px 13px1px solid {colors.hairline} (#DFE5F0){rounded.xs} (7px)transform: translateY(-1px) and borderColor: {colors.primary} (#172033)Button — Outline (Medium)
transparent (rgba(0, 0, 0, 0)){colors.link} — #C64B0B6px 10px1px solid {colors.hairline} (#DFE5F0){rounded.xs} (7px, ~6px as measured)transform: translateY(-1px) and borderColor: {colors.primary} (#172033)Button — Outline Small
transparent (rgba(0, 0, 0, 0)){colors.body} — #6871886px 9px1px solid {colors.hairline} (#DFE5F0){rounded.xs} (7px, ~6px as measured)transform: translateY(-1px) and borderColor: {colors.primary} (#172033)Card — Default
#FFFFFF{colors.primary} — #1720339px 12px1px solid {colors.hairline} (#DFE5F0){rounded.sm} (8px)borderColor: {colors.link} (#C64B0B)Card — Active / Highlighted
#FFFFFF{colors.primary} — #1720339px 12px1px solid {colors.link} (#C64B0B){rounded.sm} (8px)borderColor: {colors.link} (#C64B0B)Navigation — Default
transparent (rgba(0, 0, 0, 0)){colors.primary} — #172033color: {colors.link} (#C64B0B) and textDecoration: noneNavigation Link — Secondary
transparent{colors.primary} — #172033color: {colors.link} (#C64B0B)Link — Default
{colors.link} — #C64B0BtextDecoration: underlineFooter — Default
transparent (rgba(0, 0, 0, 0)){colors.body} — #68718820px 20px 55px 20pxBase unit: {spacing.xs} = 8px
Full scale:
{spacing.xxs} = 4px (micro-adjustments, code block edges){spacing.xs} = 8px (button padding, tight grouping){spacing.sm} = 12px (card padding, minor spacing){spacing.md} = 16px (standard component padding, default gaps){spacing.lg} = 20px (section headers, moderate separation){spacing.xl} = 24px (footer padding, block separation){spacing.xxl} = 28px (large gaps between sections){spacing.xxxl} = 32px (major spacing, visual breaks){spacing.section} = 40px (section padding and large content breaks){spacing.band} = 56px (hero bands, major visual separators)Usage context:
{spacing.xs} to {spacing.md} for padding.{spacing.sm} to {spacing.md} internally.{spacing.lg} to {spacing.xl} for breathing room.{spacing.section} or {spacing.band}.The system uses generous, predictable whitespace to create visual hierarchy and reduce cognitive load. Spacing between sections follows the scale strictly; no arbitrary gaps exist. Negative space (gaps between cards, sections, and text blocks) is as important as the content itself. The light {colors.canvas} background (#F4F7FB) extends across the entire viewport, creating a unifying, airy feel. Headings are followed by larger gaps than body text, signalling structural importance.
{rounded.xs} = 7px (buttons, compact interactive elements){rounded.sm} = 8px (cards, content containers){rounded.md} = 12px (medium components, larger content areas){rounded.full} = 9999px (circular images, pill-shaped elements)Component-specific radius:
{rounded.xs} (7px) — tight, modern appearance{rounded.sm} (8px) — slightly more rounded than buttons{rounded.full} (9999px) — fully circular or pill-shaped{rounded.md} (12px) — when usedAll borders in this system use a single 1px stroke width for consistency and simplicity.
| Level | Treatment | Use |
|---|---|---|
| Flat (Base) | No shadow; background only | Canvas, content areas, default cards |
| Lifted (Interactive) | Colour block shift or subtle border change | Buttons on hover (yield slight translation); cards on hover (border changes to link colour) |
Shadow Philosophy: This system uses colour-blocking rather than shadow layers to create depth. Visual hierarchy and elevation are communicated through:
translateY(-1px))No box-shadows or layered shadows are present; the design is intentionally flat and accessible, relying on colour and subtle motion for depth cues.
No explicit opacity scale was observed in the component data. Interactive states use solid colours rather than transparency layers. Transparent backgrounds (on buttons and overlays) are rendered as rgba(0, 0, 0, 0) for clarity.
{colors.primary} — #172033) for all headings, body text, and active states to maintain brand consistency.{colors.link} — #C64B0B) to interactive elements (links, buttons, accents) to create clear call-to-action hierarchy.{spacing.xs} (8px) for all padding, margins, and gaps; never introduce arbitrary spacing values.-2px at 50px, -1.26px at 36px); this is intentional brand identity.translateY(-1px) + border colour change to primary) to provide micro-feedback.| Breakpoint | Viewport Width | Content Max Width | Grid Columns | Heading (Display) | Body Text | Section Padding-X | Notes |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 343px | 2 | 43px | 16px | 0px | Narrow layout; 2-column grid |
| Tablet | 768px | 736px | 4 | 46px | 16px | 0px | Medium layout; 4-column grid |
| Desktop | 1024px+ | 900px | 4 | 50px | 16px | 0px | Full layout; content maxes at 900px |
Key observations:
{spacing.md} (16px) to avoid accidental activationsNavigation does not collapse into a menu at any breakpoint. All navigation links remain visible. If mobile hamburger navigation is needed in the future, it should be added as a new responsive pattern, not derived from the current extraction.
{colors.primary} — #172033){colors.link} — #C64B0B){colors.canvas} — #F4F7FB){colors.body} — #687188){colors.hairline} — #DFE5F0){colors.on-primary} — #FFFFFF)Start with the spacing scale. All padding, margins, and gaps must be multiples of 8px ({spacing.xs}). Never introduce arbitrary pixel values.
Apply negative letter-spacing to display text only. Headings at 50px use -2px; 36px use -1.26px; all smaller text is 0px (letter-spacing).
Use the primary colour (#172033) for text and the link colour (#C64B0B) for interactive elements. This single pairing drives 90% of the visual hierarchy.
Border radius is component-specific. Buttons use 7px; cards use 8px. Don't apply 12px to buttons or vice versa.
All borders are 1px. No thick strokes; consistency is key.
Elevation comes from colour, not shadows. On hover, change the border colour to primary or translate slightly up. Never add drop-shadow.
Keep the canvas light (#F4F7FB) and content white. This contrast creates visual structure without shadows.
Line-height is 1.72 for most text, 1.3 for navigation and captions. This is not negotiable; it affects readability and vertical rhythm.
Buttons move up 1px on hover (translateY(-1px)) and their border shifts to primary colour. This provides micro-feedback without overwhelming the interface.
Navigation remains visible at all breakpoints. If a menu toggle is needed, add it as a new variant, not as a responsive collapse of the existing nav.
No semantic colour ramp. The site does not expose error, success, warning, or info states. The 6 decorative accent colours (#24292F, #CF222E, #8250DF, #0550AE, #116329, #F36B21) have no assigned roles and should be used for future semantic states or code syntax highlighting only.
No explicit shadow strategy. The extraction found no box-shadow values on any component; the system uses colour-blocking exclusively. If shadows are added in the future, no template exists in the measured data.
Interaction states are minimal. Only hover states for links (underline), buttons (translate + border change), cards (border change), and navigation (colour change) were observed. Focus states (keyboard navigation), active states (pressed buttons), and disabled states were not measured. These should be inferred from the hover logic or explicitly designed if the site adds form validation or multi-step flows.
No dark mode observed. The extraction captured only the light theme; a dark mode variant, if it exists, was not measured.
Opacity scale not explicit. Transparent backgrounds are rendered as rgba(0, 0, 0, 0), but no opacity values (0.5, 0.7, etc.) were captured for overlays or disabled states. If transparency becomes necessary, it should be added as an explicit scale (e.g. opacity: 0.5 for disabled, opacity: 0.8 for overlays).
Z-index scale is minimal. Only dropdown (90) and sticky (100) were observed. Modals, toasts, and popovers have no measured z-index and should use values > 100 if added.
Gradient or decorative mesh patterns not present. All backgrounds are solid colours; no gradients, patterns, or textured fills were observed.
Mobile touch target audit incomplete. Buttons measure ~30px at small sizes; accessibility best practice recommends 44px minimum. If mobile is a priority, button and card sizing should be reviewed and increased.
One page analysed. The extraction covered the Week 7 course landing page. Other pages in the HIT Web Public 2026 series may have different or extended component patterns not captured here. Surfaces behind authentication were not visited.
No form input variants captured. Text fields, checkboxes, radio buttons, and other form controls were not visible on the analysed page. If forms are added, input styling should be designed using the colour palette and spacing scale as a guide.
Monospace font size precision. Code typography uses fractional pixel values (13.5px, 14.08px); these should render as specified. Browser rounding may introduce 1–2px variance; monitor rendering on deployment.