---
name: "Robylon"
description: "Enterprise AI customer support platform UI combining a deep navy canvas with energetic brand blue CTAs, soft feature cards, and clean dual-font typography."
version: "1.0"
colors:
  canvas: "#031225"
  canvas-light: "#ffffff"
  surface-soft: "#f5f7f9"
  surface-muted: "#1c2a3b"
  ink: "#ffffff"
  ink-strong: "#0e0e0f"
  body: "#4c6380"
  body-muted: "#a4b4cc"
  primary: "#155eef"
  primary-strong: "#0040c1"
  on-primary: "#ffffff"
  hairline: "rgba(255, 255, 255, 0.16)"
  hairline-soft: "#d9dfe8"
  overlay: "rgba(3, 18, 37, 0.85)"
  accent-blue: "#2979ff"
  accent-blue-soft: "#eff4ff"
  accent-purple: "#7f56d9"
  accent-purple-soft: "#f4f3ff"
  accent-green: "#12b76a"
  accent-green-soft: "#ecfdf3"
  accent-yellow: "#f79009"
  accent-yellow-soft: "#fffaeb"
  success: "#12b76a"
  warning: "#f79009"
  destructive: "#f04438"
typography:
  heading-xl:
    fontFamily: "Outfit, sans-serif"
    fontSize: "48px"
    fontWeight: "500"
    lineHeight: "58px"
    letterSpacing: "-0.96px"
  heading-lg:
    fontFamily: "Outfit, sans-serif"
    fontSize: "36px"
    fontWeight: "400"
    lineHeight: "46px"
    letterSpacing: "-0.72px"
  heading-md:
    fontFamily: "Outfit, sans-serif"
    fontSize: "24px"
    fontWeight: "400"
    lineHeight: "30px"
    letterSpacing: "-0.48px"
  heading-sm:
    fontFamily: "Outfit, sans-serif"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "26px"
    letterSpacing: "normal"
  body-lg:
    fontFamily: "Inter, sans-serif"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "26px"
    letterSpacing: "0.09px"
  body-md:
    fontFamily: "Inter, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    letterSpacing: "0.08px"
  body-sm:
    fontFamily: "Inter, sans-serif"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
    letterSpacing: "0.07px"
rounded:
  button: "8px"
  button-pill: "999px"
  card: "14px"
  card-lg: "24px"
  badge: "100px"
spacing:
  xs: "8px"
  sm: "16px"
  md: "24px"
  lg: "32px"
  xl: "40px"
  section: "80px"
  container: "1258px"
components:
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    border: "1px solid {colors.primary-strong}"
    borderRadius: "{rounded.button}"
    padding: "12px 16px"
    boxShadow: "rgba(0, 64, 193, 0.2) 0px 4px 4px 0px"
  secondary-button:
    background: "{colors.canvas-light}"
    color: "{colors.ink-strong}"
    border: "1px solid {colors.primary-strong}"
    borderRadius: "{rounded.button}"
    padding: "8px 16px"
    boxShadow: "rgba(0, 64, 193, 0.2) 0px 4px 4px 0px"
  pill-cta:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    borderRadius: "{rounded.button-pill}"
    padding: "13px 28px"
    boxShadow: "rgba(21, 94, 239, 0.28) 0px 10px 24px 0px"
  navbar:
    background: "{colors.overlay}"
    height: "72px"
    padding: "0px 95.25px"
    borderBottom: "1px solid {colors.hairline}"
  feature-card:
    background: "{colors.surface-muted}"
    borderRadius: "{rounded.card}"
    padding: "24px"
    border: "1px solid {colors.hairline}"
  light-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    padding: "24px"
    boxShadow: "rgba(16, 32, 60, 0.05) 0px 4px 14px 0px"
  category-chip:
    background: "{colors.surface-soft}"
    color: "{colors.body}"
    borderRadius: "{rounded.badge}"
    padding: "6px 12px"
  footer:
    background: "{colors.canvas}"
    color: "{colors.body-muted}"
    padding: "80px 0px"
    borderTop: "1px solid {colors.hairline}"
source: "https://www.robylon.ai/"
captured: "2026-09-04T17:32:28.459Z"
---

# DESIGN.md: Robylon

## Source

- URL: https://www.robylon.ai/
- Captured: 2026-09-04T17:32:28.459Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Robylon](./screenshot.png)

## Design Summary

A modern AI enterprise SaaS interface defined by deep dark-blue hero and footer canvases contrasted against clean light feature sections, vibrant blue key actions, and rounded geometric containers.

## Visual Language

- Use Outfit for prominent headings to establish modern technical authority, complemented by Inter for body and navigation text.
- Pair dark background sections (#031225) with light gray surface sections (#f5f7f9) to structure page flow visually.
- Apply subtle blue accent borders and translucent white hairlines on dark surfaces for high-precision containment.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Fixed navigation bar with semi-transparent dark background (rgba(3, 18, 37, 0.85)) and thin lower border.
- Standardized section vertical padding of 80px across content blocks.
- Centered main container width locked around 1258px with flex and grid child alignments.

## Components

- Primary CTAs feature #155eef blue background, 8px rounded corners, and a dark blue border #0040c1 with soft drop shadow.
- Secondary CTAs maintain light canvas background with matching dark blue border and dark neutral typography.
- Feature blocks and integrations cards use subtle rounded corners (14px) and soft elevation shadows (rgba(16, 32, 60, 0.05)).

## Content Style

- Action text is direct and outcome-driven, e.g., 'Book a Demo', 'Get Started for Free', 'Browse all integrations →'.
- Section subtitles use pill badges or chip overlays to categorize content topics prior to main headings.

## Agent Build Instructions

- Set CSS custom properties for core colors matching #155eef (primary), #0040c1 (primary-strong), #031225 (canvas), and #f5f7f9 (surface-soft).
- Load Google Fonts 'Outfit' (weights 400, 500, 700) and 'Inter' (weights 400, 500, 600, 700).
- Ensure fixed navbar handles scroll state with background transparency transition and blur if applicable.

## Evidence And Confidence

- Observed: Outfit used for main headings and interactive CTAs; Inter used for UI text and secondary paragraphs.
- Observed: Primary brand blue evaluated at #155eef (rgb(21, 94, 239)) with hover border #0040c1 (rgb(0, 64, 193)).
- Observed: Dark canvas section background measured as rgb(3, 18, 37).
- Inferred: Hover states on secondary controls utilize subtle alpha shifts and border tone adjustments based on stylesheet interaction classes.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://www.robylon.ai/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.