---
name: "Laya"
description: "Warm, editorial research paper design system featuring serif typography, terracotta primary accenting, structured benchmark data tables, and high-density technical reading layouts."
version: "1.0"
colors:
  canvas: "#FAF8F5"
  surface-soft: "#F4F0EA"
  surface-muted: "#FAF4ED"
  surface-white: "#FFFFFF"
  ink: "#1F1E1D"
  ink-strong: "#1F1E1D"
  body: "#2D2B28"
  body-muted: "#6E6B66"
  hairline: "#E8E1D5"
  hairline-soft: "#EFECE6"
  primary: "#CC5A36"
  primary-strong: "#B34522"
  on-primary: "#FAF8F5"
  accent-emerald: "#065F46"
  accent-indigo: "#312E81"
  selection-bg: "#F0D5CA"
  selection-text: "#8C3018"
  caption: "#8C8883"
typography:
  heading-hero:
    fontFamily: "Charter, Georgia, Merriweather, Cambria, serif"
    fontSize: "48px"
    fontWeight: "700"
    lineHeight: "1.15"
    letterSpacing: "-0.025em"
  heading-section:
    fontFamily: "Charter, Georgia, Merriweather, Cambria, serif"
    fontSize: "30px"
    fontWeight: "700"
    lineHeight: "1.25"
    letterSpacing: "-0.02em"
  heading-subsection:
    fontFamily: "Charter, Georgia, Merriweather, Cambria, serif"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "1.3"
    letterSpacing: "-0.01em"
  body-main:
    fontFamily: "-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.75"
    letterSpacing: "normal"
  body-serif:
    fontFamily: "Charter, Georgia, Merriweather, Cambria, serif"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "1.6"
    letterSpacing: "normal"
  code-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "1.6"
    letterSpacing: "normal"
rounded:
  card: "12px"
  table: "8px"
  code: "8px"
  avatar: "9999px"
spacing:
  container-max: "896px"
  section-gap: "40px"
  header-height: "56px"
  content-padding-x: "24px"
  card-padding: "24px"
  grid-gap: "16px"
components:
  header-nav:
    background: "{colors.canvas}"
    borderColor: "{colors.hairline}"
    height: "{spacing.header-height}"
    backdropFilter: "blur(4px)"
  data-table:
    background: "{colors.surface-white}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.table}"
  table-header:
    background: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    color: "{colors.ink}"
  table-row-highlight:
    background: "{colors.surface-muted}"
  code-block:
    borderRadius: "{rounded.code}"
    fontFamily: "{typography.code-mono.fontFamily}"
    padding: "16px"
  author-card:
    background: "{colors.surface-soft}"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.card}"
    padding: "{spacing.card-padding}"
  category-tag:
    color: "{colors.primary}"
    fontSize: "12px"
    fontWeight: "600"
    textTransform: "uppercase"
    letterSpacing: "0.05em"
  inline-link:
    color: "{colors.primary}"
    textDecoration: "underline"
source: "https://laya.convaiinnovations.com/"
captured: "2026-09-22T20:06:45.799Z"
---

# DESIGN.md: Laya

## Source

- URL: https://laya.convaiinnovations.com/
- Captured: 2026-09-22T20:06:45.799Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

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

## Design Summary

A warm technical blog and research publication layout featuring editorial serif headlines, soft beige paper canvas backgrounds, terracotta brand highlights, and data-dense benchmark tables.

## Visual Language

- Warm neutral palette (#FAF8F5) resembling paper and publication print aesthetics
- Classic serif headings (Charter/Georgia) paired with clean system sans-serif body copy
- Terracotta orange (#CC5A36) for CTAs, links, category badges, and active elements
- Structured data representations with beige table header bars and high-contrast monospaced text
- Dividers using fine warm-gray borders (#E8E1D5) to structure long-form article text

## Design Tokens

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

## Spacing And Layout

- Single-column narrow reader layout centered with max-width of 896px (4xl)
- Sticky blurred header navigation bar at 56px height
- Horizontal metadata row with bullet separators for article header information
- Full-width image figure containers with monospaced center-aligned captions
- Author bio block card positioned at the footer of the article with rounded avatar

## Components

- Data tables must use crisp borders (#E8E1D5) and shaded headers (#F4F0EA)
- Highlighted table rows use soft warm beige tint (#FAF4ED) to pull focus
- Code snippets use monospaced text with horizontal scroll overflow support
- Hyperlinks are underlined and styled in terracotta (#CC5A36) with darker hover state (#B34522)

## Content Style

- Academic and engineering publication tone: precise, data-rich, and structured
- Section headings numbered sequentially (e.g., '1. The Core Realization')
- Technical terms highlighted with code tags or monospace font inline
- Figure annotations presented in centered gray font with explicit numbering

## Agent Build Instructions

- Use standard Tailwind-style utility values matching max-w-4xl for the container width
- Apply font-serif for H1-H3 headers and font-mono for code/benchmarks
- Implement backdrop blur on the header container: backdrop-blur-sm bg-[#FAF8F5]/90
- Set page background globally to #FAF8F5 with default text color #1F1E1D

## Evidence And Confidence

- Observed: Canvas color #FAF8F5 explicitly set on body class in raw HTML
- Observed: Header sticky bar height set to h-14 (56px) with border-b border-[#E8E1D5]
- Observed: Primary text color #1F1E1D, body text color #2D2B28, terracotta primary link color #CC5A36
- Observed: Fonts Charter/Georgia used for titles, system-ui for body text
- Inferred: Code block default background tint from standard warm layout tokens

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://laya.convaiinnovations.com/

---

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