Design Reference

Spideryarn Design System

This reference guide showcases the design components, colours, typography, and patterns used throughout the Spideryarn Reading application. Built on shadcn/ui with custom Spideryarn theming.

Brand & Colours

Spideryarn Orange

#DB8A45

Primary brand colour

Action Blue

#2563EB

Secondary actions

Error Red

#DC2626

Destructive actions

Neutral Grey

#4B5563

Text & secondary UI

Logo Usage

Primary logo

• Minimum size: 32px height

• Clear space: 2x logo height

• Available formats: PNG, SVG

Typography

Heading 1 - Bold, 36px

Used for page titles and major sections

Heading 2 - Semibold, 30px

Used for section headers and key content areas

Heading 3 - Semibold, 24px

Used for subsections and component groups

Body text - Regular, 16px

Standard paragraph text for content and descriptions

Small text - Regular, 14px

Used for captions, metadata, and secondary information

Buttons

Primary Variants

variant="default"

variant="orange"

variant="blue"

variant="destructive"

Secondary Variants

variant="outline"

variant="secondary"

variant="ghost"

variant="link"

Sizes & States

Loading States

Loading Component

size="sm"

size="default"

size="lg"

Generating summary...

Standalone Spinner

size={12}

size={16}

size={24}

Alerts & Feedback

This is an informational alert with neutral styling.

This is an error alert for destructive actions or failures.

Form Components

Available Components

Select Dropdown

Accept terms and conditions

Note

Form components follow YAGNI principle - Select and Checkbox are available but not currently used in the application. Additional form components (Input, Textarea, Form) will be added when needed.

Icons

Using Phosphor Icons library for consistent iconography throughout the application.

House

Gear

Download

Upload

Heart

Star

Plus

CaretDown

CaretRight

ArrowLeft

ArrowRight

Warning

CheckCircle

Technical Configuration

Component Library

shadcn/ui - Component foundation

Radix UI - Accessibility primitives

Tailwind CSS - Utility-first styling

Phosphor Icons - Icon library

Next.js 15 - React framework