Frontend Now icon
Frontend Now

Design system

Cascade

Frontend Now’s design system — tokens cascade into components, then into every dashboard surface. Inspired by Syntax Arena, built for light and dark.

AboutUsageLogoColorsTypographyAccessibilityButtonIconButtonBadgeCardFieldDialogTabsTableProgressSpinnerAlertPageShell

Foundation

About

Cascade is the shared visual and interaction language for Frontend Now’s product UI — dashboard, job tracker, games, and shared chrome.

Named for the CSS cascade: design tokens flow into primitives in components/ui, then into pages. Syntax Arena’s charcoal surfaces and cyan energy set the tone without locking the product to a single game skin.

Foundation

Usage

Prefer Cascade primitives over one-off colours. Primary = brand cyan; secondary / outline / ghost stay greymode; destructive for delete.

import { Button } from "@/components/ui/button";
import { PageShell, PageHeader } from "@/components/ui/page-shell";

// Prefer these instead of ad-hoc bg-blue-600 / orange pills
<Button>Save</Button>
<Button variant="secondary">Edit</Button>
<Button variant="destructive">Delete</Button>
Open dashboard

Foundation

Colors

Semantic tokens with light and dark values. Toggle theme from the page header.

background

foreground

card

primary

secondary

muted

accent

destructive

success

warning

border

ring

Foundation

Typography

Space Grotesk for display and UI titles; readable body text for content.

Display

Title

Body — used for supporting copy and long-form descriptions.

Label

Muted

Eyebrow

Foundation

Accessibility

Cascade is keyboard-first and contrast-aware in both themes.

  • Visible focus rings on all interactive primitives (cascade-focus-ring).
  • Icon-only controls require aria-label and use a minimum 40×40 hit target.
  • Light and dark semantic colors target WCAG AA for text on surfaces.
  • Motion respects prefers-reduced-motion.
  • Form fields pair visible labels with hints and errors.

Components

Component

Button

Primary uses Cascade cyan with a fill gradient, quiet tinted rim, and a brighter lift on hover. Secondary, outline, and ghost stay greymode.

Component

IconButton

Accessible icon-only controls with a 40×40px hit target and required aria-label.

Component

Badge

Status and metadata pills used across job tracker, rewards, and progress.

Default
Secondary
Outline
Applied
Interview
Rejected
Muted

Component

Card

Primary surface for dashboard panels and feature blocks.

Track progress
Syntax Arena–inspired surfaces with hairline borders.

72% complete

Component

Field, Input, Select, Textarea

Labeled form controls with hints and errors for accessible forms.

Pulled from job URL import when available.

Component

Dialog

Modal shell with a larger, focusable dismiss control.

Component

Tabs

Section navigation for dashboard views.

Overview panel content.

Component

Table

Data tables for job applications and admin lists.

CompanyPositionStatus
StripeFrontend Engineer
Applied
VercelUI Engineer
Interview

Component

Progress

Course and track completion bars with ARIA progress semantics.

Component

Spinner & Skeleton

Loading affordances that respect reduced-motion preferences.

Loading
Loading
Loading

Component

Alert & EmptyState

Inline feedback and empty collection states.

Certificate unlocked
You completed every lesson in this track.

No applications yet

Import a job posting URL or add one manually.

Component

PageShell & PageHeader

Consistent page framing used across dashboard routes. See this page’s layout as the live example.

Import PageShell and PageHeader from @/components/ui/page-shell.