Remixes of www.gendigital.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: Gendigital
description: |
Gen's design system exudes a digital-first, security-focused confidence rooted
in technology innovation and global connectivity. The aesthetic combines a
deep, near-black dark navy (#242E39) with electric primary blue (#0400F5) to
evoke trust, precision, and forward momentum. Hero imagery—animated globes,
network visualizations, flowing data streams—sets an aspirational, futuristic
tone. The palette is restrained and purposeful: where color appears, it
commands attention. Typography emphasizes bold, condensed display sizes with
tight negative letter-spacing, reinforcing a sense of urgency and strength.
Whitespace is generous, breathing room is sacred, and interactions are crisp
and responsive. This is a design system built for clarity, speed, and security
at scale.
source:
url: "https://www.gendigital.com/us/en/"
pagesAnalyzed: 1
extractedAt: 2026-10-28
tokensMeasured: true
colors:
primary: "#0400F5"
accent: "#242E39"
canvas: "#FFFFFF"
surface-alt: "#F0F5FF"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#242E39"
accent-1: "#666D74"
accent-2: "#BDC7FF"
typography:
display-xxl:
fontFamily: "Source Sans Pro Bold"
fontSize: 96px
fontWeight: 700
lineHeight: 1
letterSpacing: -1.92px
display-xl:
fontFamily: "Source Sans Pro Bold"
fontSize: 72px
fontWeight: 700
lineHeight: 1
letterSpacing: -1.08px
display-xl-loose:
fontFamily: "Source Sans Pro Bold"
fontSize: 72px
fontWeight: 700
lineHeight: 1.1
letterSpacing: 0px
heading-md:
fontFamily: "Source Sans Pro Bold"
fontSize: 32px
fontWeight: 700
lineHeight: 1.15
letterSpacing: 0px
heading-sm:
fontFamily: "Source Sans Pro Regular"
fontSize: 28px
fontWeight: 400
lineHeight: 1.1
letterSpacing: 0px
heading-xs:
fontFamily: "Source Sans Pro Bold"
fontSize: 26px
fontWeight: 700
lineHeight: 1.2
letterSpacing: -0.26px
body-xl:
fontFamily: "Source Sans Pro Regular"
fontSize: 22px
fontWeight: 400
lineHeight: 1.45
letterSpacing: -0.22px
body-lg:
fontFamily: "Source Sans Pro SemiBold"
fontSize: 18px
fontWeight: 600
lineHeight: 1
letterSpacing: -0.18px
body-md:
fontFamily: "Roboto Regular"
fontSize: 16px
fontWeight: 400
lineHeight: 1.6
letterSpacing: -0.22px
body-sm:
fontFamily: "Roboto Regular"
fontSize: 14px
fontWeight: 400
lineHeight: 1.6
letterSpacing: -0.22px
label-xl:
fontFamily: "Source Sans Pro Regular"
fontSize: 22px
fontWeight: 400
lineHeight: 1.45
letterSpacing: 0px
label-lg:
fontFamily: "Source Sans Pro SemiBold"
fontSize: 14px
fontWeight: 600
lineHeight: 1
letterSpacing: -0.18px
rounded:
none: 0px
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 36px
section: 40px
band: 44px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#F0F5FF"
surfaceRaised: "#E6EBF5"
text: "#000000"
textMuted: "#242E39"
border: "#E0E0E0"
accent: "#0400F5"
accentFg: "#FFFFFF"
focusRing: "#0400F5"
elevation: shadow
dark:
bg: "#090916"
surface: "#181824"
surfaceRaised: "#242430"
text: "#F5F5FF"
textMuted: "#9B9BA6"
border: "#30303B"
accent: "#7370FF"
accentFg: "#090916"
focusRing: "#4B48FF"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
height: 43px
padding: "13px 24px 12px 24px"
rounded: 70px
backgroundColor: "{colors.primary}"
button-text:
typography: "{typography.body-lg}"
textColor: "{colors.primary}"
height: 43px
padding: "13px 24px 12px 24px"
rounded: 70px
backgroundColor: "{colors.canvas}"
button-icon:
textColor: "{colors.on-primary}"
height: 40px
fontSize: 12px
fontFamily: "Source Sans Pro Regular"
fontWeight: 400
lineHeight: 1
rounded: 70px
button-icon-sm:
typography: "{typography.body-xl}"
textColor: "{colors.ink}"
height: 31px
input:
textColor: "{colors.primary}"
height: 32px
padding: "10px 15px 10px 15px"
fontSize: 0px
fontFamily: "Roboto Regular"
fontWeight: 400
lineHeight: 0px
rounded: 17px
backgroundColor: "{colors.canvas}"
card:
typography: "{typography.body-xl}"
textColor: "{colors.body}"
padding: "55px 0px 55px 0px"
card-sm:
typography: "{typography.body-xl}"
textColor: "{colors.ink}"
padding: "15px 0px 0px 0px"
boxShadow: "rgb(230, 230, 230) 0px 6px 24px 0px"
backgroundColor: "{colors.canvas}"
navigation:
typography: "{typography.body-xl}"
textColor: "{colors.ink}"
height: 18px
footer:
typography: "{typography.body-xl}"
textColor: "{colors.body}"
padding: "127px 0px 20px 0px"
backgroundColor: "{colors.primary}"
link:
typography: "{typography.body-lg}"
textColor: "{colors.on-primary}"
padding: "0px 24px 0px 24px"
link-lg:
typography: "{typography.body-sm}"
textColor: "{colors.on-primary}"
padding: "0px 0px 10px 0px"
states:
other-hover:
target: other
state: hover
textColor: "{colors.on-primary}"
other-active:
target: other
state: active
textColor: "{colors.on-primary}"
backgroundColor: "rgb(51, 82, 255)"
other-focus:
target: other
state: focus
outline: "rgb(122, 142, 255) solid 0.1875rem"
outlineColor: "rgb(122, 142, 255)"
outlineWidth: 0.1875rem
other-disabled:
target: other
state: disabled
textColor: "{colors.on-primary}"
backgroundColor: "{colors.accent-2}"
link-hover:
target: link
state: hover
textColor: "rgba(0, 0, 0, 0.3)"
other-focus-visible:
target: other
state: focus-visible
outline: "rgb(15, 113, 240) solid 4px"
rounded: 20px
outlineColor: "rgb(15, 113, 240)"
outlineWidth: 4px
button-focus:
target: button
state: focus
borderColor: "rgb(10, 95, 252)"
borderWidth: 2px
rounded: 0.25em
button-active:
target: button
state: active
boxShadow: "rgba(0, 0, 0, 0.2) 0px 8px 17px 0px"
link-focus-visible:
target: link
state: focus-visible
textColor: "{colors.primary}"
outline: none
boxShadow: "{colors.primary} 0px 0px 0px 2px inset"
card-hover:
target: card
state: hover
textColor: "{colors.primary}"
button-hover:
target: button
state: hover
transform: "translateX(-100%)"
breakpoints:
- width: 375
containerWidth: 359
gridColumns: 0
navLinksVisible: 5
menuToggleVisible: false
headingPx: 48
bodyPx: 18
sectionPaddingX: 0
- width: 768
containerWidth: 752
gridColumns: 0
navLinksVisible: 5
menuToggleVisible: false
headingPx: 66
bodyPx: 20
sectionPaddingX: 0
- width: 1024
containerWidth: 1000
gridColumns: 6
navLinksVisible: 11
menuToggleVisible: false
headingPx: 80
bodyPx: 21
sectionPaddingX: 0
- width: 1280
containerWidth: 1256
gridColumns: 6
navLinksVisible: 11
menuToggleVisible: false
headingPx: 94
bodyPx: 22
sectionPaddingX: 0
- width: 1440
containerWidth: 1312
gridColumns: 6
navLinksVisible: 11
menuToggleVisible: false
headingPx: 96
bodyPx: 22
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
Gen's design system exudes a digital-first, security-focused confidence rooted in technology innovation and global connectivity. The aesthetic combines a deep, near-black dark navy ({colors.accent} — #242E39) with electric primary blue ({colors.primary} — #0400F5) to evoke trust, precision, and forward momentum. Hero imagery—animated globes, network visualizations, flowing data streams—sets an aspirational, futuristic tone. The palette is restrained and purposeful: where color appears, it commands attention. Typography emphasizes bold, condensed display sizes with tight negative letter-spacing, reinforcing a sense of urgency and strength. Whitespace is generous, breathing room is sacred, and interactions are crisp and responsive. This is a design system built for clarity, speed, and security at scale.
Key Characteristics
#0400F5) as the dominant brand accent; deployed on CTAs, accents, and interactive states#242E39) for contrast and grounding{rounded.full}) softening an otherwise geometric, technical aesthetic{colors.primary} — #0400F5): Electric blue used for primary CTAs, brand accent text, active states, footer background, and focus rings. The dominant brand voice.{colors.accent} — #242E39): Deep navy used as secondary accent, hero band backgrounds, and body copy. Grounds the bright primary and provides contrast.{colors.accent-1} — #666D74): Mid-gray placeholder with no measured semantic role; used decoratively only.{colors.accent-2} — #BDC7FF): Light periwinkle with no measured semantic role; used decoratively only.{colors.canvas} — #FFFFFF): White page background and label text on brand-colored surfaces (e.g., buttons, footer links).{colors.surface-alt} — #F0F5FF): Pale blue-tinted white used for alternating section bands and container backgrounds to differentiate zones.{colors.ink} — #000000): Black for primary headings, body text, and foreground elements where maximum contrast is required.Primary: Source Sans Pro (Bold, SemiBold, Regular)
Fallback stack: Source Sans Pro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Secondary: Roboto (Regular)
Fallback stack: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Source Sans Pro | 96px | 700 | 1 | -1.92px | Ultra-bold hero headlines; tight negative tracking for impact |
| Display XL | Source Sans Pro | 72px | 700 | 1 | -1.08px | Large section headings; strong visual anchor |
| Display XL Loose | Source Sans Pro | 72px | 700 | 1.1 | 0px | Alternative large heading with slightly more breathing room |
| Heading SM | Source Sans Pro | 28px | 400 | 1.1 | 0px | Medium-weight heading for section blocks |
| Heading MD | Source Sans Pro | 32px | 700 | 1.15 | 0px | Bold subsection heading |
| Heading XS | Source Sans Pro | 26px | 700 | 1.2 | -0.26px | Smaller bold heading with tight tracking |
| Body XL | Source Sans Pro | 22px | 400 | 1.45 | -0.22px | Large body copy; generous line height for readability |
| Label XL | Source Sans Pro | 22px | 400 | 1.45 | 0px | Input labels and placeholder text at large scale |
| Body LG | Source Sans Pro | 18px | 600 | 1 | -0.18px | Semi-bold link text and accented body copy |
| Label LG | Source Sans Pro | 14px | 600 | 1 | -0.18px | Semi-bold labels and small interactive text |
| Body MD | Roboto | 16px | 400 | 1.6 | -0.22px | Standard paragraph body; warm line height |
| Body SM | Roboto | 14px | 400 | 1.6 | -0.22px | Small body copy, captions, secondary text |
-1.92px, -1.08px) on hero headlines commands attention.-0.22px, -0.18px) across smaller sizes maintain visual tightness without sacrificing clarity.Primary Button
{colors.primary} (#0400F5){colors.canvas} (#FFFFFF)13px 24px 12px 24px{rounded.full} (70px)#3352FF; text #FFFFFF#7A8EFF solid 3px#BDC7FF; text #FFFFFFText Button (Ghost)
{colors.canvas} (#FFFFFF){colors.primary} (#0400F5)13px 24px 12px 24px{rounded.full} (70px)#0400F5; background rgba(0, 0, 0, 0)#BDC7FF; text #0400F5#3352FF; text #0400F5Icon Button
rgba(0, 0, 0, 0) (transparent)#FFFFFF0px{rounded.full} (70px)#FFFFFF; opacity 1; transform translateX(0%)Icon Button Small
rgba(0, 0, 0, 0) (transparent)#0000000px{rounded.none} (0px)Card Default (Hero Card)
rgba(0, 0, 0, 0) (transparent){colors.accent} (#242E39)55px 0px 55px 0px{rounded.none} (0px)#0400F5; transform translate3d(10px, 0px, 0px); opacity 1Card Small (Product Card)
{colors.canvas} (#FFFFFF)#00000015px 0px 0px 0px0px 24px 24px (rounded bottom corners only)#E6E6E6 0px 6px 24px 0px#0400F5; transform translate3d(10px, 0px, 0px); opacity 1; scale 1.05Input Default (Search)
{colors.canvas} (#FFFFFF){colors.primary} (#0400F5)10px 15px 10px 15px{rounded.full} (17px)#0F71F0 solid 4px; outline-color #0F71F0; border-radius 20px#7A8EFF solid 0px 0px 0px 2px (inset); border-radius 2pxNavigation Default
rgba(0, 0, 0, 0) (transparent)#0000000pxLink Default (Dark Background)
{colors.canvas} (#FFFFFF)0px 24px 0px 24pxrgba(0, 0, 0, 0) (transparent)#FFFFFF; text-decoration underline; opacity 1; transform translateX(0%) or translate3d(10px, 2px, 0px)#0400F5#0400F5; outline none; box-shadow #0400F5 0px 0px 0px 2px; border-radius 2pxLink Large (Footer)
#FFFFFF0px 0px 10px 0px#FFFFFF; background #FFFFFF or opacity effectsFooter Default
{colors.primary} (#0400F5){colors.accent} (#242E39)127px 0px 20px 0px{rounded.none} (0px)#FFFFFF when on brand backgroundThe system follows a base unit of 4px, doubling and scaling outward. Core scale:
{spacing.xxs} = 8px — tight micro-spacing (icon gaps, inline padding){spacing.xs} = 12px — small gaps between elements{spacing.sm} = 16px — comfortable padding for cards and sections{spacing.md} = 20px — standard section spacing{spacing.lg} = 24px — robust spacing between major blocks{spacing.xl} = 28px — generous whitespace around key sections{spacing.xxl} = 32px — major layout breathing room{spacing.xxxl} = 36px — emphatic spacing for visual separation{spacing.section} = 40px — full section padding and gaps{spacing.band} = 44px — hero band and full-width section spacingUsage: Card padding uses {spacing.lg} (24px); section separators use {spacing.band} (44px); button padding uses {spacing.sm} (16px) internally. Generous use of {spacing.xl} and {spacing.xxl} between major content zones reinforces a premium, uncluttered aesthetic.
{colors.surface-alt} — #F0F5FF) and white ({colors.canvas} — #FFFFFF) bands create rhythm and visual clarityWhitespace is deliberate and functional, not accidental. Large hero sections dominate the fold; copy is spaced generously; card grids maintain breathing room between items. This reinforces a premium, high-trust aesthetic—less clutter, more focus. Sections are separated by full-height bands rather than subtle borders, creating zones of visual and conceptual clarity.
{rounded.none} = 0px — sharp corners on full-width sections, large cards, inputs, and hero containers{rounded.full} = 9999px — pill-shaped buttons, icon buttons, small search inputs, creating a softer, more approachable UI layerComponent Contexts:
{rounded.full} (pill)0px 24px 24px (partially rounded bottom corners; no overall scale token){rounded.none} (sharp){rounded.full} (pill){rounded.none} (sharp)Gen's elevation strategy is color-blocking—depth comes from surface changes and color shifts, not from layered shadows. This creates a flat, modern aesthetic while maintaining visual hierarchy through tone and position.
| Level | Treatment | Use |
|---|---|---|
| Base | Flat, no shadow | Primary surfaces, full-width sections, hero areas |
| Lifted | Shadow #E6E6E6 0px 6px 24px 0px | Product cards; small contained components that float above background |
| Interactive Hover | Transform: translateY(-3px) or translate3d(10px, 0px, 0px) | Cards and links; micro-animations create perceived lift without shadow |
| Active / Pressed | Box-shadow rgba(0, 0, 0, 0.2) 0px 8px 17px 0px | Button active state; momentary depth reinforcement |
Shadow Philosophy: The system avoids heavy, diffused shadows. When shadows appear (e.g., on product cards), they are subtle (0px 6px 24px), cool-toned (#E6E6E6), and signal a contained, interactive element. Most depth comes from color blocking—hero sections in navy or blue contrast against white; alternating bands in {colors.surface-alt} create visual stepping. This approach feels modern, clean, and digitally native.
rgba(0, 0, 0, 0.3)) — reduced prominence for inactive states{colors.primary} (#0400F5) for all primary CTAs and interactive accents. It is the brand's signal and must command attention.{spacing.band} (44px) to separate major zones and reinforce breathing room.-1.92px and -1.08px respectively; this density is part of the brand voice.{rounded.full} — 70px border-radius). Consistency across all CTAs reinforces trust and familiarity.{colors.surface-alt}), and navy ({colors.accent}) to create depth without heavy drop-shadows.{rounded.none} — 0px) grounds the design and prevents a childish appearance.#E6E6E6 0px 6px 24px 0px) only on contained cards; elsewhere, rely on color contrast.#0400F5), navy (#242E39), and neutrals; deviations fragment recognition.{colors.accent-1} or {colors.accent-2}) as semantic signals. They are visual accents only; if you need error/success states, note the gap rather than guessing.{spacing.band} or {spacing.xxxl} separation, not more content.{colors.primary} focus outlines must always be visible.| Breakpoint | Viewport Width | Content Column | Largest Heading | Body Font Size | Key Change |
|---|---|---|---|---|---|
| Mobile | 375px | 359px | 48px | 18px | Single-column layout; nav links visible; minimal padding |
| Tablet | 768px | 752px | 66px | 20px | Typography scales up; still single-column primary content |
| Desktop (Small) | 1024px | 1000px | 80px | 21px | Multi-column layouts available (6-col grid); full nav visible |
| Desktop (Large) | 1280px | 1256px | 94px | 22px | Hero headings reach 94px; full nav with all links visible |
| Desktop (XL) | 1440px | 1312px | 96px | 22px | Maximum width 1312px content; display-xxl headings at full size |
No menu toggle is triggered within the measured range (375–1440px); all nav links remain visible.
0px 24px 0px 24px — 24px horizontal padding provides adequate clickable area on smaller link elements{colors.primary} — #0400F5) — electric blue, use on all call-to-action buttons and interactive accents{colors.canvas} — #FFFFFF) — white page background and button fill for ghost buttons{colors.surface-alt} — #F0F5FF) — pale blue, use for alternating section bands and card backgrounds{colors.ink} — #000000) — black, use for primary headings and body copy for maximum contrast{colors.accent} — #242E39) — dark navy, use for hero sections and secondary text emphasis{colors.accent-1} — #666D74) and Accent 2 ({colors.accent-2} — #BDC7FF) — mid-gray and light periwinkle, use for visual decoration only (no semantic meaning){rounded.full} — 70px) with #0400F5 background and white text. No exceptions; this consistency drives brand recognition.-1.92px at 96px, -1.08px at 72px). This density is intentional and non-negotiable.{colors.canvas}) and pale blue ({colors.surface-alt}). This color-blocking creates visual rhythm without shadows.{rounded.full} (pill-shaped); all other containers use {rounded.none} (sharp). No hybrid radii.#7A8EFF or #0F71F0. Every interactive element must have a visible, accessible focus ring.{spacing.band} (44px minimum). Do not crowd zones; whitespace is a premium resource.#E6E6E6 0px 6px 24px 0px); no shadows on buttons, large sections, or overlays. Depth is achieved via color blocking.#0400F5. Match foreground color to background contrast.#0400F5) or note this as a future design task.{colors.accent-1} and {colors.accent-2}) have no measurable semantic role. They are described as decorative; their actual usage is unknown.