Remixes of geothermal.marianuswilliam.web.id
1 remixLatest remixes
Latest remixes
Switch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Geothermal
description: |
The Portal SPK Geothermal design system embodies a professional, data-driven
aesthetic rooted in geological and energy infrastructure themes. The brand
identity centers on trust, precision, and technical authority—achieved through
a restrained palette of deep blues paired with clean white surfaces,
sophisticated typography, and disciplined spatial structure. The design
language emphasizes clarity through layered information hierarchies and
atmospheric imagery (cooling towers, geothermal landscapes) that reinforce the
physical, industrial nature of the system. Interactions are deliberate and
measured, with subtle elevation and hover states that convey readiness without
aggressive visual change.
source:
url: "https://geothermal.marianuswilliam.web.id/"
pagesAnalyzed: 1
extractedAt: 2026-11-07
tokensMeasured: true
colors:
primary: "#2563EB"
accent: "#1E3A8A"
canvas: "#F8FAFC"
ink: "#475569"
body: "#BFDBFE"
muted: "#E2E8F0"
error: "#212529"
success: "#198754"
warning: "#FFC107"
info: "#334155"
accent-1: "#93C5FD"
accent-2: "#64748B"
accent-3: "#DC3545"
neutral-1: "#000000"
neutral-2: "#DEE2E6"
typography:
display-lg:
fontFamily: Inter
fontSize: 56px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 0px
display-md:
fontFamily: Inter
fontSize: 40px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-md:
fontFamily: Inter
fontSize: 32px
fontWeight: 800
lineHeight: 1.2
letterSpacing: 1px
textTransform: uppercase
heading-sm:
fontFamily: Inter
fontSize: 20px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 0px
heading-xs:
fontFamily: Inter
fontSize: 16px
fontWeight: 700
lineHeight: 1.2
letterSpacing: 1px
textTransform: uppercase
body-xl:
fontFamily: Inter
fontSize: 20px
fontWeight: 500
lineHeight: 2
letterSpacing: 0px
body-lg:
fontFamily: Inter
fontSize: 17.6px
fontWeight: 400
lineHeight: 1.6
letterSpacing: 0px
body-md:
fontFamily: Inter
fontSize: 16.8px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-sm:
fontFamily: Inter
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-xs:
fontFamily: Inter
fontSize: 13.6px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-xs-2:
fontFamily: Inter
fontSize: 11.9px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
nav:
fontFamily: Inter
fontSize: 13.6px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.5px
textTransform: uppercase
button:
fontFamily: Inter
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.5px
textTransform: uppercase
caption-xl:
fontFamily: Inter
fontSize: 12px
fontWeight: 700
lineHeight: 1
letterSpacing: 0px
textTransform: uppercase
caption-lg:
fontFamily: Inter
fontSize: 11.9px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-md:
fontFamily: Inter
fontSize: 11.2px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: Inter
fontSize: 10.4px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 1px
caption-xs:
fontFamily: Inter
fontSize: 8.925px
fontWeight: 700
lineHeight: 1
letterSpacing: 1px
textTransform: uppercase
rounded:
none: 0px
xs: 4px
sm: 6px
md: 8px
lg: 16px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 48px
borderWidths:
thin: 1px
medium: 2px
shadows:
sm: "rgba(0, 0, 0, 0.08) -15px 15px 30px 0px"
md: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px"
lg: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px"
xl: "rgba(0, 0, 0, 0.05) 0px 2px 10px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#F8FAFC"
surface: "#F1F3F4"
surfaceRaised: "#EAEDEE"
text: "#475569"
textMuted: "#BFDBFE"
border: "#E3E6EA"
accent: "#2563EB"
accentFg: "#FFFFFF"
focusRing: "#2563EB"
elevation: shadow
dark:
bg: "#0A0D14"
surface: "#191C22"
surfaceRaised: "#25282E"
text: "#F6F9FE"
textMuted: "#9C9FA5"
border: "#31343A"
accent: "#4A7EEE"
accentFg: "#0B0B0C"
focusRing: "#2563EB"
elevation: "border+surface"
contrastFailures:
- "light: muted on bg = 1.36:1 (needs 4.5:1)"
components:
button-primary:
typography: "{typography.button}"
textColor: "rgb(255, 255, 255)"
border: "1px solid {colors.primary}"
height: 48px
padding: "10px 28px 10px 28px"
boxShadow: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-filled:
textColor: "{colors.primary}"
border: "2px solid {colors.primary}"
height: 44px
padding: "8px 24px 8px 24px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px"
fontFamily: Inter
fontWeight: 700
lineHeight: 1.5
rounded: "{rounded.md}"
backgroundColor: "rgb(255, 255, 255)"
button-outline:
typography: "{typography.button}"
textColor: "rgb(255, 255, 255)"
border: "2px solid rgb(255, 255, 255)"
height: 48px
padding: "10px 28px 10px 28px"
rounded: "{rounded.sm}"
card:
typography: "{typography.body-sm}"
textColor: "{colors.error}"
border: "1px solid {colors.muted}"
padding: "8px 8px 8px 8px"
boxShadow: "rgba(0, 0, 0, 0.08) -15px 15px 30px 0px"
rounded: "{rounded.lg}"
backgroundColor: "{colors.canvas}"
badge-filled:
typography: "{typography.nav}"
textColor: "rgb(224, 242, 254)"
border: "1px solid rgba(255, 255, 255, 0.3)"
height: 34.3906px
padding: "6px 16px 6px 16px"
rounded: "{rounded.xs}"
backgroundColor: "rgba(255, 255, 255, 0.1)"
badge-filled-sm:
typography: "{typography.caption-xl}"
textColor: "rgb(29, 78, 216)"
border: "1px solid {colors.body}"
height: 30px
padding: "8px 16px 8px 16px"
rounded: "{rounded.sm}"
backgroundColor: "rgb(219, 234, 254)"
navigation:
typography: "{typography.body-sm}"
textColor: "{colors.info}"
height: 73px
padding: "10px 0px 10px 0px"
boxShadow: "rgba(0, 0, 0, 0.05) 0px 2px 10px 0px"
backgroundColor: "rgb(255, 255, 255)"
footer:
typography: "{typography.body-xs}"
textColor: "{colors.body}"
border: "4px solid rgb(245, 158, 11)"
padding: "50px 0px 20px 0px"
backgroundColor: "{colors.accent}"
link:
textColor: "{colors.neutral-1}"
padding: "5px 0px 5px 0px"
fontSize: 20px
fontFamily: Inter
fontWeight: 400
lineHeight: 1.5
link-sm:
typography: "{typography.nav}"
textColor: "{colors.ink}"
padding: "8px 8px 8px 8px"
states:
nav-hover:
target: nav
state: hover
textColor: "{colors.accent-1}"
button-hover:
target: button
state: hover
textColor: "rgb(255, 255, 255)"
borderColor: "rgb(29, 78, 216)"
backgroundColor: "rgb(29, 78, 216)"
other-hover:
target: other
state: hover
boxShadow: "rgba(0, 0, 0, 0.3) -15px 20px 30px"
transform: "skewX(-15deg) translateX(-20px)"
borderColor: "{colors.accent-1}"
backgroundColor: "rgba(37, 99, 235, 0.75)"
link-hover:
target: link
state: hover
textColor: "rgb(255, 255, 255)"
other-focus:
target: other
state: focus
boxShadow: "rgba(37, 99, 235, 0.15) 0px 0px 0px 0.2rem"
borderColor: "{colors.primary}"
backgroundColor: "rgb(255, 255, 255)"
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 0
navLinksVisible: 1
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 720
gridColumns: 0
navLinksVisible: 1
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 960
gridColumns: 3
navLinksVisible: 4
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1140
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1320
gridColumns: 4
navLinksVisible: 4
menuToggleVisible: false
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 10
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: true
tokens: colors: primary: "#2563EB" accent: "#1E3A8A" accent-1: "#93C5FD" accent-2: "#64748B" accent-3: "#DC3545" canvas: "#F8FAFC" ink: "#475569" body: "#BFDBFE" muted: "#E2E8F0" neutral-1: "#000000" neutral-2: "#DEE2E6" error: "#212529" success: "#198754" warning: "#FFC107" info: "#334155" typography: display-lg: { size: "56px", weight: 800, lineHeight: 1.2, letterSpacing: "0px" } display-md: { size: "40px", weight: 700, lineHeight: 1.2, letterSpacing: "0px" } heading-sm: { size: "20px", weight: 700, lineHeight: 1.2, letterSpacing: "0px" } heading-xs: { size: "16px", weight: 700, lineHeight: 1.2, letterSpacing: "1px", textTransform: "uppercase" } heading-md: { size: "32px", weight: 800, lineHeight: 1.2, letterSpacing: "1px", textTransform: "uppercase" } body-xs-2: { size: "11.9px", weight: 400, lineHeight: 2, letterSpacing: "0px" } body-xs: { size: "13.6px", weight: 400, lineHeight: 1.5, letterSpacing: "0px" } body-sm: { size: "16px", weight: 400, lineHeight: 1.5, letterSpacing: "0px" } body-md: { size: "16.8px", weight: 400, lineHeight: 2, letterSpacing: "0px" } body-lg: { size: "17.6px", weight: 400, lineHeight: 1.6, letterSpacing: "0px" } body-xl: { size: "20px", weight: 500, lineHeight: 2, letterSpacing: "0px" } button: { size: "16px", weight: 600, lineHeight: 1.5, letterSpacing: "0.5px", textTransform: "uppercase" } nav: { size: "13.6px", weight: 600, lineHeight: 1.5, letterSpacing: "1px", textTransform: "uppercase" } caption-lg: { size: "11.9px", weight: 400, lineHeight: 1.5, letterSpacing: "0px" } caption-md: { size: "11.2px", weight: 400, lineHeight: 1.5, letterSpacing: "0px" } caption-xl: { size: "12px", weight: 700, lineHeight: 1, letterSpacing: "0px", textTransform: "uppercase" } caption-xs: { size: "8.925px", weight: 700, lineHeight: 1, letterSpacing: "1px", textTransform: "uppercase" } caption-sm: { size: "10.4px", weight: 400, lineHeight: 1.5, letterSpacing: "1px" } spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "24px" xxl: "28px" xxxl: "32px" section: "40px" band: "48px" rounded: none: "0px" xs: "4px" sm: "6px" md: "8px" lg: "16px" shadows: sm: "rgba(0, 0, 0, 0.08) -15px 15px 30px 0px" md: "rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px" lg: "rgba(0, 0, 0, 0.05) 0px 2px 4px 0px" xl: "rgba(0, 0, 0, 0.05) 0px 2px 10px 0px" borders: thin: "1px" medium: "2px" opacity: high: 0.95 half: 0.50 zIndex: base: 2 dropdown: 5 modal: 1030 overlay: 1055
The Portal SPK Geothermal design system embodies a professional, data-driven aesthetic rooted in geological and energy infrastructure themes. The brand identity centers on trust, precision, and technical authority—achieved through a restrained palette of deep blues paired with clean white surfaces, sophisticated typography, and disciplined spatial structure. The design language emphasizes clarity through layered information hierarchies and atmospheric imagery (cooling towers, geothermal landscapes) that reinforce the physical, industrial nature of the system. Interactions are deliberate and measured, with subtle elevation and hover states that convey readiness without aggressive visual change.
Key Characteristics
{colors.primary} — #2563EB) as the dominant brand accent, signaling authority and trust{colors.primary} — #2563EB): Primary CTA buttons, active states, brand accent in hero sections and navigation highlights. Used to draw attention to critical interactions and brand moments.{colors.accent} — #1E3A8A): Secondary brand tone, hero band backgrounds, footer backgrounds, and thematic section dividers. Creates visual hierarchy within blue-dominant layouts.#1D4ED8): Darker blue applied on :hover to primary buttons, signaling interactive readiness with increased visual weight.#1E3A8A): Darker accent used for outlined button hover states to maintain tonal coherence.{colors.canvas} — #F8FAFC): Default page background, providing a cool-white neutral base that supports all content.{colors.ink} — #475569): Primary text color for headings and navigation, ensuring legibility on light backgrounds.{colors.body} — #BFDBFE): Light blue body text (footer context), used where secondary or supporting information sits on dark backgrounds.{colors.muted} — #E2E8F0): Captions, secondary labels, and disabled states. Provides visual de-emphasis without full invisibility.{colors.neutral-1} — #000000): Pure black for maximum contrast on links and diagnostic text.{colors.neutral-2} — #DEE2E6): Card and container borders, creating subtle visual containment.{colors.error} — #212529): Near-black used for error states and destructive UI elements, supporting high contrast and urgency.{colors.success} — #198754): Green accent for affirmative, completed states and success confirmations.{colors.warning} — #FFC107): Amber for caution, alert, and attention-grabbing non-critical states. Observed in footer accent border.{colors.info} — #334155): Slate gray for informational callouts and neutral contextual data.{colors.accent-1} — #93C5FD): Decorative only; used sparingly for secondary visual flourishes and hover state overlays.{colors.accent-2} — #64748B): Decorative only; provides tonal variation in non-critical background layers.{colors.accent-3} — #DC3545): Decorative only; reserved for future semantic or emphasis applications.Primary: Inter (https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap)
Fallback stack: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Inter | 56px | 800 | 1.2 | 0px | Hero headings, maximum visual impact |
| Display Medium | Inter | 40px | 700 | 1.2 | 0px | Section headings, secondary prominence |
| Heading Medium | Inter | 32px | 800 | 1.2 | 1px | All-caps section titles, uppercase enforced |
| Heading Small | Inter | 20px | 700 | 1.2 | 0px | Subsection headings, content structure |
| Heading Extra Small | Inter | 16px | 700 | 1.2 | 1px | All-caps labels, uppercase enforced |
| Body Extra Large | Inter | 20px | 500 | 2 | 0px | Prominent body text, loose line spacing |
| Body Large | Inter | 17.6px | 400 | 1.6 | 0px | Extended narrative text, readable line height |
| Body Medium | Inter | 16.8px | 400 | 2 | 0px | Primary body copy, comfortable reading |
| Body Small | Inter | 16px | 400 | 1.5 | 0px | Compact body text, information density |
| Body Extra Small | Inter | 13.6px | 400 | 1.5 | 0px | Links, small body elements |
| Body Extra Small 2 | Inter | 11.9px | 400 | 2 | 0px | Compact meta text, very loose line spacing |
| Button | Inter | 16px | 600 | 1.5 | 0.5px | Interactive label, uppercase enforced |
| Navigation | Inter | 13.6px | 600 | 1.5 | 1px | Nav links, uppercase enforced |
| Caption Large | Inter | 11.9px | 400 | 1.5 | 0px | Large captions, metadata |
| Caption Medium | Inter | 11.2px | 400 | 1.5 | 0px | Standard captions, support text |
| Caption Small | Inter | 10.4px | 400 | 1.5 | 1px | Compact captions, tight tracking |
| Caption Extra Small | Inter | 8.925px | 700 | 1 | 1px | Minimal captions, all-caps, uppercase enforced |
| Caption XL | Inter | 12px | 700 | 1 | 0px | Emphasized caption, uppercase enforced |
text-transform: uppercase with tracked letter-spacing (0.5px to 1px) to reinforce institutional weight and scannability.{colors.primary} (#2563EB)#FFFFFF)10px 28px48px244px{typography.button} (16px, weight 600, letter-spacing 0.5px, uppercase)1px solid {colors.primary} (#2563EB){rounded.sm} (6px){shadows.lg} (rgba(0, 0, 0, 0.05) 0px 2px 4px 0px)#1D4ED8, maintaining white text and border elevation#FFFFFF){colors.primary} (#2563EB)8px 24px44px352px2px solid {colors.primary} (#2563EB){rounded.md} (8px){shadows.lg} (rgba(0, 0, 0, 0.05) 0px 2px 4px 0px)#1E3A8A ({colors.accent}), border and shadow intensifyrgba(0, 0, 0, 0))#FFFFFF)10px 28px48px255.5px{typography.button} (16px, weight 600, line-height 1.5)2px solid {colors.neutral-1} (White, #FFFFFF){rounded.sm} (6px)scale(1.08) translateY(-5px)), subtle lift effect{colors.canvas} (#F8FAFC){colors.error} (#212529)8px526px382.562px1px solid {colors.neutral-2} (#DEE2E6){rounded.lg} (16px){shadows.sm} (rgba(0, 0, 0, 0.08) -15px 15px 30px 0px)rgba(0, 0, 0, 0.3) -15px 20px 30px, transform applied (skewX(-15deg) translateX(-20px)), border shifts to {colors.accent-1} (#93C5FD), background becomes rgba(37, 99, 235, 0.75) with white textrgba(255, 255, 255, 0.1) (translucent white){colors.body} (#BFDBFE)6px 16px34.3906px411px{typography.body-xs} (13.6px, weight 600, line-height 1.5)1px solid rgba(255, 255, 255, 0.3) (translucent white){rounded.none} (0px, sharp corners)#DBE6FE (light blue){colors.primary} (#2563EB)8px 16px30px160px{typography.caption-xl} (12px, weight 700, line-height 1, uppercase)1px solid {colors.body} (#BFDBFE){rounded.sm} (6px)#FFFFFF){colors.info} (#334155)10px 0px73px1440px0px){rounded.none} (0px){shadows.xl} (rgba(0, 0, 0, 0.05) 0px 2px 10px 0px){colors.accent-1} (#93C5FD) or {colors.primary} (#2563EB), depending on link context{colors.primary} (#2563EB){colors.neutral-1} (#000000)187px52px5px 0px{typography.body-xl} (20px, weight 400, line-height 1.5)#FFFFFF){colors.ink} (#475569)156px36.3906px8px{typography.body-xs} (13.6px, weight 600, line-height 1.5){colors.accent} (#1E3A8A){colors.accent} (#1E3A8A){colors.body} (#BFDBFE)50px 0px 20px 0px302.359px1440px{typography.body-xs} (13.6px, weight 400, line-height 1.5)4px solid {colors.warning} (#FFC107, top accent stripe){rounded.none} (0px)The spacing system is built on a 4px base unit, scaling in consistent increments to support flexible yet disciplined layouts:
{spacing.xxs} — 4px): Micro-adjustments between nested elements, icon padding, minimal breathing room{spacing.xs} — 8px): Element padding, small gaps, compressed layouts{spacing.sm} — 12px): Button internal padding, form field gaps{spacing.md} — 16px): Default inter-element spacing, card padding, standard breathing room{spacing.lg} — 20px): Generous gaps between blocks, heading margin{spacing.xl} — 24px): Section-level separation, hero padding{spacing.xxl} — 28px): Between major sections, rhythm spacing{spacing.xxxl} — 32px): Large component padding, group separation{spacing.section} — 40px): Horizontal padding for contained sections, page margins{spacing.band} — 48px): Vertical rhythm between full-width hero sections, maximum visual separationWhitespace is treated as a structural element, not decoration. The system uses consistent spacing multiples to create visual rhythm and hierarchy. Large sections (40–48px vertical gaps) separate conceptual blocks; tighter spacing (12–16px) groups related elements. Hero sections and cards benefit from generous internal padding ({spacing.xxxl} — 32px+) to prevent visual crowding. Navigation and footer use minimal vertical padding despite full-height containers, allowing imagery and color to dominate.
The radius scale emphasizes functional clarity:
{rounded.none} — 0px): Badges, images, diagnostic elements with hard edges{rounded.xs} — 4px): Badge accents, micro-elements requiring slight softening{rounded.sm} — 6px): Buttons, input fields, modest rounded treatment{rounded.md} — 8px): Secondary buttons, some form controls{rounded.lg} — 16px): Cards, major containers, primary visual softnessComponent-specific radius values:
{rounded.sm} (6px for primary, some 8px for secondary){rounded.lg} (16px){rounded.none} (0px, sharp) or {rounded.sm} (6px, accents){rounded.none} (0px, photographs remain sharp)The border system uses two primary widths for visual distinction and hierarchy:
{spacing.thin} — 1px): Default card borders, subtle containment, most UI elements{spacing.medium} — 2px): Secondary button outlines, emphasized borders, stronger visual definition{colors.warning} — #FFC107), creating visual separator and thematic punctuation| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Backgrounds, typography, inactive layers |
| Subtle Lift | {shadows.lg} (rgba(0, 0, 0, 0.05) 0px 2px 4px 0px) | Buttons, minimal elevation, fine interactions |
| Card Depth | {shadows.sm} (rgba(0, 0, 0, 0.08) -15px 15px 30px 0px) | Cards, blocks, offset downward shadow for directional depth |
| Navigation / UI Chrome | {shadows.xl} (rgba(0, 0, 0, 0.05) 0px 2px 10px 0px) | Header nav, sticky elements, subtle presence |
| Modal / Overlay | {shadows.md} (rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px) | Dialogs, overlays, layered prominence |
The shadow system employs a progressive micro-layering approach: rather than a single harsh shadow, most elements use either a single subtle shadow (buttons, nav) or a compound two-layer shadow (modals). Cards receive an asymmetric offset shadow (-15px 15px 30px), suggesting depth and directionality from upper-left light source. On hover, card shadows intensify to rgba(0, 0, 0, 0.3) -15px 20px 30px, creating perceived lift. This restrained approach maintains clarity in data-dense contexts while still signaling layering and interactivity.
rgba(255, 255, 255, 0.1) badge fill){colors.primary} — #2563EB) for all CTAs and interactive affordances; it establishes immediate visual recognition across the system.{spacing.section} (40px) and {spacing.band} (48px) to create rhythm and prevent visual crowding.{colors.accent} — #1E3A8A) backgrounds for maximum contrast and readability in hero sections and footers.{shadows.sm}) to signal containers and clickable regions; omit shadow from flat informational content.{colors.warning} — #FFC107) for CTAs or primary interactive states—it is reserved for the footer accent border and status alerts.| Viewport | Max Width | Grid | Nav Visible | Heading | Body | Padding X | Key Change |
|---|---|---|---|---|---|---|---|
| 375px (Mobile) | 375px | 1 column | 1 link | 56px | 16px | 0px | Single-column layout, hero-driven navigation |
| 768px (Tablet) | 720px | 1 column | 1 link | 56px | 16px | 0px | Expanded horizontal space, content remains single column |
| 1024px (Small Desktop) | 960px | 3 columns | 4 links | 56px | 16px | 0px | Multi-column grid enabled, nav expands to show more links |
| 1280px (Large Desktop) | 1140px | 4 columns | 4 links | 56px | 16px | 0px | Wider content width, 4-column layout support |
| 1440px (XL Desktop) | 1320px | 4 columns | 4 links | 56px | 16px | 0px | Maximum content width, no further expansion |
{spacing.sm} (12px) between adjacent interactive elements to prevent mis-taps{spacing.section} and {spacing.band}).{colors.primary} — #2563EB){colors.primary} — #2563EB){colors.canvas} — #F8FAFC){colors.ink} — #475569){colors.body} — #BFDBFE on dark) or Ink ({colors.ink} — #475569 on light){colors.success} (#198754){colors.warning} (#FFC107){colors.error} (#212529){colors.neutral-2} — #DEE2E6){colors.muted} — #E2E8F0){colors.accent} — #1E3A8A)text-transform: uppercase and letter-spacing: 0.5px—this applies to primary, secondary (filled), and ghost variants.{colors.primary} (#2563EB) background with white text, 1px {colors.primary} border, {rounded.sm} (6px radius), and {shadows.lg} box shadow.{colors.primary} text, 2px {colors.primary} border, {rounded.md} (8px radius).{colors.canvas} (#F8FAFC) background, 1px {colors.neutral-2} border, {rounded.lg} (16px radius), and {shadows.sm} box shadow; hover state increases shadow intensity and applies slight transform.#FFFFFF) with {colors.info} (#334155) text; apply {shadows.xl} for subtle elevation.{colors.accent} (#1E3A8A) background with {colors.body} (#BFDBFE) text; footer adds 4px solid {colors.warning} (#FFC107) top border.{spacing.md} (16px) for standard gaps, {spacing.section} (40px) for section padding, {spacing.band} (48px) for hero separation.{rounded.sm} (6px), cards {rounded.lg} (16px), badges 0px or 6px based on context; never custom-radius elements.{colors.accent-1} (#93C5FD) or {colors.primary} (#2563EB); button #1D4ED8 (darker blue).:disabled or :readonly styling; these states are inferred missing from the production stylesheet and should be designed by extending the muted palette ({colors.muted} — #E2E8F0).transition or animation duration values; implement these with standard motion easing (e.g., cubic-bezier(0.2, 0, 0.38, 0.9) or ease-out).rgba(37, 99, 235, 0.15) 0px 0px 0px 0.2rem) and border but did not include high-contrast mode or screen-reader optimizations; implement standard WCAG focus indicators alongside the measured shadow.