Phạm Thiện Bảo

Generated Oct 17, 2026

DESIGN.md for bootstrapmade.com

bootstrapmade.com/demo/College16 colors6 componentsRaleway + Roboto

Remix

12 screenshots captured· bootstrapmade.com

1 / 12 · College Bootstrap Template Demo · Above the fold

Preview

the generated design system

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

Design tokens

version: alpha
name: Bootstrapmade
description: |
  The College Bootstrap template embodies a modern, professional aesthetic
  tailored for educational institutions. The design balances contemporary
  simplicity with institutional authority, employing a sophisticated two-tone
  palette anchored by deep navy blues and crisp whites. The atmosphere is
  aspirational yet trustworthy—intended to inspire prospective students while
  conveying academic rigor and institutional excellence. Rich photographic
  imagery (campus facilities, architecture) grounds the design in reality, while
  geometric gradients and layered depth effects add visual sophistication
  without overwhelming the content. Typography is clean and legible,
  prioritizing clarity and hierarchy. The overall mood is corporate-professional
  with humanistic warmth—designed to appeal to both students and parents seeking
  credible educational pathways.
source:
  url: "https://bootstrapmade.com/demo/College/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-17
  tokensMeasured: true
colors:
  primary: "#009BD9"
  accent: "#023B6D"
  link: "#034B8B"
  canvas: "#000000"
  surface: "#FFFFFF"
  surface-alt: "#F1F5F7"
  on-primary: "#FFFFFF"
  ink: "#FFFFFF"
  body: "#9AA0A6"
  muted: "#555555"
  faint: "#444444"
  accent-1: "#011E2C"
  accent-2: "#04415F"
  accent-3: "#FFC107"
  accent-4: "#98A2B3"
  accent-5: "#0471D1"
  neutral-1: "#CFD4E4"
  neutral-2: "#777777"
typography:
  display-lg:
    fontFamily: Raleway
    fontSize: 51.2px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0px
  display-md:
    fontFamily: Raleway
    fontSize: 44px
    fontWeight: 800
    lineHeight: 1.2
    letterSpacing: 0px
  display-sm:
    fontFamily: Raleway
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xxl:
    fontFamily: Raleway
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xl:
    fontFamily: Roboto
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
  heading-lg:
    fontFamily: Raleway
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: Roboto
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: Roboto
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  body-lg:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: Roboto
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-sm:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-sm-loose:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-xs:
    fontFamily: Roboto
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0px
  body-xs-strong:
    fontFamily: -apple-system
    fontSize: 13px
    fontWeight: 700
    letterSpacing: 0px
    textTransform: uppercase
  nav:
    fontFamily: Poppins
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-md:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-sm:
    fontFamily: Roboto
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0px
  caption-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.3px
  caption-sm-strong:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  caption-xs:
    fontFamily: Poppins
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0.5px
    textTransform: uppercase
rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 10px
  lg: 12px
  xl: 15px
  xxl: 16px
  r-20: 20px
  r-24: 24px
  r-25: 25px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 52px
borderWidths:
  thin: 1px
  medium: 2px
shadows:
  sm: "rgba(0, 0, 0, 0.06) 0px 10px 30px 0px"
  md: "rgba(0, 0, 0, 0.1) 0px 15px 40px 0px"
  lg: "rgba(0, 0, 0, 0.05) 0px 5px 15px 0px"
  xl: "rgba(0, 0, 0, 0.15) 0px 15px 40px 0px"
elevationStrategy: progressive
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F8FCFE"
    surface: "#EEF2F4"
    surfaceRaised: "#E7EAEC"
    text: "#10181B"
    textMuted: "#676E6F"
    border: "#D5D9DA"
    accent: "#006F9C"
    accentFg: "#FFFFFF"
    focusRing: "#009BD9"
    elevation: shadow
  dark:
    bg: "#000000"
    surface: "#FFFFFF"
    surfaceRaised: "#FFFFFF"
    text: "#FFFFFF"
    textMuted: "#9AA0A6"
    border: "#1F1F1F"
    accent: "#009BD9"
    accentFg: "#0B0B0C"
    focusRing: "#009BD9"
    elevation: "border+surface"
  contrastFailures:
    - "dark: text on surface = 1:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(2, 59, 109) 0px, rgb(1, 37, 69) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(255, 255, 255) 0%, color(srgb 0.980314 0.985098 0.987451) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, color(srgb 0.970471 0.977647 0.981176) 0%, rgb(255, 255, 255) 100%)"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(4, 65, 95), color(srgb 0.0133333 0.216667 0.316667))"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4))"
  - context: section
    kind: linear
    value: "linear-gradient(135deg, rgb(1, 30, 44), rgb(4, 65, 95))"
components:
  button-filled:
    typography: "{typography.body-xs-strong}"
    textColor: "{colors.ink}"
    height: 32px
    padding: "0px 16px 0px 16px"
    backgroundColor: "rgb(0, 166, 235)"
  button-filled-lg:
    typography: "{typography.button-sm}"
    textColor: "{colors.ink}"
    height: 40px
    padding: "11px 28px 11px 28px"
    rounded: 50px
    backgroundColor: "rgb(0, 197, 96)"
  button-outline:
    typography: "{typography.body-sm-loose}"
    textColor: "{colors.accent}"
    border: "1px solid {colors.neutral-1}"
    height: 39px
    padding: "8px 26px 8px 26px"
    rounded: 50px
  button-icon:
    typography: "{typography.body-lg}"
    textColor: "{colors.accent-5}"
    height: 36px
    rounded: "50%"
  button-icon-sm:
    typography: "{typography.body-lg}"
    textColor: "{colors.canvas}"
    height: 24px
  button-primary:
    typography: "{typography.body-sm-loose}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"
    height: 43px
    padding: "10px 5px 10px 5px"
    rounded: 50px
    backgroundColor: "{colors.primary}"
  link:
    textColor: "rgb(0, 0, 238)"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
  link-lg:
    textColor: "{colors.ink}"
    padding: "5px 5px 5px 5px"
    fontSize: 16px
    fontFamily: -apple-system
    fontWeight: 400
  card-featured:
    typography: "{typography.body-lg}"
    textColor: "{colors.faint}"
    border: "1px solid rgb(237, 238, 240)"
    rounded: "{rounded.md}"
    backgroundColor: "{colors.surface}"
  card-featured-sm:
    typography: "{typography.body-lg}"
    textColor: "rgb(1, 6, 8)"
    padding: "32px 32px 32px 32px"
    boxShadow: "rgba(0, 0, 0, 0.06) 0px 10px 30px 0px"
    rounded: "{rounded.xl}"
    backgroundColor: "{colors.surface}"
  badge-filled:
    typography: "{typography.caption-xs}"
    textColor: "{colors.ink}"
    height: 23.3906px
    padding: "4px 12px 4px 12px"
    rounded: 50px
    backgroundColor: "rgb(231, 76, 60)"
  badge-filled-lg:
    textColor: "{colors.ink}"
    height: 55.1875px
    padding: "12px 20px 12px 20px"
    fontSize: 16px
    boxShadow: "rgba(0, 0, 0, 0.1) 0px 8px 15px 0px"
    fontFamily: Roboto
    fontWeight: 600
    lineHeight: 1.5
    rounded: 50px
    backgroundColor: "{colors.accent-2}"
  badge-text:
    textColor: "{colors.ink}"
    height: 35.1875px
    padding: "8px 16px 8px 16px"
    fontSize: 12.8px
    boxShadow: "color(srgb 0.0156863 0.254902 0.372549 / 0.4) 0px 4px 15px 0px"
    fontFamily: Roboto
    fontWeight: 600
    lineHeight: 1.5
    rounded: "{rounded.r-25}"
  navigation:
    typography: "{typography.body-lg}"
    textColor: "{colors.faint}"
    height: 44px
  navigation-lg:
    typography: "{typography.body-lg}"
    textColor: "{colors.ink}"
    height: 60px
  footer:
    typography: "{typography.body-lg}"
    textColor: "{colors.faint}"
  footer-sm:
    typography: "{typography.body-sm-loose}"
    textColor: "rgb(1, 6, 8)"
    backgroundColor: "rgb(230, 237, 240)"
states:
  link-hover:
    target: link
    state: hover
    textColor: "{colors.ink}"
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgb(0, 180, 255)"
  link-focus:
    target: link
    state: focus
    textColor: "{colors.accent}"
  nav-hover:
    target: nav
    state: hover
    textColor: "{colors.primary}"
  card-hover:
    target: card
    state: hover
    textColor: "{colors.primary}"
  card-focus-visible:
    target: card
    state: focus-visible
    outline: "{colors.primary} solid 2px"
    outlineColor: "{colors.primary}"
    outlineWidth: 2px
  input-focus:
    target: input
    state: focus
    boxShadow: "rgba(0, 155, 217, 0.25) 0px 0px 0px 0.25rem"
  input-hover:
    target: input
    state: hover
    boxShadow: "rgba(2, 59, 109, 0.15) 0px 0px 10px 0px"
    borderColor: "rgba(2, 59, 109, 0.3)"
    borderWidth: 1px
  button-hover:
    target: button
    state: hover
    textColor: "{colors.accent}"
  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)"
  other-disabled:
    target: other
    state: disabled
    opacity: 1
  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: 375
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 0
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 0
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 96
  gradientsFound: 7
  rolesUnassigned: 7
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: true
  semanticRampDeclared: false

Design System Inspired by BootstrapMade College

1. Visual Theme & Atmosphere

The College Bootstrap template embodies a modern, professional aesthetic tailored for educational institutions. The design balances contemporary simplicity with institutional authority, employing a sophisticated two-tone palette anchored by deep navy blues and crisp whites. The atmosphere is aspirational yet trustworthy—intended to inspire prospective students while conveying academic rigor and institutional excellence. Rich photographic imagery (campus facilities, architecture) grounds the design in reality, while geometric gradients and layered depth effects add visual sophistication without overwhelming the content. Typography is clean and legible, prioritizing clarity and hierarchy. The overall mood is corporate-professional with humanistic warmth—designed to appeal to both students and parents seeking credible educational pathways.

Key Characteristics:

Deep navy and teal brand palette with white and neutral grounds
Generous whitespace and breathing room between content sections
Progressive depth through layered shadows and colour gradients
Large, bold display typography for statements and headlines
Functional, rounded interactive elements (pill-shaped buttons)
Professional photography as a key atmospheric element
Accessible contrast ratios maintained throughout
Academic and aspirational tone without excessive ornamentation

2. Color Palette & Roles

Primary

Primary Accent ({colors.primary} — #009BD9): Primary call-to-action buttons, brand accent links, active states, and hero accents. The dominant brand colour representing trust and forward momentum.
Accent Secondary ({colors.accent} — #023B6D): Secondary accent in hero bands, section backgrounds, and decorative gradients. Deep navy conveying stability and institutional gravitas.
Link ({colors.link} — #034B8B): Inline link colour, slightly warmer than secondary accent, for navigation and cross-page references.

Surface & Backgrounds

Canvas ({colors.canvas} — #000000): Default page background (typically overridden by gradient or image overlays).
Surface ({colors.surface} — #FFFFFF): Card backgrounds, panels, and primary content containers. Used as the default ink colour for headings and labels on brand surfaces.
Surface Alt ({colors.surface-alt} — #F1F5F7): Alternating section band background, providing visual separation without high contrast.

Neutral Scale

Body ({colors.body} — #9AA0A6): Body copy and regular text, mid-grey for comfortable reading.
Muted ({colors.muted} — #555555): Secondary text, captions, and auxiliary information.
Faint ({colors.faint} — #444444): Tertiary text and placeholder copy.

Decorative Accents (No measured role)

Accent 1 ({colors.accent-1} — #011E2C): Decorative; used in gradient backgrounds and thematic elements.
Accent 2 ({colors.accent-2} — #04415F): Decorative; employed in hero gradients and section overlays.
Accent 3 ({colors.accent-3} — #FFC107): Decorative; warmth accent for highlights or badges (rare use).
Accent 4 ({colors.accent-4} — #98A2B3): Decorative; neutral grey-blue for borders or muted elements.
Accent 5 ({colors.accent-5} — #0471D1): Decorative; alternative blue shade, context-dependent.

Neutral Supporting (No measured role)

Neutral 1 ({colors.neutral-1} — #CFD4E4): Light neutral, likely for borders or faint dividers.
Neutral 2 ({colors.neutral-2} — #777777): Mid-neutral grey for secondary UI elements.

3. Typography Rules

Font Family

Primary Display & Headings: Raleway (font-family: Raleway, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)

A geometric sans-serif with high contrast and distinctive letterforms. Used for all display and heading scales.

Secondary & Body: Roboto (font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)

Neutral humanist sans-serif with excellent legibility at body sizes. Primary workhorse for body, navigation, and interface text.

UI & Labels: Poppins & System Stack (font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif)

Used for captions and small UI labels where warmth and personality are desired.

Fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif across all font families.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Raleway	51.2px	800	1.2	0px	Hero statements, largest display sizes
Display Medium	Raleway	44px	800	1.2	0px	Secondary display, featured headings
Display Small	Raleway	40px	700	1.2	0px	Decorative display, thematic intro
Heading XXL	Raleway	36px	700	1.2	0px	Major section heading
Heading XL	Raleway	24px	600	1.33	0px	Page section heading, prominent
Heading Large	Raleway	20px	700	1.2	0px	Subsection heading
Heading Medium	Roboto	18px	600	1.2	0px	Card title, featured content heading
Heading Small	Roboto	16px	500	1.2	0px	Minor section title
Heading XS	Roboto	15px	600	1.2	0px	Small interactive heading
Body Large	Roboto	16px	400	1.5	0px	Lead paragraph, intro text
Body Medium	Roboto	15px	400	1.55	0px	Default body copy
Body Small	Roboto	14px	400	1.3	0px	Secondary body, list items
Body Small Loose	Roboto	14px	400	1.5	0px–0.3px	Navigation links, button text in some contexts
Body XS	Roboto	13px	400	1	0px	Fine print, meta information
Button Medium	Roboto	16px	500	1.5	0px	Standard button text
Button Small	Roboto	15px	600	1	0px	Compact button labels
Caption Small	Roboto	12px	400–500	1.3–1.5	0px–0.3px	Image captions, metadata
Caption XS	Poppins	11px	700	1.4	0.5px	Uppercase label, badge, accent caption
Body XS Strong	System	13px	700	—	0px	Uppercase link, small CTA

Principles

Display hierarchy: Raleway carries the visual weight for large statements and headlines, creating memorable first impressions through its distinctive geometric form.
Readability priority: Body and interface text default to Roboto for neutral legibility, especially at smaller sizes where geometric typefaces become hard to parse.
Tracking consistency: Letter-spacing remains at 0px for most roles, with selective 0.3–0.5px applied to uppercase labels and captions for breath and sophistication.
Line-height scaling: Larger text (body) uses 1.5+ line-height for breathing room; smaller text and headings compress to 1.2–1.3 for visual cohesion.
Weight contrast: Bold weights (600–800) are reserved for headings and CTAs; body text sits at 400, creating clear hierarchy without overuse of weight.

4. Component Stylings

Buttons

Primary Button (Filled)

Font: {typography.button-sm} (15px, weight 600)
Background: {colors.primary} (#009BD9)
Text Color: {colors.surface} (#FFFFFF)
Padding: 0px 28px
Height: 40px
Border Radius: {rounded.full} (50px / pill-shaped)
Border: None
Box Shadow: None
Hover State: Background becomes #00B4FF; box-shadow rgba(0, 155, 217, 0.3) 0px 6px 15px 0px

Secondary Button (Outline)

Font: {typography.body-sm-loose} (14px, weight 400)
Background: Transparent
Text Color: {colors.accent} (#023B6D)
Padding: 8px 26px
Height: 39px
Border: 1px solid {colors.neutral-1} (#CFD4E4)
Border Radius: {rounded.full} (50px)
Hover State: Text color becomes {colors.primary} (#009BD9); border becomes {colors.primary}

Ghost Button (Icon)

Font: {typography.body-md} (16px, weight 400)
Background: Transparent
Text Color: {colors.accent-5} (#0471D1)
Padding: 0px
Height: 36px
Width: 36px
Border Radius: {rounded.full} (50%)
Border: None
Hover State: No explicit state change; used for supplementary actions

Cards & Containers

Featured Card (Large)

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.muted} (#555555)
Padding: 0px (image-driven layout)
Border: 1px solid light grey (#EDEEF0)
Border Radius: {rounded.md} (10px)
Box Shadow: None
Font: {typography.body-lg} (16px, weight 400)

Featured Card Small

Background: {colors.surface} (#FFFFFF)
Text Color: {colors.accent-1} (#011E2C)
Padding: {spacing.xl} (24px, all sides)
Border: None
Border Radius: {rounded.xl} (15px)
Box Shadow: rgba(0, 0, 0, 0.06) 0px 10px 30px 0px
Font: {typography.body-lg} (16px, weight 400)
Hover State: Box-shadow upgrades to rgba(0, 155, 217, 0.12) 0px 4px 14px; border-color becomes {colors.primary}; text accent shifts to {colors.primary}

Inputs & Forms

Input (Text Field)

Font: {typography.body-lg} (16px, weight 400)
Background: {colors.surface} (#FFFFFF)
Text Color: {colors.muted} (#555555)
Padding: {spacing.md} (16px) vertically; varies horizontally
Border: 1px solid ({colors.neutral-1} or lighter)
Border Radius: Varies by context (typically 0px or {rounded.sm} 8px)
Focus State: Border-color becomes {colors.primary} (#009BD9); box-shadow rgba(0, 155, 217, 0.25) 0px 0px 0px 0.25rem
Hover State: Border-color softens to rgba(2, 59, 109, 0.3); box-shadow faint rgba(2, 59, 109, 0.15) 0px 0px 10px 0px
Disabled State: Opacity 0.65; background becomes muted surface

Navigation

Navigation Links (Default)

Font: {typography.nav} (16px, weight 400)
Text Color: {colors.muted} (#555555)
Background: Transparent
Padding: 0px (text-only)
Border: None
Hover State: Text color becomes {colors.primary} (#009BD9); opacity reaches 1
Active State: Text color {colors.primary}

Navigation Links (Dark/Inverse)

Font: {typography.nav} (16px, weight 400)
Text Color: {colors.surface} (#FFFFFF)
Background: Transparent
Hover State: Text color remains white; text-decoration none; optional background lift

Badges

Filled Badge

Font: {typography.caption-xs} (11px, weight 700, uppercase)
Background: #E74C3C (red, decorative)
Text Color: {colors.surface} (#FFFFFF)
Padding: 4px 12px
Border Radius: {rounded.full} (50px)
Box Shadow: None

Filled Badge Large

Font: {typography.body-md} (16px, weight 600)
Background: {colors.accent-2} (#04415F)
Text Color: {colors.surface} (#FFFFFF)
Padding: 12px 20px
Border Radius: {rounded.full} (50px)
Box Shadow: rgba(0, 0, 0, 0.1) 0px 8px 15px 0px

Text Badge

Font: {typography.caption-sm-strong} (12.8px, weight 600)
Background: Transparent
Text Color: {colors.surface} (#FFFFFF)
Padding: 8px 16px
Border Radius: {rounded.r-25} (25px)
Box Shadow: color(srgb 0.0156863 0.254902 0.372549 / 0.4) 0px 4px 15px 0px

5. Layout Principles

Spacing System

The system employs a base unit of 4px, scaling exponentially for layouts and sections:

{spacing.xxs} = 4px — Micro-gaps between adjacent UI elements
{spacing.xs} = 8px — Tight spacing within button groups or icon pairs
{spacing.sm} = 12px — Small internal padding (inputs, compact cards)
{spacing.md} = 16px — Default padding for cards, fields, and standard blocks
{spacing.lg} = 20px — Generous internal spacing for breathing room
{spacing.xl} = 24px — Card padding, section margins (medium scale)
{spacing.xxl} = 32px — Between major content blocks
{spacing.xxxl} = 40px — Large margin between sections
{spacing.section} = 48px — Primary section vertical padding
{spacing.band} = 52px — Full-width band vertical padding

Usage Context:

Micro interactions: {spacing.xxs}–{spacing.xs} for icon-to-text, badge spacing.
Component internals: {spacing.sm}–{spacing.md} for button padding, input fields.
Card/container padding: {spacing.xl}–{spacing.xxl} for standard cards and panels.
Section separation: {spacing.section}–{spacing.band} for vertical rhythm between hero, feature blocks, and footer.

Grid & Container

Max-width: 1440px (observed full-width breakpoint)
Column strategy: Fluid, responsive layout with no fixed column count. Mobile (375px) and tablet (768px) collapse to single column; desktop (1024px+) expands to multi-column content grids.
Section patterns: Full-width coloured bands alternate with white/neutral sections. Hero band spans viewport; content sections contain padding-left/right of {spacing.md} (16px) at mobile, increasing with viewport.
Responsive container padding: 16px at all breakpoints (observed), suggesting a fixed gutter width rather than scaling percentage.

Whitespace Philosophy

The design prioritizes generous breathing room over compact density. Sections are separated by {spacing.section} or {spacing.band} of vertical space, allowing the eye to rest and content to be scannable. Cards sit within this open space, using {spacing.xl} internal padding to further reduce visual weight. Typography is set with high line-heights (1.5+), and paragraph margins are maintained throughout, reinforcing a calm, spacious reading experience. This approach signals premium quality and institutional confidence—information is not cramped, but rather presented with respect for the reader's time and attention.

Border Radius Scale

The system employs a graduated radius scale applied consistently to component types:

{rounded.none} = 0px — Images, hero sections, sharp-edged blocks
{rounded.xs} = 6px — Fine-tuned component corners, subtle softening
{rounded.sm} = 8px — Inputs, small interactive surfaces
{rounded.md} = 10px — Cards and standard containers
{rounded.lg} = 12px — Alternative container radius
{rounded.xl} = 15px — Featured small cards, prominent panels
{rounded.xxl} = 16px — Large button alternatives, modal radius
{rounded.r-20} = 20px — Section-level radius, generous rounding
{rounded.r-24} = 24px — Extra-generous container radius
{rounded.r-25} = 25px — Pill-shaped buttons, badge corners
{rounded.full} = 9999px — Perfect circles (icon buttons), fully rounded pills (primary CTAs)

Component mapping:

Buttons (primary/secondary): {rounded.full} (50px pill)
Cards: {rounded.md} (10px) to {rounded.xl} (15px)
Images: {rounded.none} (0px, sharp)
Modals: {rounded.full} (9999px edge-to-edge curve)
Inputs: {rounded.sm} (8px) or context-specific

Border Widths

Thin (1px) — Used for inputs, card borders, and hairline dividers. Provides subtle definition without visual weight.
Medium (2px) — Applied to button outlines and accent borders where emphasis is needed. Rarely used; most interactive elements favour thicker fills over strokes.

6. Depth & Elevation

The elevation system employs progressive shadows with increasing opacity and blur to signal layering and interactivity. Depth is achieved through both shadows and colour-blocking (solid backgrounds on top of gradients), creating a subtle but effective spatial hierarchy.

Level	Treatment	Use
Flat (0)	No shadow; solid colour fill	Buttons with filled backgrounds; cards at rest on neutral surface
Lifted (sm)	`rgba(0, 0, 0, 0.06) 0px 10px 30px 0px`	Featured small cards, default card elevation
Raised (md)	`rgba(0, 0, 0, 0.1) 0px 15px 40px 0px`	Stacked cards, hover states on prominent surfaces
Subtle (lg)	`rgba(0, 0, 0, 0.05) 0px 5px 15px 0px`	Light elevation, fine shadow for soft depth
Heavy (xl)	`rgba(0, 0, 0, 0.15) 0px 15px 40px 0px`	Modal overlays, deep layering on hero backgrounds

Shadow Philosophy: The system avoids harsh, high-contrast shadows in favour of soft, diffused depth. All shadows use true black (rgba(0, 0, 0, ...)) with low opacity, creating a frosted-glass effect rather than hard drop-shadows. This reinforces the modern, premium aesthetic. Hover states upgrade shadows incrementally (e.g., card lifted → raised on hover), signalling interactivity through progressive depth shift rather than colour change alone.

Opacity Levels

The system employs selective opacity values to modulate visual prominence and disabled states:

98% (0.98) — Near-opaque surfaces with minimal transparency; used for subtle overlays or badge backgrounds.
84% (0.84) — Slightly transparent overlays, text on semi-opaque backgrounds.
80% (0.80) — Moderate transparency for hover states or secondary overlays.
65% (0.65) — Disabled button/input state; reduced prominence.
64% (0.64) — Alternative transparency value for hover effects.
33% (0.33) — Low-opacity overlays, very subtle background tints.

Usage:

Disabled states: opacity: 0.65
Hover overlays (non-interactive): opacity: 0.33–0.65
Icon/text secondary prominence: opacity: 0.8–0.84
Modal/video overlays: opacity: 0.33–0.65 depending on depth required

Z-index / Layering

The system defines a consistent stacking order to manage overlapping surfaces:

Base (z-index: 1–2) — Content, cards, standard page elements
Dropdown (z-index: 10–11) — Dropdown menus, popover tooltips
Sticky (z-index: 997) — Sticky headers, fixed navigation bars
Modal (z-index: 9999) — Modal dialogs, full-screen overlays
Toast (z-index: 99997) — Notifications, alerts, toast messages

This tiered approach ensures that modals always sit above sticky headers, toasts float above all other content, and standard UI elements layer predictably without collision. Dropdowns sit above content but below modals, supporting expected UX patterns.

7. Do's and Don'ts

Do

Use the primary accent ({colors.primary} #009BD9) for all primary calls to action, ensuring immediate visual clarity and brand recognition.
Maintain generous whitespace between sections ({spacing.section} or {spacing.band}). The design breathes; crowding signals poor quality.
Stack shadows progressively when layering elements. Start with sm, upgrade to md or lg on hover to signal interactivity.
Employ Raleway for display sizes (36px and above) to capture attention; reserve Roboto for body and interface text for legibility.
Pair pill-shaped buttons ({rounded.full}) with solid fills and hover transitions that adjust shadow and colour, not just outline.
Use alternating section backgrounds ({colors.surface} and {colors.surface-alt}) to create visual rhythm without adding decoration.
Apply consistent padding ({spacing.md} at mobile, scaling up) to all content sections to maintain alignment and breathing room.
Leverage badge styling sparingly for accent labels, notifications, or status indicators. Use {rounded.full} and uppercase typography for maximum impact.
Test all interactive states (hover, focus, active, disabled) at both mobile and desktop to ensure consistency and accessibility.

Don't

Do NOT use harsh, high-contrast shadows. All shadows should be soft and diffused, using opacity ranges of 0.05–0.15 on true black.
Do NOT mix button radiuses. Primary CTAs are always {rounded.full} (pill); secondary buttons follow the same pattern. Do not switch to sharp corners mid-layout.
Do NOT apply colour to neutral elements. Body text is {colors.body} (#9AA0A6); muted text is {colors.muted} (#555555). Do not tint greyed text with brand colour unless it is a link or interactive element.
Do NOT set line-height below 1.2 for headings. The system's display and heading text relies on 1.2–1.33 line-height for readability and visual balance.
Do NOT override the Raleway/Roboto hierarchy. If you introduce a different font for body or heading, the system breaks. Stick to the provided stacks.
Do NOT crowd cards or sections. Padding should never compress below {spacing.md} inside cards. Whitespace is a design feature, not wasted space.
Do NOT stack modals. Modals sit at z-index: 9999; only one should be visible at a time. Avoid nested dialogs.
Do NOT disable buttons with colour change alone. Use opacity reduction (0.65) combined with pointer-events: none and cursor: not-allowed for clear disabled indication.
Do NOT use decorative accent colours ({colors.accent-1} through {colors.accent-5}) in primary UI elements. They are reserved for thematic backgrounds, gradients, and non-functional decoration.

8. Responsive Behavior

Breakpoints

Viewport Width	Scope	Grid Columns	Nav Links Visible	Menu Toggle	Section Padding-X	Key Changes
375px (Mobile)	Small smartphone	1	0	No	16px	Single-column layout; display heading scales down; navigation collapses to hidden state
768px (Tablet)	iPad, small tablet	1	0	No	16px	Single-column maintained; body text remains readable; card widths expand to fill container
1024px (Desktop)	Large tablet, laptop	1+	Multi	No	16px	Multi-column grids become viable; heading sizes scale up; navigation may expand (not measured in data)
1280px (Large Desktop)	Desktop, monitor	1+	Multi	No	16px	Wider content lanes; images gain room to breathe; margins may increase
1440px (XL Desktop)	Full width	1+	Multi	No	16px	Max-width container active; content is centered; section margins reach full scale

Observation: The extraction measured fixed {spacing.md} (16px) section padding across all breakpoints, indicating a consistent left/right gutter regardless of viewport. This is unusual but intentional—the design prioritizes uniform breathing room over scaling margins.

Touch Targets

Minimum interactive size: 36px × 36px for touch-friendly buttons and icon buttons (observed icon button dimensions).
Button height: 40px for primary buttons ({typography.button-sm} at 15px inside), 39px for secondary buttons, allowing comfortable tap zones.
Link and navigation items: 16px font on a 24px line-height ensures sufficient tap area even without explicit padding.
Form inputs: Minimum 39–40px height to accommodate both keyboard and touch interaction.

Collapsing Strategy

Mobile-first expansion: Layouts start as single-column at 375px and gain multi-column capabilities as viewport width increases.
Typography scaling: Display heading sizes remain fixed until reaching tablet+ breakpoints, at which point they scale up (measured at fixed px values in extraction, suggesting breakpoint-based media queries exist but were not fully extracted).
Navigation collapse: Menu links are not visible at small viewports; the presence of a "menu toggle" signal suggests a hamburger/mobile menu pattern, though the actual toggle element was not measured.
Card stacking: Cards stack vertically on mobile, then reflow into grids on tablet/desktop. No fixed column count was measured; layout is fluid.
Section full-bleed: Full-width coloured bands remain full-bleed across all breakpoints; only content inside has side padding.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Brand Accent: Primary (#009BD9) — use for "Start Your Journey", main buttons, and brand mark visibility.
Secondary Accent / Hero Band: Accent (#023B6D) — use for section backgrounds, gradient overlays, and institutional depth.
Inline Links: Link (#034B8B) — use for text hyperlinks, "Read More", and cross-references.
Default Page Background: Canvas (#000000) — rarely visible; typically covered by gradient or image overlays.
Card/Panel Background: Surface (#FFFFFF) — primary container for content cards, modals, and form surfaces.
Alternating Section Band: Surface Alt (#F1F5F7) — use to break up visual monotony between full-width content sections.
Body Copy & Secondary Text: Body (#9AA0A6) — standard text colour for paragraphs, labels, and descriptive content.
Captions & Tertiary Text: Muted (#555555) — fine print, metadata, and less prominent information.

Implementation Priority

Establish the colour foundation: Apply {colors.primary} and {colors.accent} to all interactive and brand-critical elements first. Set {colors.surface} as the default container background.
Set typography baseline: Apply Raleway for all display/heading roles (36px+), Roboto for body/interface (11–20px). Ensure line-height matches the hierarchy table exactly.
Define button pattern: Primary buttons are always {rounded.full}, Roboto {typography.button-md} (16px, weight 600), background {colors.primary}, with 40px height. Secondary buttons are outline style with the same radius.
Build shadow ladder: Implement the four shadow levels (sm, md, lg, xl) for cards and lifted elements. Use rgba(0, 0, 0, 0.06–0.15) for all shadows; avoid black with high opacity.
Apply spacing system: Use {spacing.md} (16px) as base padding inside cards. Use {spacing.section} (48px) or {spacing.band} (52px) between full-width sections. Never compress padding below {spacing.sm} (12px).
Verify responsive collapse points: Test at 375px, 768px, 1024px, and 1440px. Confirm single-column at mobile, multi-column at 1024px+. Section padding remains 16px at all breakpoints.
Test interactive states: Hover, focus, active, and disabled states must be present on all buttons and inputs. Link hover should shift to #00B4FF (observed hover state). Input focus should add rgba(0, 155, 217, 0.25) 0px 0px 0px 0.25rem box-shadow.
Audit accessibility: Ensure all text meets WCAG AA contrast (body text on white, heading text on coloured backgrounds, etc.). Links must be distinguishable from surrounding text.

10. Known Gaps

Interaction states on non-button elements: The extraction includes hover/focus/active styles for buttons, inputs, links, and cards. However, interaction states for other components (badges, tabs, modals, dropdowns) were not fully measured and may require additional specification.
Error / Success / Warning semantic colours: The site does not declare or measure error, success, or warning status colours in its stylesheet. If semantic colour roles are needed, they must be designed and added separately; do not assume the accent palette provides this ramp.
Dark mode or theme variants: The extraction covers only the light theme. No dark-mode stylesheet was found, nor was a derived dark-mode theme indicated in the token data. Assume single-light-theme design.
Animation / transition timing: No CSS animation durations, easing functions, or transition timings were measured. The design system is static; motion design is not documented.
Unassigned decorative colours: Seven colours ({colors.accent-1} through {colors.accent-5}, {colors.neutral-1}, {colors.neutral-2}) have no measured semantic role and are documented as decorative. Their exact usage contexts may vary; rely on context-specific application rather than a predetermined role.
Typography at breakpoints: While font sizes are fixed in the extraction (no responsive typography values were found), the responsive behaviour table suggests heading sizes should scale across breakpoints. Media-query breakpoints for typography likely exist in the compiled stylesheet but were not individually extracted.
Border-radius context specificity: The extraction lists which component roles measured each radius value (e.g., "card: 10px", "button: 25px"). However, the exact application of radius to variant states (e.g., card hover, button disabled) was not individually recorded; assume primary states are the template.
Surfaces behind authentication: The extraction covered 6 public pages. Any login-required pages, account dashboards, or member-only content are outside the extraction scope and their design system may differ.
Cross-origin stylesheet data: Some stylesheets may have been marked cross-origin and unreadable by the extraction tool, meaning rare or context-specific CSS properties may not be represented. The core design system is captured; edge cases may exist.
Z-index collision detection: The z-index stacking order is specified. However, edge cases (e.g., sticky header inside a modal, nested dropdowns) were not tested and may require manual reconciliation.

Document Version: 1.0
Template: College Bootstrap Education Template
Extraction Date: March 2025
Pages Analyzed: 6 (public demo pages; authentication-required surfaces not included)
Confidence: High for core UI components and typography; medium for animation, dark mode, and edge-case interaction states.

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

Design tokens

Extracted from bootstrapmade.com/demo/College

Primary

#009BD9

Primary CTA, brand accent, active state

#023B6D

Secondary accent / hero band

#034B8B

Inline link colour

#011E2C

Accent / decorative

#04415F

Accent / decorative

#FFC107

Accent / decorative

#98A2B3

Accent / decorative

#0471D1

Accent / decorative

Neutral

#000000

Default page background

#FFFFFF

Card / panel background; Headings / primary text; label colour on brand surfaces

#F1F5F7

Alternating section band

#9AA0A6

Body copy

#555555

Captions, secondary text

#444444

Tertiary / placeholder text

#CFD4E4

Neutral

#777777

Neutral

Typography · -apple-systemGoogle Fonts

link13px · 700

Typography · RobotoGoogle Fonts

body15px · 400 · 23.25px

body14px · 400 · 18.2px

body13px · 400 · 13px

body16px · 400 · 24px

input16px · 400 · 24px

heading15px · 600 · 18px

link14px · 400 · 21px

body14.4px · 400 · 21.6px

body17.6px · 400 · 31.68px

link14px · 400 · 21px

button15px · 600 · 15px

nav-link14px · 400 · 21px

body18px · 500 · 21.6px

body20px · 400 · 28px

heading18px · 600 · 21.6px

body13px · 500 · 13px

body16px · 700 · 24px

caption12px · 500 · 15.6px

body15px · 700 · 23.25px

caption12px · 400 · 18px

h124px · 600 · 32px

h216px · 500 · 19.2px

body14px · 500 · 21px

button16px · 500 · 24px

list-item14px · 400 · 21px

body15.2px · 400 · 22.8px

body16px · 600 · 24px

body19.2px · 400 · 32.64px

body13.6px · 400 · 20.4px

Typography · RalewayGoogle Fonts

heading20px · 700 · 24px

h151.2px · 800 · 61.44px

h244px · 800 · 52.8px

h336px · 700 · 43.2px

h424px · 500 · 28.8px

h517.6px · 600 · 21.12px

h615.2px · 600 · 18.24px

heading32px · 700 · 38.4px

heading28.8px · 700 · 34.56px

display40px · 700 · 48px

body24px · 700 · 28.8px

heading25.6px · 700 · 30.72px

heading19.2px · 600 · 23.04px

heading16px · 700 · 19.2px

Typography · PoppinsGoogle Fonts

h136px · 700 · 43.2px

h232px · 500 · 38.4px

h322px · 700 · 27.5px

heading20px · 600 · 20px

caption11px · 700 · 15.4px

heading32px · 700 · 32px

body20px · 500 · 20px

h320px · 600 · 20px

nav-link16px · 400 · 24px

Spacing

12px

40px

32px

16px

24px

20px

60px

48px

Elevation

rgba(0, 0, 0, 0.06) 0px 10px 30px 0px

rgba(0, 0, 0, 0.1) 0px 15px 40px 0px

rgba(0, 0, 0, 0.05) 0px 5px 15px 0px

rgba(0, 0, 0, 0.15) 0px 15px 40px 0px

Components · 6

Remixes of bootstrapmade.com

Latest remixes

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

Remix it