---
title: "Syllabus design system"
variant: extended
source: https://syllabus.io/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/syllabus-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Syllabus · Design System

> Warm editorial clarity for data-grounded AI content.

**Theme:** light · **Industry:** ai · **Source:** https://syllabus.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Syllabus pairs a warm ivory canvas and deep ink typography with geometric product illustrations to present an AI-powered SEO platform. Spacious alternating feature layouts lead into a dark teal problem statement and a restrained early-access footer.

## North star

Use warm ivory space, deep ink typography, and precise outlined product illustrations to make every section feel editorial and clear.

## Overview

The page’s identity comes from a restrained three-colour system: warm ivory (#fffcf7) fills nearly the entire canvas, deep ink (#0d0129) carries the logo, headlines and body copy, and deep teal (#19615c) marks the large problem-focused section. The hero and feature content use bold, large Roobert headings paired with readable, generously line-spaced body text. A small amount of monospaced Supply lettering appears in the waitlist button treatment. The composition is editorial and spacious: the hero places copy opposite a product illustration, then feature rows alternate image and text positions down the page. Illustrations use fine outlines and small yellow, coral and green details; those colours belong to the diagrams rather than the measured brand palette. The teal band creates the key contrast break, while the footer uses a compact dark panel beside a light early-access area. Keep decoration sparse and let alignment, scale and whitespace establish hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ivory | `#fffcf7` | `--color-warm-ivory` | neutral | Dominant page canvas and light text on the dark teal section and footer panel. |
| Midnight Ink | `#0d0129` | `--color-midnight-ink` | brand | Logo, headings, body copy, navigation, and the dark waitlist button. |
| Deep Teal | `#19615c` | `--color-deep-teal` | accent | Large inverse-colour problem section; use as a strong, contained contrast band. |

### Semantic aliases

`--color-canvas` → `#fffcf7` (Warm Ivory) · `--color-surface` → `#19615c` (Deep Teal) · `--color-text` → `#0d0129` (Midnight Ink) · `--color-text-muted` → `#fffcf7` (Warm Ivory) · `--color-accent` → `#19615c` (Deep Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0129` | `#fffcf7` | 19.48:1 | AAA |
| `#0d0129` | `#19615c` | 2.76:1 | fail |
| `#fffcf7` | `#19615c` | 7.06:1 | AAA |
| `#19615c` | `#fffcf7` | 7.06:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert | `--font-body` | webfont | 400, 700 | Primary face for display, headings, body copy, navigation, and most interface text. | Inter |
| Supply | `--font-supply` | webfont | 400 | Small monospaced-style lettering used as a minor accent in the waitlist CTA treatment. | IBM Plex Mono |

- **Roobert:** Use clean sans-serif forms, mostly regular body and bold headings; keep tracking neutral and case natural.
- **Supply:** Restrict to compact CTA lettering; its measured share is small and it should not compete with Roobert.

### Type scale — Major Third (ratio ≈ 1.262, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 700 | 1.25 | 0 | — | Roobert | Oversized primary hero headline. |
| h1 | 56px | 700 | 1.27 | 0 | — | Roobert | Main page and prominent section headlines. |
| h2 | 48px | 700 | 1.27 | 0 | — | Roobert | Feature and secondary section headings. |
| h3 | 40px | 700 | 1.4 | 0 | — | Roobert | Smaller feature headings within the content flow. |
| h4 | 24px | 400 | 1.67 | 0 | — | Roobert | Supporting subheads and emphasized short statements. |
| body | 20px | 400 | 1.67 | 0 | — | Roobert | Hero descriptions and feature explanations. |
| caption | 16px | 700 | 2 | 0 | — | Roobert | Compact labels and minor supporting text. |
| nav | 20px | 400 | 2 | 0 | — | Roobert | Header navigation and top-level links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 12, 16, 20, 24, 40, 64, 80, 104, 120, 150 px.
- Section rhythm 40px · element gap 40px · card padding 62px · max content width 1280px.

Use a centered content frame with a measured maximum width of 1280px and a spacious, low-density composition. The hero is a two-part arrangement: left-aligned headline and copy beside a product diagram. Follow with a full-width teal band, then a sequence of feature splits that alternate image and copy sides. Sections share a consistent left alignment rather than relying on centered text. The measured spacing scale is based on an 8px unit, with generous section separation and substantial card padding; preserve the open rhythm rather than compressing content.

## Shape & elevation

- Shadow `sm` (other, nav): `rgb(0, 0, 0) 1px 1px 3px 0px`
- Motion: standard transition `0.8s cubic-bezier(0.31, 0.013, 0.25, 1)` on interactive elements.

The page is predominantly flat, with no prominent card system or measured border palette. Interface diagrams create depth by overlapping outlined panels, while the navigation and CTA use only a subtle small shadow treatment. Keep borders thin and graphic, reserve layering for illustration panels, and avoid adding broad drop shadows or rounded-card styling.

## Imagery

Use custom flat product illustrations rather than photography or 3D. Depict editorial tools, document panels, charts and interface windows with fine dark outlines, small labels, and a few muted yellow, coral, teal and green details. Keep illustrations crisp and diagrammatic, with generous surrounding whitespace. Alternate their position beside copy; avoid decorative imagery that does not explain the product.

## Components

### Top navigation

Logo sits at the left with demo and login links at the right; finish with a dark ink Join Waitlist CTA.

### Hero split

Large left-aligned headline, supporting copy and waitlist action sit opposite a layered SEO workflow illustration.

### Teal problem band

A deep teal, clipped-corner panel reverses text to ivory and pairs the problem statement with a compact interface diagram.

### Alternating feature rows

Feature title and explanatory copy alternate sides with fine-line interface illustrations across the long page.

### Waitlist CTA

Use a compact, high-contrast label treatment with a pale yellow illustration-style button and dark offset shadow when matching the hero screenshot.

### Early-access footer

A dark ink copyright block sits beside a light area containing the early-access heading, short copy and waitlist link.

### Measured component styles

- **Link** (“JOIN BETA JOIN WAITLIST”): transparent background · text #0d0129 · radius 0px · padding 0px · 400 16px Roobert
- **Card** (“Copyright 2025, Syllabus”): background #0d0129 · text #fffcf7 · radius 0px · padding 40px 104px 64px 40px · 400 16px Roobert
- **Navigation item** (“Request a Demo Log In Join Waitlist”): transparent background · text #0d0129 · radius 0px · padding 0px · 400 16px Roobert

## Do

- Keep the canvas warm ivory (#fffcf7).
- Set key text in deep ink (#0d0129).
- Use deep teal (#19615c) for a contained contrast section.
- Alternate illustration and copy sides in feature rows.
- Keep headings bold, left-aligned and visually dominant.
- Use diagrammatic product illustrations with fine outlines.
- Preserve generous whitespace between content groups.

## Don't

- Do not introduce unmeasured colours as brand colours.
- Do not turn the page into a dense dashboard grid.
- Do not use large photographic or 3D hero imagery.
- Do not center every heading and paragraph.
- Do not apply heavy shadows to all content blocks.
- Do not crowd illustrations with decorative effects.

## Agent prompt

Build a new SaaS or AI product page in the Syllabus visual style. Use Warm Ivory (#fffcf7) as the broad canvas and Midnight Ink (#0d0129) for the logo, headings, copy, and primary controls. Reserve Deep Teal (#19615c) for a prominent, contained inverse section rather than scattering it everywhere. Set a large, bold Roobert-like sans-serif headline beside a crisp, outlined product illustration; follow with spacious feature splits that alternate text and diagram sides. Illustrations should show interface panels, documents, and charts with restrained small colour details, not photography or 3D. Keep alignment predominantly left-led, preserve generous vertical rhythm, and use flat surfaces with only subtle CTA or navigation shadowing. End with a concise early-access or contact block that echoes the restrained footer treatment.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned headline and copy opposite a product workflow illustration. | Primary waitlist link, Value proposition first | Large bold headline, Outlined interface illustration, Pale yellow CTA |
| 2 | feature-split | Full-width deep teal band with statement and supporting copy beside a diagram. | Problem-solution framing, Contrast break | Inverse light text, Clipped-corner panel, Product diagram |
| 3 | feature-split | Illustration on the left and feature copy on the right. | Feature explanation, Workflow overview | Alternating split, Document and chart illustration |
| 4 | feature-split | Feature copy on the left and competitive-analysis diagram on the right. | Capability explanation, Evidence-led value | Left-aligned heading, Fine-line chart illustration |
| 5 | feature-split | Layered interface illustration on the left, explanatory copy on the right. | Customisation benefit, Playbook-based setup | Overlapping document panels, Bold feature title |
| 6 | feature-split | Text on the left with a multi-panel collaboration illustration on the right. | Team enablement, Guardrail reassurance | Alternating split, Connected interface diagrams |
| 7 | feature-split | Illustration on the left and feature copy on the right. | Trust through research, Hallucination reduction | Evidence-themed panels, Compact explanatory copy |
| 8 | feature-split | Text on the left and a collaborative editing diagram on the right. | Real-time feedback, Human-AI partnership | Outlined editor panels, Alternating split |
| 9 | footer | Two-column footer with a compact dark copyright panel and light early-access content area. | Waitlist conversion, Copyright information | Dark ink panel, Light CTA area, Minimal footer link |

## Source CSS custom properties (selected)

```css
--body-text: #0d0129;
--brand-color-7: #3785a6;
--brand-color-8: white;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/syllabus-io