Geniq

version: alpha
name: Geniq-design-analysis
description: An AI-agent SaaS marketing system bathed in green-black depth. Everything is a pill or a soft-rounded bento card on a #060c09 canvas, energized by one signature cyan-to-green gradient (#409fbe → #20c762 → #008436) that flows through headline text, primary buttons, stat numerals, active FAQ rows, and the glow along panel edges. Inter at 500/400 with tight -2px tracking; dashboard mockups and charts supply the density.

colors:
  gradient-from: "#409fbe"
  gradient-mid: "#20c762"
  gradient-to: "#008436"
  on-gradient: "#e8e8e8"
  canvas: "#060c09"
  surface-panel: "#0d0d0d"
  surface-card: "#111511"
  surface-raised: "#151a17"
  glass: "rgba(255, 255, 255, 0.08)"
  glass-soft: "rgba(255, 255, 255, 0.06)"
  text: "#e8e8e8"
  text-body: "#b3b3b3"
  text-muted: "#8a8a8a"
  white: "#ffffff"
  link-green: "#00c66a"
  accent-amber: "#fbbb00"
  accent-blue: "#0082f3"

typography:
  hero-display:
    fontFamily: "Inter, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -2px
  display-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -2px
  display-md:
    fontFamily: "Inter, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -1.5px
  card-title:
    fontFamily: "Inter, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -1px
  stat-numeral:
    fontFamily: "Inter, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -2px
  stat-numeral-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.5px
  body:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  button:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0
  nav-link:
    fontFamily: "Inter, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0

rounded:
  xs: 6px
  sm: 8px
  md: 16px
  lg: 24px
  pill: 100px

spacing:
  xxs: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  xxl: 64px
  section: 96px

components:
  button-primary:
    backgroundImage: "linear-gradient(93.31deg, {colors.gradient-from} 4%, {colors.gradient-to} 96%)"
    textColor: "{colors.on-gradient}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 6px 6px 6px 20px
  button-outline:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.glass}"
    padding: 12px 24px
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.canvas}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  top-nav:
    backgroundColor: "rgba(13, 13, 13, 0.7)"
    textColor: "{colors.text}"
    typography: "{typography.nav-link}"
    height: 64px
    rounded: "{rounded.pill}"
  announcement-pill:
    backgroundColor: "rgba(13, 13, 13, 0.7)"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.glass}"
    padding: 6px 16px 6px 6px
  bento-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 24px
  feature-panel:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 48px
  case-card:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    borderWidth: 1px
    borderColor: "{colors.glass-soft}"
    padding: 32px
  faq-row:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.md}"
    borderWidth: 1px
    borderColor: "{colors.glass-soft}"
    padding: 20px 24px
  faq-row-active:
    backgroundImage: "linear-gradient(93.31deg, rgba(64, 159, 190, 0.18), rgba(0, 132, 54, 0.18))"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    borderWidth: 1px
    borderColor: "rgba(32, 199, 98, 0.5)"
  stat-chip:
    backgroundColor: "{colors.gradient-to}"
    textColor: "{colors.white}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  input-field:
    backgroundColor: "{colors.glass-soft}"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    borderWidth: 1px
    borderColor: "{colors.glass-soft}"
    padding: 8px 16px
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    padding: "{spacing.xxl} 24px"

Overview

Geniq's web presence runs on a single idea: one aurora gradient flowing through a green-black void. The canvas is #060c09 — black with a deliberate green undertone — and every energetic element on the page is painted with the same signature gradient: cyan #409fbe flowing at a 93° angle into green #20c762 and settling into deep green #008436. It colors the headline text ("Build AI Agents That" goes blue→green mid-sentence while "Actually Deliver." stays off-white), the primary button fill, the +/− toggle of the active FAQ row, the giant stat numerals ("50K+", "<15m", "93%"), and a 2px glow along the bottom edge of the closing CTA panel.

The signature is soft geometry with dense content. Everything rounds: nav and buttons are full pills, cards are 24px bentos, FAQ rows 16px, inputs 8px. Inside the soft chrome, content is data-heavy — a full dashboard mockup sits directly in the hero, bento cards embed Kanban boards, line charts, and donut charts, feature panels show user tables. Inter does everything at just two weights (500/400) with -2px tracking at display sizes; hierarchy is size, not weight.

Key Characteristics:

• Green-black canvas #060c09 with hero photography/textures that fade to canvas via a white→transparent overlay gradient.
• One signature gradient — linear-gradient(93.31deg, #409fbe, #20c762, #008436) — reused across text, buttons, toggles, numerals, and glows. It is the brand.
• Pill-everything: buttons, nav shell, announcement badges, stat chips, toggle buttons; the circular white arrow chip riding the right end of the primary button is a motif.
• Bento composition: a 2+3 feature grid, alternating full-width panels, a case-study carousel — all 24px-rounded dark cards with embedded data visualizations.
• Numbered process/FAQ rows ("01"–"05") in small square chips; the active row switches on a gradient tint + gradient border.
• Inter 500/400 only, -2px display tracking, sentence case, no uppercase — including buttons.
• Data-visualization accents: chart lines draw in exactly the gradient's endpoint colors (blue + green), keeping imagery on-palette.

Colors

Source pages analyzed: hero with dashboard mockup, partners strip, 2+3 bento feature grid, two full-width feature panels (automation stats, no-code), case-study carousel, FAQ, blog, closing CTA with perspective grid, footer with newsletter.

Brand Gradient (the palette's engine)

• Cyan start ({colors.gradient-from} — #409fbe): The cool end of the aurora. Left/leading edge of every gradient fill; chart line color #1.
• Green mid ({colors.gradient-mid} — #20c762): The energetic center. Chart line color #2, positive metric deltas ("+12% from last month"), active states.
• Deep green ({colors.gradient-to} — #008436): The settling end. Dark green fills, stat chips, gradient terminus.
• On-gradient text ({colors.on-gradient} — #e8e8e8): Off-white used as text on gradient fills — never pure black, keeping the soft look.
• Canonical fill: linear-gradient(93.31deg, #409fbe 4%, #008436 96%). Headline text variant interleaves off-white stops (#409fbe → #e8e8e8 → #20c762), so words shift hue mid-phrase.

Surface Ladder

• Canvas ({colors.canvas} — #060c09): Page background — green-tinted near-black. The hero texture and section imagery always dissolve back into it.
• Panel ({colors.surface-panel} — #0d0d0d): Feature panels, case cards, FAQ container, nav pill fill (~70% opacity for glass).
• Card ({colors.surface-card} — #111511): Bento cards and FAQ rows, usually with a faint blue/green corner glow layered on top.
• Raised ({colors.surface-raised} — #151a17): Small chips and inner tiles.
• Glass ({colors.glass} rgba(255,255,255,0.08) / {colors.glass-soft} 0.06): Borders on pills and outline buttons, footer input fill, hairline separators.

Text

• Off-white ({colors.text} — #e8e8e8): All headlines, titles, and emphasis — the system prefers off-white over pure white for large text.
• Body ({colors.text-body} — #b3b3b3): Paragraphs, ledes, descriptions. The workhorse gray.
• Muted ({colors.text-muted} — #8a8a8a): Roles, fine print ("* No Credit Card Required.").
• White ({colors.white}): Button text on dark pills, chip labels, active toggle glyphs.
• Support hues: {colors.link-green} (#00c66a) for positive deltas and active footer links; {colors.accent-amber} (#fbbb00) and {colors.accent-blue} (#0082f3) appear only inside dashboard mockup illustrations — never in the marketing chrome.

Typography

Font Family

• Everything: Inter, sans-serif — one family, weights 500 (display, buttons, nav) and 400 (body). No serif, no mono, no secondary face.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
{typography.hero-display}	56px	500	1.0	-2px	Hero headline (gradient text on line 1)
{typography.display-lg}	44px	500	1.2	-2px	Section headlines
{typography.display-md}	40px	500	1.2	-1.5px	Panel/FAQ section headlines
{typography.stat-numeral}	56px	500	1.1	-2px	Hero-scale stats ("50K+") — gradient text
{typography.stat-numeral-sm}	40px	500	1.1	-1.5px	Panel stats ("42+", "98%", "<15m")
{typography.card-title}	24px	500	1.3	-1px	Card titles, FAQ questions
{typography.body}	16px	400	1.5	0	Ledes, descriptions, buttons, nav
{typography.caption}	14px	400	1.45	0	Chips, roles, fine print

Principles

• Tight and medium, never loud. Display is 500 weight with -2px tracking; there is no bold anywhere in the marketing chrome.
• Gradient is a typographic effect. First headline line and stat numerals use background-clip:text with the brand gradient; never apply it to body copy.
• Sentence case everywhere, including buttons and nav — no uppercase transformations exist in the system.
• Scale, not weight, separates levels: 56 → 44 → 40 → 24 → 16 → 14 with tracking easing from -2px to 0.

Note on Font Substitutes

Inter is an open Google Font — load it directly (400/500). No substitution needed. Fallback stack Inter, sans-serif is safe; Arial alters the tight-tracking rhythm slightly but survives.

Layout

Spacing System

• Base unit: 8px. Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 48px · {spacing.xxl} 64px · {spacing.section} 96px.
• Section vertical padding: {spacing.section} (96px).
• Bento gaps: 24px; card padding 24px; panel padding 48px.
• Button padding: asymmetric 6px 6px 6px 20px — the 6px right edge cradles the circular arrow chip.

Grid & Container

• Max content width: ~1200px centered.
• Hero: centered stack — announcement pill, 2-line display headline, lede, button pair — above a full-width 24px-rounded dashboard mockup.
• Bento grid: row of 2 large cards, then row of 3 standard cards, 24px gaps.
• Feature panels: alternating full-width rounded panels (copy + stats left / mockup right, then mockup left / copy right).
• Case carousel: ~800px-wide cards with photo right, peeking neighbors at the viewport edges.
• FAQ: one large rounded container holding 5 stacked rows.

Whitespace Philosophy

Medium and even: 96px sections, 24px gaps. The visual richness comes from the embedded charts, mockups, and gradient glows inside cards, so the layout itself stays calm and predictable. The closing CTA breaks the pattern with a perspective grid floor and gradient edge.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow	All cards, pills, rows
Glass border	1px rgba(255,255,255,0.06–0.08)	Pills, outline buttons, FAQ rows, inputs
Corner glow	Faint blue/green radial gradients inside card backgrounds	Bento cards, feature panels (one panel tinted violet-blue)
Gradient edge	2px brand-gradient bottom border + glow	Closing CTA panel
Mockup depth	Dark-window screenshots with inner borders	Hero dashboard, panel mockups

Shadow philosophy. No drop-shadows anywhere. Depth is delivered by glass borders, corner glows, and the mockups' own window chrome. The gradient edge-glow on the CTA panel is the single "light source" moment on the page.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.xs}	6px	Tiny tags, mini chips
{rounded.sm}	8px	Inputs, numbered FAQ chips, small tiles
{rounded.md}	16px	FAQ rows, images inside cards
{rounded.lg}	24px	Bento cards, panels, case cards, hero mockup
{rounded.pill}	100px	Buttons, nav shell, badges, stat chips, toggles

Geometry Rules

• Pills for actions and badges; 24px for containers. Nothing in between except FAQ rows (16px) and inputs (8px).
• The arrow chip: the primary button ends in a circular off-white chip holding the "↗" arrow — square-ish content, circular cap.
• Toggle circles: FAQ +/− buttons are black circles (closed) or gradient circles (open).
• Social icons: circular glass-bordered buttons in the footer.
• Avatars and logo badges: circles; dashboard mockup avatars may be rounded squares.

Components

Top Navigation

top-nav — A floating pill shell (dark translucent ~70% opacity, {rounded.pill}): logo left ("Geniq" with green/blue linked-shapes glyph), center links (Home, About Us, Feature, Contact Us, Pages ▾), right a {component.button-primary} "Try Geniq Free" with arrow chip. The active link sits in its own darker-green pill with a leading dot — pills within the pill.

Buttons

button-primary — Brand-gradient pill, {colors.on-gradient} text, {typography.button} (16px/500), padding 6px × 6px × 6px × 20px, ending in a 36px circular off-white chip with "↗". Used for every "Try Geniq Free" and "Submit". button-outline — Transparent pill, 1px {colors.glass} border, white text, leading circular play icon ("Watch Video"). button-white — Solid white pill, canvas-black text ("Explore Automation") — the neutral action on gradient-tinted panels. Hover states brighten fills; pills never change size.

Badges & Chips

announcement-pill — Dark glass pill with a leading gradient tag ("Task" in its own small gradient pill) + gray text ("5k+ agents deployed globally"); centered above the hero headline. Section-head variants carry a "✦" icon ("Common Questions", "News & Articles") in green. stat-chip — Small solid deep-green pill ("1400+ Tasks Done", "Linked") floating over charts; white 14px text.

Cards & Containers

bento-card — {colors.surface-card} with faint blue/green corner glows, {rounded.lg} (24px), 24px padding: {typography.card-title} white title ("Every leading model"), {colors.text-body} description, then an embedded visualization — mini Kanban, dual-color line chart (blue + green), donut chart, logo medallion, rating badge ("4.8", "563k+ Reviews"). Top row cards are double-width. feature-panel — Full-width 24px panel with copy on one side and a dark-window mockup on the other; contains inline stats at {typography.stat-numeral-sm} ("42+ Hrs saved per team/week", "98% Accuracy on routine tasks", "<15m From idea to live agent") and a {component.button-white}. Tag chip ("No-Code") sits above the title. Backgrounds may tint the gradient at low opacity (one panel glows violet-blue). case-card — Wide horizontal card: client logo top, 24px white title, body copy, author name + role bottom-left, 16px-rounded photo right. Carousel arrows are circular glass buttons centered below. faq-row — 16px-rounded row on {colors.surface-card} with glass border: 8px square numbered chip ("01"–"05", dark, off-white text), 24px question, circular toggle right. faq-row-active switches the row to a gradient tint with a 1px green gradient border and flips the toggle to a gradient circle with "−", revealing body copy in {colors.text-body}. input-field — Newsletter email input: {colors.glass-soft} fill and border, 8px radius, 8px × 16px padding, {colors.text-body} placeholder; paired with a small gradient "Submit" pill.

Closing CTA Panel

Full-width 24px panel with a perspective grid floor drawn in faint green lines, "Get Started Today / Your First Agent Is 15 Minutes Away" headline, a {component.button-primary}, "* No Credit Card Required." fine print, and a 3-up gradient-numeral stat row ("50K+ Agents deployed globally", "<15m From idea to live agent", "93% Average containment rate") divided by thin glass rules. A 2px brand-gradient line runs along the panel's bottom edge.

Footer

Four columns: logo + tagline + newsletter form + circular glass social buttons (Facebook, LinkedIn, X, Instagram); "Useful Links" / "Site Links" / "Utility Pages" columns with green short-underline accents under headings, active link in {colors.link-green}. Bottom bar after a glass divider: "Designer By Anova Flow" and "© Copyright - Geniq | License Powered by Webflow".

Do's and Don'ts

Do

• Use the canonical gradient ({colors.gradient-from} → {colors.gradient-to} at ~93°) for every energetic element: one fill recipe, many surfaces.
• Apply gradient text only at display scale (headline first line, stat numerals) via background-clip; keep body copy plain {colors.text-body}.
• Keep buttons as pills with 16px/500 labels and — on the primary — the circular arrow chip at the right end.
• Round containers at 24px, rows at 16px, inputs at 8px, actions at 100px.
• Embed data visualizations inside cards using only the gradient's endpoint colors for lines and fills.
• Number stacked rows (FAQ, process) with small square chips, and mark the active row with the gradient tint + border.
• Dissolve all imagery back into {colors.canvas} — no hard image edges against the background.

Don't

• Don't introduce a second accent family — amber and blue live only inside dashboard mockup illustrations.
• Don't use pure black text on gradient fills; {colors.on-gradient} (#e8e8e8) keeps fills soft.
• Don't bold headlines beyond 500 or set anything uppercase — the system's voice is tight and medium.
• Don't add drop-shadows or heavy gradients to chrome; depth is glass borders, corner glows, and mockup windows.
• Don't apply the gradient to body text, borders of inactive elements, or backgrounds at full opacity — it is a highlight, not a wallpaper.
• Don't mix chart colors outside the gradient endpoints; blue and green lines are the visualization palette.
• Don't square the pills — a rectangular button immediately breaks the system.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 480px	Hero at ~40px; bento stacks to 1 column; panels stack mockup-under-copy; nav collapses to logo + hamburger; CTA stats stack vertically
Large phone	481–768px	2-col bento becomes 1–2; case card stacks photo above text; footer columns wrap to 2
Tablet	769–1024px	Bento 2-col; hero at ~48px; nav pill keeps links
Desktop	1025–1440px	Full 2+3 bento; hero at 56px; carousel shows peeking neighbors
Wide desktop	≥ 1441px	Content centers at ~1200px; canvas margins widen

Collapsing Strategy

• Top nav: the pill shell collapses below 768px into logo + hamburger; the gradient CTA survives as a compact pill.
• Bento grid: 2+3 → 2-col → 1-col; embedded charts scale with cards.
• Split panels: copy and mockup stack; stats keep their 2-up pairing.
• Case carousel: becomes a horizontal swipe stack with photos leading.

Image Behavior

• Dashboard mockups are dark-window screenshots that blend into panels; they scale fluidly and keep 16–24px rounding.
• Case-study photos crop center at 4:5-ish inside 16px rounding.
• Hero background textures fade to canvas via the white→transparent overlay — never hard-cropped.
• Lazy-loading below the first viewport; the hero mockup loads eagerly.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly ({component.bento-card}, {{component.faq-row-active}}).
2. Variants (-active) live as separate entries in components:.
3. Use {token.refs} everywhere — never inline hex; the gradient stops must stay consistent across text, buttons, and glows.
4. New stats: {typography.stat-numeral} with gradient text + {colors.text-body} label below.
5. New actions: pill with 16px/500 label; choose gradient (primary), outline (secondary), or white (on tinted panels).
6. When in doubt about emphasis: apply the gradient or step the surface ladder — never add weight or shadows.

Known Gaps

• Pricing page, careers, and integration detail pages were not analyzed — documented structure covers the homepage.
• The hero background is a CDN texture image; its exact halftone pattern is not tokenized — recreate with a subtle green-noise texture fading to {colors.canvas}.
• Blog card hover states and the "News & Articles" list layout were only partially captured.
• The partners strip logos render at low opacity; exact treatment (grayscale level, spacing) was approximated.
• Video lightbox contents and autoplay behavior were not analyzed.
• Form validation and error states were not surfaced; inputs are documented in their neutral state only.