Remixes of ip7networks.com
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: Ip7networks
description: |
IP-7 Networks embodies a tech-forward, professional networking aesthetic
rooted in infrastructure expertise and digital transformation. The design
evokes data centers, network nodes, and secure enterprise connectivity through
deep navy backdrops, sharp geometric precision, and strategic use of teal
accents that suggest active network flow and real-time systems. The visual
personality is authoritative yet approachable—combining enterprise gravitas
with educational clarity. Hero sections feature immersive server-room
photography and node-based network visualizations, while content sections
alternate between clean white canvas and dark surfaces to establish rhythm and
reduce cognitive load. Every interaction signals confidence: sharp corners
dominate, spacing is deliberate, and typography maintains a strong hierarchy
that guides users through certification pathways and course progression.
source:
url: "https://ip7networks.com/"
pagesAnalyzed: 6
extractedAt: 2026-11-02
tokensMeasured: true
colors:
primary: "#243D65"
canvas: "#FFFFFF"
surface-alt: "#161313"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#222222"
muted: "#777777"
faint: "#DDDDDD"
hairline: "#E4E4E4"
accent-1: "#5091A3"
accent-2: "#01010E"
accent-3: "#1A8087"
accent-4: "#03023C"
neutral-1: "#555555"
typography:
display:
fontFamily: b612
fontSize: 62px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
textTransform: capitalize
heading-xxl:
fontFamily: b612
fontSize: 30px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
heading-xl:
fontFamily: b612
fontSize: 25px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
heading-lg:
fontFamily: b612
fontSize: 24px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
heading-md:
fontFamily: b612
fontSize: 22px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
heading-sm:
fontFamily: b612
fontSize: 20px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
textTransform: uppercase
heading-xs:
fontFamily: b612
fontSize: 14px
fontWeight: 600
lineHeight: 1.1
letterSpacing: 0px
textTransform: uppercase
body-lg:
fontFamily: b612
fontSize: 18px
fontWeight: 400
lineHeight: 1.11
letterSpacing: 0px
body-lg-strong:
fontFamily: b612
fontSize: 18px
fontWeight: 600
lineHeight: 1.43
letterSpacing: 0px
body-md:
fontFamily: b612
fontSize: 16px
fontWeight: 400
lineHeight: 1.88
letterSpacing: 0px
body-md-tight:
fontFamily: b612
fontSize: 16px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
body-sm:
fontFamily: b612
fontSize: 15px
fontWeight: 400
lineHeight: 2
letterSpacing: 0px
body-sm-capitalize:
fontFamily: b612
fontSize: 15px
fontWeight: 400
lineHeight: 2.33
letterSpacing: 0px
textTransform: capitalize
nav:
fontFamily: b612
fontSize: 18px
fontWeight: 400
lineHeight: 1.43
letterSpacing: 0px
textTransform: capitalize
label:
fontFamily: b612
fontSize: 16px
fontWeight: 700
lineHeight: 1.43
letterSpacing: 0px
caption:
fontFamily: b612
fontSize: 16.5px
fontWeight: 400
lineHeight: 1
letterSpacing: 0px
rounded:
none: 0px
xs: 3px
spacing:
xxs: 4px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 32px
xxl: 40px
xxxl: 44px
section: 52px
band: 60px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.3) 0px 2px 10px -2px"
md: "rgba(0, 0, 0, 0.2) 0px 2px 12px 0px"
elevationStrategy: progressive
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#161313"
surfaceRaised: "#151212"
text: "#000000"
textMuted: "#222222"
border: "#E4E4E4"
accent: "#243D65"
accentFg: "#FFFFFF"
focusRing: "#243D65"
elevation: shadow
dark:
bg: "#0D0E11"
surface: "#1C1C1F"
surfaceRaised: "#28292B"
text: "#F6F7F9"
textMuted: "#9D9EA1"
border: "#343537"
accent: "#557FC3"
accentFg: "#0B0B0C"
focusRing: "#3961A1"
elevation: "border+surface"
contrastFailures:
- "light: text on surface = 1.14:1 (needs 4.5:1)"
components:
button-filled:
textColor: "{colors.on-primary}"
border: "2px solid {colors.accent-1}"
height: 52px
padding: "0px 60px 0px 60px"
fontSize: 18px
fontFamily: b612
fontWeight: 400
lineHeight: 2.67
backgroundColor: "{colors.accent-1}"
button-primary:
typography: "{typography.body-sm-capitalize}"
textColor: "{colors.on-primary}"
height: 35px
padding: "0px 20px 0px 20px"
backgroundColor: "{colors.primary}"
button-icon:
textColor: "{colors.on-primary}"
height: 30px
fontSize: 20px
fontFamily: b612
fontWeight: 400
lineHeight: 1.43
rounded: "{rounded.xs}"
backgroundColor: "rgb(36, 61, 99)"
button-filled-2:
textColor: "{colors.on-primary}"
border: "2px solid {colors.accent-1}"
height: 52px
padding: "0px 40px 0px 40px"
fontSize: 18px
fontFamily: b612
fontWeight: 400
lineHeight: 2.67
backgroundColor: "{colors.accent-1}"
navigation:
typography: "{typography.body-md-tight}"
textColor: "rgba(0, 0, 0, 0.8)"
height: 65.7031px
footer:
typography: "{typography.body-md-tight}"
textColor: "rgba(0, 0, 0, 0.8)"
padding: "40px 0px 0px 0px"
backgroundColor: "{colors.surface-alt}"
link:
textColor: "{colors.faint}"
fontSize: 15px
fontFamily: b612
fontWeight: 400
lineHeight: 1.73
link-lg:
typography: "{typography.body-md-tight}"
textColor: "{colors.primary}"
states:
link-hover:
target: link
state: hover
outline: none
textDecoration: none
button-hover:
target: button
state: hover
textColor: "{colors.on-primary}"
backgroundColor: "rgb(85, 164, 179)"
button-focus:
target: button
state: focus
borderColor: "{colors.primary}"
other-hover:
target: other
state: hover
opacity: 1
nav-hover:
target: nav
state: hover
backgroundColor: "{colors.canvas}"
card-hover:
target: card
state: hover
textColor: "{colors.on-primary}"
breakpoints:
- width: 375
containerWidth: 345
gridColumns: 1
navLinksVisible: 0
menuToggleVisible: true
headingPx: 45
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 750
gridColumns: 0
navLinksVisible: 0
menuToggleVisible: true
headingPx: 62
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 970
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1170
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1170
gridColumns: 6
navLinksVisible: 6
menuToggleVisible: false
headingPx: 62
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 30
gradientsFound: 0
rolesUnassigned: 5
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
IP-7 Networks embodies a tech-forward, professional networking aesthetic rooted in infrastructure expertise and digital transformation. The design evokes data centers, network nodes, and secure enterprise connectivity through deep navy backdrops, sharp geometric precision, and strategic use of teal accents that suggest active network flow and real-time systems. The visual personality is authoritative yet approachable—combining enterprise gravitas with educational clarity. Hero sections feature immersive server-room photography and node-based network visualizations, while content sections alternate between clean white canvas and dark surfaces to establish rhythm and reduce cognitive load. Every interaction signals confidence: sharp corners dominate, spacing is deliberate, and typography maintains a strong hierarchy that guides users through certification pathways and course progression.
Key Characteristics:
{colors.primary} — #243D65) as primary brand and CTA anchor{colors.surface-alt} — #161313) for visual rhythm{colors.accent-1} — #5091A3) used sparingly for secondary CTAs and highlights{colors.primary} — #243D65): Primary CTA button fill, active navigation states, heading accents, and brand identity touchpoints. Conveys authority and trust in enterprise training context.{colors.accent-1} — #5091A3): Secondary CTA fills, decorative network elements, and highlight states. Signals active systems and connectivity.{colors.accent-4} — #03023C): Decorative; used in layered backgrounds and atmospheric elements.{colors.accent-3} — #1A8087): Decorative; alternative accent in hero and section banners.{colors.accent-2} — #01010E): Decorative; used in dark overlays and contrast elements.rgb(85, 164, 179)): Teal accent button on hover—a slightly lighter variant of {colors.accent-1} for tactile feedback.{colors.canvas} — #FFFFFF): Default page background, card surfaces, and primary reading space.{colors.ink} — #000000): Primary heading and display text color.{colors.body} — #222222): Body copy and main paragraph text.{colors.muted} — #777777): Secondary and caption text, reduced prominence.{colors.faint} — #DDDDDD): Placeholder and tertiary text; very low contrast.{colors.neutral-1} — #555555): Mid-tone neutral for subtle text emphasis.{colors.surface-alt} — #161313): Dark alternating section bands for visual separation and rhythm.{colors.hairline} — #E4E4E4): 1px borders, dividers, and subtle rule lines.Primary: B612 (sans-serif), fallback: system-ui, -apple-system, sans-serif
Secondary: B612 (same as primary; no secondary declared)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | B612 | 62px | 700 | 1.1 | 0px | Hero H1; capitalized; dominant page anchor |
| Heading XXL | B612 | 30px | 700 | 1.1 | 0px | Major section headings |
| Heading XL | B612 | 25px | 700 | 1.1 | 0px | Subsection titles |
| Heading LG | B612 | 24px | 700 | 1.1 | 0px | H4-level headings |
| Heading MD | B612 | 22px | 700 | 1.1 | 0px | H5-level and common section heads |
| Heading SM | B612 | 20px | 700 | 1.1 | 0px | Uppercase section markers and card titles |
| Heading XS | B612 | 14px | 600 | 1.1 | 0px | Uppercase labels and small caps; H6 |
| Body LG Strong | B612 | 18px | 600 | 1.43 | 0px | Emphasized body and list leads |
| Body LG | B612 | 18px | 400 | 1.11 | 0px | Large body text and emphasized copy |
| Body MD Tight | B612 | 16px | 400 | 1.43 | 0px | List items and table labels |
| Body MD | B612 | 16px | 400 | 1.88 | 0px | Standard body copy |
| Label | B612 | 16px | 700 | 1.43 | 0px | Table headers and form labels |
| Caption | B612 | 16.5px | 400 | 1 | 0px | Image captions and small text |
| Nav | B612 | 18px | 400 | 1.43 | 0px | Navigation links; capitalized |
| Body SM Capitalize | B612 | 15px | 400 | 2.33 | 0px | Tertiary links; capitalized |
| Body SM | B612 | 15px | 400 | 2 | 0px | Small body and footer links |
heading-sm, heading-xs) to signal structural importance.{colors.primary} (#243D65){colors.canvas} (white)0px 20px{typography.body-sm}){rounded.none} (0px) — sharp corners{colors.primary} with enhanced contrast; text remains white{colors.accent-1} (#5091A3){colors.canvas} (white){colors.accent-1}0px 60px or 0px 40px (two variants measured){typography.body-lg}){rounded.none} (0px)rgb(85, 164, 179); text remains white{colors.primary} (#243D65) — variant rgb(36, 61, 99){colors.canvas} (white){rounded.xs} (3px){colors.canvas} (#FFFFFF){colors.hairline} (#E4E4E4){spacing.md} to {spacing.lg} (20–24px), varies by context{rounded.none} (0px)rgba(0, 0, 0, 0.2) 0px 2px 12px 0px on hover{colors.body} (#222222){colors.surface-alt} (#161313){colors.canvas} (white) or {colors.faint} (#DDDDDD) for secondary{spacing.band} to {spacing.section} (52–60px vertical){rounded.none}{colors.canvas} (#FFFFFF){colors.hairline} (#E4E4E4){colors.body} (#222222){colors.faint} (#DDDDDD){spacing.xs} to {spacing.sm} (12–16px){rounded.none} (0px) — sharp input corners{typography.body-md} (16px){colors.primary} (#243D65){colors.canvas} on standard rows; lighter tint on alternating{colors.body} (#222222){colors.hairline} (#E4E4E4){spacing.sm} (16px){typography.body-md-tight} (16px, 400 weight) for content; {typography.label} (16px, 700 weight) for headersrgba(0, 0, 0, 0.8){typography.nav} (18px, capitalized){rounded.none}{colors.faint} (#DDDDDD) or {colors.canvas} (white){typography.body-sm} (15px){colors.surface-alt} (#161313){colors.primary} (#243D65) or {colors.faint} (#DDDDDD) on dark backgrounds{typography.body-md} (16px) or {typography.body-sm} (15px)outline: none; no underline change observed in raw CSS, but contextual color emphasis occursBase Unit: 4px ({spacing.xxs})
Scale:
{spacing.xxs} = 4px — micro adjustments{spacing.xs} = 12px — compact form inputs and small padding{spacing.sm} = 16px — standard component padding{spacing.md} = 20px — moderate spacing between sections{spacing.lg} = 24px — breathing room in cards and containers{spacing.xl} = 32px — significant section breaks{spacing.xxl} = 40px — large gaps; often used as footer padding{spacing.xxxl} = 44px — extra-large spacing for prominent breaks{spacing.section} = 52px — medium section vertical padding{spacing.band} = 60px — large hero and alternating band paddingUsage Context:
{spacing.xxs} – {spacing.xs}{spacing.sm} – {spacing.lg}{spacing.section} – {spacing.band}{spacing.md} – {spacing.xl}The design employs strategic contrast through negative space. White canvas sections are punctuated by full-bleed dark bands ({colors.surface-alt}) that serve as visual breaks and provide rhythm. Vertical rhythm is enforced through consistent use of the spacing scale; section padding increases with viewport size to maintain readable density. Heading text enjoys substantial air above and below (achieved through line-height 1.1 and surrounding margin), while body text maintains generous line-height (1.43–2) for legibility. Hero sections are spacious; content cards are compact. This balances premium feel with information density.
{rounded.none} = 0px — primary system default; all major components (buttons, cards, inputs, images){rounded.xs} = 3px — icon buttons and micro accent elements onlyThe system is sharp-cornered by design; only icon buttons deviate slightly to soften visual harshness at small scales. This angular aesthetic reinforces the technical, infrastructure-focused brand.
| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Default buttons, cards, navigation; on-canvas elements |
| Lift 1 | rgba(0, 0, 0, 0.3) 0px 2px 10px -2px | Dropdown menus, subtle hover elevation on small elements |
| Lift 2 | rgba(0, 0, 0, 0.2) 0px 2px 12px 0px | Card hover states, custom overlays, medium interactive elements |
Shadow Philosophy:
The design uses a single-tier, restrained shadow strategy. The system avoids aggressive layering; instead, depth emerges from color blocking (white canvas vs. dark {colors.surface-alt} bands) and subtle, near-transparent shadows that barely lift interactive elements on hover. This keeps focus on content hierarchy and maintains the sharp, minimalist aesthetic. Shadows are muted (low opacity, minimal blur) to preserve the professional, approachable tone.
These opacity values are typically applied to text, backgrounds, and hover/focus states to signal interaction and hierarchy without breaking the clean visual system.
Layering is minimal and predictable; only one or two z-contexts are active at any time, preventing stacking confusion.
{colors.primary} (#243D65) for all primary CTAs — "Send Enquiry," "Explore Courses," enrollment buttons. This is the brand anchor.{colors.accent-1} (#5091A3) for secondary CTAs — supporting actions, course highlights, "View Details."0px border-radius) on all major components (buttons, cards, inputs) to preserve the angular, technical aesthetic.{colors.surface-alt} (#161313) for rhythm and visual separation.heading-sm and heading-xs roles for structural clarity.{typography.label} (16px, 700 weight) for headers.{spacing.xxs} through {spacing.band}.{rounded.xs} (3px).{colors.body} or darker on white; light text only on {colors.surface-alt}.text-transform: uppercase (heading-sm, heading-xs).| Breakpoint | Viewport Width | Max Content Width | Columns | Nav Links Visible | Menu Toggle | Heading Size | Body Size | Padding X |
|---|---|---|---|---|---|---|---|---|
| Mobile | 375px | 345px | 1 | 0 | Yes | {typography.display} 45px (reduced) | {typography.body-md} 16px | 0px |
| Tablet | 768px | 750px | n/a | 0 | Yes | {typography.display} 62px | {typography.body-md} 16px | 0px |
| Desktop | 1024px | 970px | 6 | 6 | No | {typography.display} 62px | {typography.body-md} 16px | 0px |
| Wide | 1280px+ | 1170px | 6 | 6 | No | {typography.display} 62px | {typography.body-md} 16px | 0px |
375px → 768px (Mobile collapse):
768px → 1024px (Tablet to Desktop):
1024px → 1280px+ (Desktop to Wide):
General Collapse Logic:
#243D65)#5091A3)#FFFFFF)#161313)#000000)#222222)#777777)#E4E4E4)rgba(0, 0, 0, 0.8)#DDDDDD)rgb(36, 61, 99)All major components use sharp corners — set border-radius: 0px on buttons, cards, inputs, and containers. Exception: icon buttons use border-radius: 3px.
Button primary is #243D65 with white text — 35px height, 15px font, no border. Filled secondary is #5091A3 with 52px height, 18px font, 2px border solid matching background.
Every text layer respects the B612 hierarchy — heading roles 62px down to 14px; body copy never smaller than 15px; line-height minimum 1.1 for headings, 1.43 for body.
Section rhythm alternates white and dark — canvas (#FFFFFF) for content rows; surface-alt (#161313) for full-width dark bands. Never use grey or mid-tone; maintain stark contrast.
Spacing always pulls from the defined scale — 4px, 12px, 16px, 20px, 24px, 32px, 40px, 44px, 52px, 60px. Never invent intermediate values.
Responsive collapse happens at 768px — navigation hides; hamburger appears. Desktop unlock at 1024px. Max content width is 1170px; hold it constant at 1280px and 1440px.
Shadows are minimal and muted — default is none; hover lifts to 0px 2px 12px rgba(0, 0, 0, 0.2) or 0px 2px 10px rgba(0, 0, 0, 0.3) for dropdowns. No aggressive depth.
Interactive states shift color or apply light opacity — button hover becomes slightly lighter shade of background; link hover removes underline and may fade. No radical transformations.
Tables use 700-weight headers and 400-weight rows; consistent 16px font. Borders are hairline (#E4E4E4) 1px solid.
Hero and course imagery is full-bleed — no rounded corners, no borders. Center text overlay; ensure white text contrasts over darker layers via 89%+ opacity overlays if needed.
No semantic status colors declared. The site does not expose error, success, warning, or info colors in its stylesheet. Do not invent a red/green/yellow/blue semantic palette; if these states are needed, they fall outside this extraction.
No gradients or decorative meshes measured. While hero sections feature photography, no CSS gradients, linear/radial blends, or mesh backgrounds were extracted. If gradients are used, they are image-based, not CSS-defined.
Five accent colors ({colors.accent-1} through {colors.accent-4}) have no measured functional role. They appear in markup or imagery but are not tied to a specific UI role (link, hover, emphasis, etc.). Treat them as decorative or thematic only; do not force them into a semantic function.
No interaction states for disabled or focus states fully captured. The extraction includes some hover states (button, link, nav, card) but does not comprehensively cover :disabled, :focus, or :active pseudo-classes across all components. Implement standard accessible defaults (e.g., focus outline, grey text on disabled) as not specified here.
No dark mode or theme toggling. The extracted tokens represent a single, light-default theme. The design system does not expose a dual-theme or dark-mode variant.
Opacity values are sparse and context-dependent. Six opacity levels (0.99, 0.89, 0.88, 0.87, 0.83, 0.80) are noted, but their exact application across all components is not fully specified. Expect some ambiguity when applying transparency to novel elements.
Z-index scale is minimal. The system defines only 4 stacking tiers (base, dropdown, sticky, toast). Complex modal hierarchies or layered UI systems beyond these tiers are not covered.
No animation or transition timing specified. Hover and focus changes are visual but do not include transition: ... or animation: ... CSS. Infer smooth, 200–300ms transitions for professional UX.
Surfaces behind authentication not visited. This extraction covers 6 publicly accessible pages. Any member dashboard, profile, or gated course content is not analyzed.
No form validation or error states. Input focus state transitions to primary color, but success/error/warning field states are not measured.
Letter-spacing is uniformly 0px. No negative or positive tracking adjustments detected; all typography uses default letter-spacing. Display sizes do not employ condensed tracking despite high font-size.
Document Version: 1.0
Brand: IP-7 Networks — The Network Planet Solutions
Pages Analyzed: 6
Last Updated: Extraction from https://ip7networks.com/
This document is a faithful record of the measured design system. Every color, spacing, typography value, and component specification derives from the extracted token data and screenshot analysis. Implement with confidence; refer to "Known Gaps" for ambiguities or unspecified roles.