Setrex

version: alpha
name: Setrex-design-analysis
description: A neon-lime SaaS marketing system on a void-black canvas. One grotesque family set at medium weight with aggressive negative tracking, fully pill-shaped buttons, and soft 26px rounded cards floating over a starfield of dark surfaces. A single electric lime (#cffe25) powers CTAs, icons, stars, and an entire inverted pricing tier — everything else is white-on-black with photography and dashboard mockups doing the depth.

colors:
  primary: "#cffe25"
  primary-soft: "#f3ff9b"
  chip-mint: "#d8f7d6"
  on-primary: "#010104"
  canvas: "#010104"
  surface-panel: "#050508"
  surface-card: "#0c0c0f"
  surface-card-2: "#0d0d10"
  text: "#ffffff"
  text-body: "rgba(210, 210, 210, 0.8)"
  text-muted: "#9a9a9e"
  hairline: "rgba(255, 255, 255, 0.1)"
  hairline-solid: "#222222"
  success: "#00cd76"

typography:
  hero-display:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 62px
    fontWeight: 500
    lineHeight: 1.13
    letterSpacing: -0.06em
  display-lg:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.06em
  display-md:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.19
    letterSpacing: -0.06em
  title:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.05em
  card-title:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.03em
  quote:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.04em
  body:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
  caption:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0
  button:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
  nav-link:
    fontFamily: "\"BDO Grotesk\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em

rounded:
  xs: 4px
  sm: 7px
  md: 16px
  lg: 26px
  pill: 100px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.text}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 12px 24px
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.nav-link}"
    height: 72px
  hero-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.hero-display}"
    padding: "{spacing.section} 24px"
  announcement-pill:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text-body}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 8px 16px
  feature-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 24px
  pricing-card:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.text}"
    rounded: "{rounded.lg}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 32px
  pricing-card-featured:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.lg}"
    padding: 32px
  stat-chip:
    backgroundColor: "{colors.chip-mint}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 15px
  faq-row:
    backgroundColor: transparent
    textColor: "{colors.text}"
    typography: "{typography.card-title}"
    rounded: "{rounded.sm}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
    padding: 20px 24px
  testimonial-panel:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text}"
    typography: "{typography.quote}"
    borderWidth: 1px
    borderColor: "{colors.hairline}"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.text-body}"
    typography: "{typography.body}"
    padding: "{spacing.xxl} 24px"

Overview

Setrex's web presence runs on a single idea: one electric lime glowing in a void. The canvas is not just dark — it is #010104, black with the faintest blue-violet undertone, so deep that photography (a grayscale Earth from orbit) and product mockups appear to float in space. Everything soft: cards round at 26px, buttons are full pills, avatars are circles. And everything energetic: a single neon lime ({colors.primary} #cffe25) fires the primary CTAs, outlined feature icons, rating stars, active footer links — and, at maximum volume, an entire inverted pricing card.

The signature is medium-weight type with aggressive negative tracking. One grotesque family (BDO Grotesk) does everything at just two weights: 500 for display, 400 for body — but display sizes carry -0.06em letter-spacing, pulling headlines so tight they read as designed blocks rather than strings of words. There are no uppercase transformations, no serifs, no second display face; hierarchy is size and tracking alone. Copy is short, centered, and repeated ("Fintech is its potential to promote financial inclusion…" appears as the universal filler lede under every section head).

Key Characteristics:

• Void-black canvas #010104 with a 4-step near-black surface ladder (#050508 → #0c0c0f → #0d0d10); never pure #000.
• Exactly one accent: neon lime #cffe25, with pale-lime #f3ff9b and mint #d8f7d6 as tint family for chips and highlights.
• Everything interactive is a full pill ({rounded.pill} 100px) — buttons, announcement badges, nav CTA.
• BDO Grotesk at only 500/400 weights; -0.06em tracking at display sizes is the voice. No uppercase anywhere.
• Soft geometry: 26px card radius, 16px media radius, 7px FAQ rows, circular avatars and icon badges.
• Depth from content, not chrome: full-bleed space photography, macOS-window dashboard mockups with traffic lights, and glow-free flat surfaces.
• Centered composition — heroes, section heads, and ledes stack on a central axis; cards and panels fill the flanks.

Colors

Source pages analyzed: hero (Earth), logo strip, counters band, feature overview panel, 3×2 feature grid, pricing, testimonial slider, FAQ, CTA repeat, footer.

Brand & Accent

• Neon Lime ({colors.primary} — #cffe25): The single accent and the brand. Primary CTA fill (near-black text), outlined feature icons, the ★4.9 rating star, the active footer link, the logo glyph, and — fully inverted — the featured pricing card. It is the only saturated color on the page.
• Pale Lime ({colors.primary-soft} — #f3ff9b): A one-step tint used for highlight moments inside dark cards.
• Mint ({colors.chip-mint} — #d8f7d6): Soft green-white reserved for the small stat-label chips ("Years of experiences", "Client satisfaction rate").
• Success Green ({colors.success} — #00cd76): macOS traffic-light green inside dashboard mockups (with red/yellow siblings) — decorative, not a system token.
• Lime is never used for body text and never appears as a text color on dark backgrounds except logos and links at title weight.

Surface Ladder

• Canvas ({colors.canvas} — #010104): Page background, hero, testimonial quote panel, footer. Black with a blue-violet breath — deliberately not #000000.
• Panel ({colors.surface-panel} — #050508): Announcement pill, pricing dark card, secondary bands. One breath above canvas.
• Card ({colors.surface-card} — #0c0c0f / {colors.surface-card-2} #0d0d10): Feature grid cards, mockup windows. Two near-identical steps used interchangeably; both read as "raised" against canvas.
• Hairline ({colors.hairline} — rgba(255,255,255,0.1), solid variant {colors.hairline-solid} #222222): 1px borders on FAQ rows, pricing cards, dividers inside cards, and the footer's top rule.

Text

• White ({colors.text} — #ffffff): Headlines, card titles, prices, button labels on dark, footer column headings.
• Body ({colors.text-body} — rgba(210,210,210,0.8)): Section ledes, card descriptions — a translucent white rather than gray, keeping the "light in the void" feel.
• Muted ({colors.text-muted} — #9a9a9e): Roles ("Co Founder of Metrilo"), fine print, inactive states.

Typography

Font Family

• Everything: "BDO Grotesk", Arial, sans-serif — one family, two weights (500 display / 400 body). No serif, no mono, no secondary face.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
{typography.hero-display}	62px	500	1.13	-0.06em	Hero headline
{typography.display-lg}	52px	500	1.15	-0.06em	Section headlines ("Custom-designed modular…")
{typography.display-md}	42px	500	1.19	-0.06em	Panel headlines ("Designed with an intuitive…")
{typography.title}	32px	500	1.25	-0.05em	Sub-panel titles ("Easy Integration")
{typography.quote}	24px	500	1.4	-0.04em	Testimonial quotes
{typography.card-title}	20px	500	1.3	-0.03em	Feature card titles, FAQ questions, "What's Included:"
{typography.body}	16px	400	1.5	-0.01em	Ledes, descriptions, buttons, nav
{typography.caption}	14px	400	1.45	0	Announcement pill, chips, roles, fine print

Principles

• Weight 500 is the loudness ceiling. No 700/800/900 anywhere — impact comes from size plus -0.06em tracking, which makes headlines feel denser than their weight suggests.
• Tracking tightens as size grows. Display at -0.06em, titles at -0.05em, quotes at -0.04em, body at -0.01em, captions at 0.
• Sentence case always. No uppercase transformations in the entire system.
• Prices are display type. "$299" renders at display scale with "/ month" as muted caption on the same baseline.
• No italic. Quotes are regular sentence case wrapped in typographic quotation marks.

Note on Font Substitutes

BDO Grotesk is a commercial typeface. Open equivalents:

• Space Grotesk (Google Fonts) shares the slightly quirky grotesque DNA — best for display; tighten to -0.04em so its native spacing doesn't over-tighten.
• Inter at weight 500 with -0.05em tracking is the safest all-purpose substitute for both display and body.
• Arial is the terminal fallback; the tight tracking does most of the branding work and survives substitution.

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), with generous inter-section gaps on canvas.
• Card padding: 24px (feature cards) to 32px (pricing); panel padding 48px.
• Button padding: compact 12px × 24px — pills stay small and quiet.

Grid & Container

• Max content width: ~1200px centered; heroes and section heads on a central axis.
• Feature grid: 3 columns × 2 rows of equal cards with ~24px gaps.
• Pricing: 2-up comparison, dark card and lime card side by side.
• Testimonial slider: split panel — square photo left, quote panel right, arrow-nav cells ruled below the photo.
• FAQ: single centered column of stacked bordered rows.
• Counters band: logo strip above, mint-chip stats below ("409+", "437+", "86+", "415+", "432+", "780+" with labels like "Years of experiences").

Whitespace Philosophy

Air is even and unexceptional — 96px sections, 24px gaps — because the compositions are centered and symmetrical. The drama is reserved for full-bleed imagery (the Earth hero fills ~90vh) and the isolated lime moments. Inside cards, 24px padding keeps the rounded corners generous.

Elevation & Depth

Level	Treatment	Use
Flat	No shadow	All cards, buttons, rows
Surface step	#010104 → #050508 → #0c0c0f	Cards and panels above canvas
Hairline	1px {colors.hairline}	FAQ rows, pricing borders, in-card dividers, footer rule
Content glow	Photography & mockups	Earth hero, dashboard windows — the only "depth"

Shadow philosophy. No drop-shadows on any component. Elevation is a flat brightness step plus an optional 1px hairline. The perceived depth of the page comes entirely from content: orbital photography and macOS-style dashboard mockups (traffic lights, wireframe rows) that simulate windows without casting shadows.

Shapes

Border Radius Scale

Token	Value	Use
{rounded.xs}	4px	Mint stat chips
{rounded.sm}	7px	FAQ rows, small inputs
{rounded.md}	16px	Images, mockup windows, inner media
{rounded.lg}	26px	Feature cards, pricing cards, large panels
{rounded.pill}	100px	Every button, announcement badge, nav CTA

Geometry Rules

• Pills are for actions only. Buttons and badges are pills; cards never are.
• Cards are uniformly soft — 26px outside, 16px for anything media inside.
• Avatars and rating stars: circles (avatars via border-radius: 50%, star as filled glyph).
• Photography: testimonial photo is a sharp-cornered rectangle butted against the quote panel; the Earth hero is a radial cutout on black, not a framed image.

Components

Top Navigation

top-nav — 72px transparent-on-canvas bar: lime logo glyph + "Setrex." wordmark left; center links (Home ▾, About, Features, Pricing, Blog) in {typography.nav-link}; right "Pages ▾" and a white pill button-secondary "Contact Us". Dropdowns are plain text panels. Links stay white; no lime in nav until hover states.

Buttons

button-primary — Lime pill, near-black text ({colors.on-primary}), {typography.button} (16px/400 — buttons are not bold in this system), padding 12px × 24px, leading "→" arrow on hero CTAs ("Get Started Now"). button-secondary — White pill, black text ("See Pricing", "Contact Us") — the quiet alternative to lime, same metrics. button-ghost — Transparent pill with 1px {colors.hairline} border, white text ("Get Started Now" on the dark pricing card). Hover states brighten the fill or the border; pills never change shape or gain shadows.

Section Headers

Centered stack: {typography.display-lg} white headline (often ending with a period — "Create with ease like never before."), then a 2-line {typography.body} lede in {colors.text-body} max ~60ch. The announcement variant adds a pill above: 1px hairline, panel background, 14px caption with a lime status dot ("● Intrducing Money manengement website").

Cards & Containers

feature-card — {colors.surface-card}, {rounded.lg} (26px), 24px padding. Contents: lime outlined stroke icon (head, people, document, thumbs-up, gear, bell), {typography.card-title} white title ("Project Planning"), {typography.body} description in {colors.text-body}. No hover transform observed. pricing-card — Dark variant: {colors.surface-panel}, hairline border, 32px padding; plan blurb, hairline divider, display-scale price with muted "/ month", "What's Included:" title, check-circle list, full-width {component.button-ghost}. pricing-card-featured — identical structure fully inverted in {colors.primary} with {colors.on-primary} text, hairline dividers in translucent black, and a white {component.button-secondary}. The lime card is the only large lime surface on the site. stat-chip — Tiny mint rectangle ({rounded.xs}, 4px padding 4px × 15px) labeling a display-scale counter; counters render as spaced white digits with "+". faq-row — Full-width row, 1px {colors.hairline} border, {rounded.sm} (7px), 20px × 24px padding: {typography.card-title} question + chevron. Stacked with small gaps on canvas. testimonial-panel — Split panel: square portrait photo left with arrow-nav cells ruled beneath; right side on canvas with lime ★ + "4.9" score, {typography.quote} quotation in white, name (white, 500) + role ({colors.text-muted}), client logo right-aligned. feature-panel — Large showcase card ({colors.surface-card-2}, {rounded.lg}, ~48px padding): left column with lime-tinted tag pill + {typography.display-md} headline + body, right column a 16px-rounded macOS dashboard mockup (traffic lights, wireframe rows).

Inputs

The analyzed homepage surfaces no persistent form inputs beyond the FAQ and buttons; footer carries link columns instead of a newsletter form. Contact-page inputs, per template convention, follow the faq-row treatment: 1px hairline, {rounded.sm}, transparent background, white 16px text.

Do's and Don'ts

Do

• Use {colors.primary} for exactly one loud moment per screen — the primary CTA, the featured card, or the rating star. Never two competing lime masses.
• Keep every button a perfect pill ({rounded.pill}) with non-bold 16px labels and a "→" arrow when it leads somewhere.
• Set all display type at weight 500 with the specified negative tracking — the tightness is the brand voice.
• Build surfaces from the 4-step near-black ladder; if a card needs separation, step one level and add a 1px {colors.hairline}.
• Round cards at 26px and media at 16px; keep pills away from containers.
• Use content for depth: full-bleed photography, window mockups, star-scapes — never shadows.
• Keep composition centered; heroes, headers, and ledes share one axis.

Don't

• Don't introduce a second accent hue — the traffic-light colors live only inside mockup illustrations.
• Don't bold buttons, nav links, or captions — 400/500 are the only weights in the system.
• Don't use uppercase, italics, or underlines for emphasis; use size, tracking, or lime.
• Don't set lime text at body sizes on dark — lime is a fill and icon color, not prose color.
• Don't use pure black #000 anywhere; the canvas is #010104 and the ladder depends on its undertone.
• Don't add drop-shadows or gradients to chrome; flatness is what makes the lime glow read.
• Don't loosen display tracking toward 0 — below -0.04em the headlines stop being Setrex.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	≤ 480px	Hero drops to ~44px; feature grid stacks to 1 column; pricing stacks (lime card below); nav collapses to logo + hamburger
Large phone	481–768px	2-column feature grid; testimonial panel stacks photo above quote; counters wrap to 2–3 per row
Tablet	769–1024px	3-column grid holds; nav keeps links; hero at ~52px
Desktop	1025–1440px	Full layout; hero at 62px; 2-up pricing
Wide desktop	≥ 1441px	Content centers at ~1200px; canvas breathes on both flanks

Collapsing Strategy

• Top nav: center links fold into a hamburger below 768px; the pill "Contact Us" survives as the compact CTA.
• Split panels: testimonial and feature panels stack media-over-copy; the 26px radius is preserved on the outer card.
• Pricing: the dark card leads; the lime featured card follows full-width below.
• Counters: the chip+number pairs wrap naturally in a centered flex row.

Image Behavior

• The Earth hero is a fixed radial composition that crops gracefully at every width; text stays centered over the void.
• Dashboard mockups scale with their panel and keep 16px rounding.
• Testimonial portraits crop center at 1:1 on desktop, wide on mobile.
• Lazy-loading below the first viewport; the hero Earth loads eagerly.

Iteration Guide

1. Focus on ONE component at a time. Reference its YAML key directly ({component.feature-card}, {{component.pricing-card-featured}}).
2. Variants (featured/inverted, ghost) live as separate entries in components:.
3. Use {token.refs} everywhere — never inline hex; the near-black ladder must stay consistent.
4. New headlines: weight 500, tracking -0.06em, sentence case, optional closing period.
5. New actions: pill, 16px/400 label, pick exactly one of lime / white / ghost per context.
6. When in doubt about emphasis: step the surface ladder or apply lime — never add weight or shadows.

Known Gaps

• Form inputs and validation states were not present on the analyzed homepage; input treatment is inferred from FAQ-row styling.
• The counters band renders numbers with animation; final values and exact chip pairings may vary by visit.
• Career, Integration, and 401/Password utility pages were not analyzed — documented structure covers the homepage.
• The "BDO Grotesk" license terms were not verified; substitutes documented in Typography.
• Dropdown menu styling (nav "Home ▾", "Pages ▾") was not captured in open state.
• Hover micro-interactions on feature cards were not observable in static analysis.