# Syllabus — Design System
> An AI-powered SEO content platform that unifies research, drafting, and optimization in a collaborative editor.
- **Canonical:** https://uiuxskills.com/library/syllabus
- **Source:** https://syllabus.io
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:16:58.723Z

---

---
version: alpha
name: Syllabus
description: >-
  An AI-powered SEO content platform that unifies research, drafting, and optimization in a
  collaborative editor.
tone: >-
  Modern, authoritative, and efficient. The tone is direct and benefit-oriented, focusing on the
  power of AI to simplify complex SEO tasks.
color-scheme: light
colors:
  primary: "#0D0129"
  secondary: "#FAE59B"
  surface: "#FCFBF7"
  surface-container: "#FFFFFF"
  on-primary: "#FFFFFF"
  on-surface: "#0D0129"
  outline: "#0D0129"
  error: "#E74C3C"
  success: "#19615C"
  focus-ring: "#FAE59B"
typography:
  display-lg:
    fontFamily: Supply
    fontSize: 64px
    fontWeight: 700
  headline-lg:
    fontFamily: Supply
    fontSize: 48px
    fontWeight: 600
  headline-md:
    fontFamily: Supply
    fontSize: 32px
    fontWeight: 600
  body-md:
    fontFamily: Roobert
    fontSize: 24px
    fontWeight: 400
  body-sm:
    fontFamily: Roobert
    fontSize: 16px
    fontWeight: 400
  label-md:
    fontFamily: Roobert
    fontSize: 16px
    fontWeight: 500
  label-sm:
    fontFamily: Roobert
    fontSize: 14px
    fontWeight: 500
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    width: fit-content
  button-primary-hover:
    backgroundColor: "#E6D08C"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.secondary}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  card-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.2)
  md: 0 4px 12px rgba(0,0,0,0.3)
  lg: 0 8px 16px rgba(0,0,0,0.4)
---

## Overview

Syllabus features a modern, high-contrast aesthetic that balances professional utility with a playful, tech-forward edge. The brand relies on a bold, dark-on-cream color palette and clean, geometric illustrations to convey complex AI workflows with simplicity.

## Colors

The color strategy centers on high-contrast readability, using a deep navy as the anchor for text and structure, balanced by a soft cream background.

*   Primary (#0D0129): Deep navy used for primary text and core brand elements.
*   Secondary (#FAE59B): Soft yellow used for primary call-to-action buttons and highlights.
*   Surface (inferred) (#FCFBF7): Off-white cream background for a softer, more approachable reading experience.
*   Surface-container (inferred) (#FFFFFF): Pure white for card backgrounds and elevated components.
*   On-primary (inferred) (#FFFFFF): White text for use on dark primary backgrounds.
*   On-surface (#0D0129): Primary dark text for readability on light surfaces.
*   Outline (#0D0129): Dark stroke color for borders and graphical elements.
*   Error (#E74C3C): Standard error red for validation states.
*   Success (#19615C): Deep teal used for success states and secondary brand accents.
*   Focus-ring (inferred) (#FAE59B): High-visibility yellow for focus states.

## Typography

Syllabus uses a dual-typeface system, pairing the geometric, authoritative Supply for headlines with the clean, approachable Roobert for body and UI elements.

*   Display-lg: Supply, used for hero headlines to create maximum impact.
*   Headline-lg: Supply, used for primary section headers.
*   Body-md (inferred): Roobert, used for primary body text.
*   Label-md (inferred): Roobert, used for button and navigation labels.

## Layout

The site utilizes a centered container layout with generous whitespace to emphasize product mockups. The system follows a 4px base unit for all spacing, ensuring a consistent vertical rhythm. The page pattern follows a fixed sequence: nav, hero, features, workflow, analysis, and footer. The hero section is composed of a centered headline and subhead, a primary CTA, and a large illustrative mockup. Responsive behavior relies on vertical stacking of content blocks and a collapsible mobile navigation menu.

## Elevation & Depth

Elevation is used sparingly to provide subtle, high-contrast depth that lifts interactive elements from the background. 

*   Elevation.sm: Subtle lift for small UI elements.
*   Elevation.md: Standard depth for cards and popovers.
*   Elevation.lg: Pronounced depth for modals or primary overlays.

## Shapes

The brand employs a structured, professional geometry. Buttons and input fields use a mix of sharp corners and subtle radii, while primary content containers consistently use a 12px border radius to maintain a cohesive, modern look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.secondary}` with `{typography.label-md}` to ensure high visibility. Use the primary variant for main actions and the secondary variant (navy background) for lower-priority or ghost-style actions.

### Card
Cards utilize `{colors.surface-container}` with a `{rounded.lg}` radius. They are designed to hold content blocks and should maintain consistent `{spacing.md}` internal padding to keep the interface scannable.

### Input Field
Input fields feature a `{rounded.sm}` radius and a `{colors.outline}` border. When active, the border must transition to `{colors.focus-ring}` to meet accessibility requirements.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.secondary}` for primary CTAs. | Use `{colors.secondary}` for body text. |
| Apply `{typography.display-lg}` for hero headlines. | Use `{typography.display-lg}` for subheaders. |
| Use `{colors.primary}` for all body text. | Use thin font weights for `{typography.headline-lg}`. |
| Maintain `{spacing.md}` padding in cards. | Mix rounded corners with sharp-edged buttons. |
| Use `{rounded.lg}` for primary containers. | Use `{colors.error}` for non-destructive actions. |
| Ensure clear `{colors.focus-ring}` on inputs. | Use excessive `{elevation.lg}` for simple cards. |
| Use `{typography.label-md}` for buttons. | Use `{typography.body-md}` for button labels. |
| Apply `{rounded.sm}` to `{input-field}`. | Use `{rounded.full}` on standard data cards. |

## Content Style

CTA labels use imperative verbs in sentence case, such as "Join Waitlist" or "Request a Demo." They are kept concise to maintain the platform's direct, efficient feel.

Headings are benefit-driven and authoritative, focusing on how AI simplifies complex SEO tasks. They avoid fluff, opting for declarative statements that establish the platform's utility.

Copy density is designed for scannability. Paragraphs are kept short, and the rhythm is broken up by punchy, single-sentence takeaways to ensure the user can digest information quickly.

## Imagery & Icons

The imagery style is mixed, featuring clean, vector-based illustrations that use a limited palette of navy, yellow, and teal. Illustrations rely on thin stroke weights and geometric shapes to mirror the platform's UI design. All imagery should feel tech-forward and illustrative rather than photographic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Syllabus, a minimal yet bold AI-powered SEO content platform. Match its direct, authoritative, efficiency-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.headline-lg}`, `{spacing.md}` — never hardcode hex values, pixel sizes, or font names.
2. Use only the component variants defined under `components:`. Do not invent new button styles, card shapes, or badge types outside that block.
3. Follow the Shapes narrative: `{rounded.sm}` on inputs, `{rounded.lg}` on primary content containers, `{rounded.md}` on `card-default`. Never apply `{rounded.full}` to standard data cards.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — e.g., using `{colors.secondary}` as body text — surface the conflict before proceeding.
5. Apply motion tokens (`{motion.duration-short}`, `{motion.easing-standard}`) to all interactive state transitions.

## Output contract

**Must:**
- Use all tokens by name on every component.
- Render hover, focus, and disabled states whenever the spec defines them; focus states must use `{colors.focus-ring}` as the visible ring.
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively for padding, margin, and gap values.
- Match CTA copy style: imperative verbs, sentence case, concise — per the Content Style section.
- Apply `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` at the tiers the spec describes; do not use `{elevation.lg}` on simple cards.

**Must NOT:**
- Invent colors, font families, radii, or spacing values absent from the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, filler copy, or unsolicited marketing language.
- Rewrite existing headings, button labels, navigation items, or page copy.
- Alter page section order or information architecture as a side effect of applying tokens.

## When in doubt
- If a value isn't in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface}` for page backgrounds and `{colors.surface-container}` for elevated containers.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values override the spec.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, stacking content blocks vertically as the Layout section describes.