SEAOWLDesign System
Version 2.1.1
2026 · MIT Licensed
A cyber-themed React component library with OKLCH colours, glow effects, and WCAG 2.1 AA compliance. Ships 27 components today; runs the two sites at seaowl.unfuck.cloud and docs.seaowl.unfuck.cloud.
Table of Contents
1. Overview
A cyber-themed React component library with OKLCH colours, glow effects, and full WCAG 2.1 AA compliance. Inspired by unfuck.cloud, the [broken] podcast, and modern hacker culture.
What ships today
- 27 cyber components with the
SeaOwl*prefix — buttons, cards, inputs, dialogs, status indicators, and more. - 40+ Radix UI primitives wrapped with cyber styling for accessible headless composition.
- Two live sites: seaowl.unfuck.cloud (this showcase) and docs.seaowl.unfuck.cloud (component reference).
- OKLCH colour space, dark-mode-first, Tailwind CSS v4, Next.js 16 static export, Kubernetes-deployed.
Key Principles
- Mobile-first responsive design starting at 320px
- 100% WCAG 2.1 AA compliance (minimum 4.5:1 contrast, keyboard navigable,
prefers-reduced-motionhonoured) - Dark mode is the primary experience; light mode is a courtesy
- Consistent spacing based on a 4px base unit
- Inter for body and UI; Space Mono for code and technical data
Coming next
- Publishing
@seaowl/webto npm. - Matching themes for VS Code, JetBrains, Zed, Ghostty, Kitty, and tmux.
- The video-archive application (long-term; see CHANGELOG).
Design Philosophy
This system balances the edgy, technical aesthetic of cyberpunk culture with the practical requirements of modern web accessibility. Every colour, size, and spacing decision is intentional and tested for usability across devices and assistive technologies. When in doubt, pick the accessible option.
2. Color Palette
Primary Colors
Primary (Cyan/Teal)
oklch(0.75 0.16 185)
Contrast: 7.1:1 on background
Use: Primary actions, links, highlights
Accent (Darker Cyan)
oklch(0.78 0.18 185)
Contrast: 5.2:1 on background
Use: Hover states, secondary highlights
Semantic Colors
Success (Green)
oklch(0.7 0.2 145)
Contrast: 6.4:1
Use: Success states, confirmations, active indicators
Warning (Amber)
oklch(0.78 0.18 85)
Contrast: 8.2:1
Use: Warnings, cautions, attention needed
Destructive (Red)
oklch(0.6 0.22 25)
Contrast: 5.8:1
Use: Errors, destructive actions, critical alerts
Background Colors
Background
oklch(0.08 0.02 240)
Primary page background
Card
oklch(0.12 0.025 240)
Elevated card surfaces
3. Typography
Font Families
Sans Serif (Body)
Inter
Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
Use for: All body text, UI elements, headings, and display text
The quick brown fox
Jumps over the lazy dog
Pack my box with five dozen liquor jugs
Monospace (Code)
Space Mono
Weights: 400 (Regular), 700 (Bold)
Use for: Code blocks, technical content, terminal aesthetic accents
The quick brown fox
0123456789 !@#$%^&*()
const theme = 'cyber';
Font Scale
| Size | Value (rem/px) | Line Height | Usage |
|---|---|---|---|
| XS | 0.75rem (12px) | 1rem | Captions, metadata |
| SM | 0.875rem (14px) | 1.25rem | Secondary text |
| Base | 1rem (16px) | 1.5rem | Body text |
| LG | 1.125rem (18px) | 1.75rem | Large body |
| XL | 1.25rem (20px) | 1.75rem | Section titles |
| 2XL | 1.5rem (24px) | 2rem | Card titles, H3 |
| 4XL | 2.25rem (36px) | 2.5rem | Hero mobile, H2 |
| 6XL | 3.75rem (60px) | 1 | Hero desktop, H1 |
4. Spacing Scale
Based on 4px base unit (0.25rem). All spacing is mobile-first.
| Token | Value (rem/px) | Usage |
|---|---|---|
| 1 | 0.25rem (4px) | Icon gaps, fine adjustments |
| 2 | 0.5rem (8px) | Badge padding, tight spacing |
| 3 | 0.75rem (12px) | Input padding, button gaps |
| 4 | 1rem (16px) | Common spacing |
| 6 | 1.5rem (24px) | Card padding, section spacing |
| 8 | 2rem (32px) | Component spacing |
| 12 | 3rem (48px) | Large section spacing |
| 16 | 4rem (64px) | Major section dividers |
Layout Guidelines
- Container padding: 1rem (mobile), 1.5rem (desktop)
- Section spacing: 3rem (mobile), 4rem (desktop)
- Card padding: 1.5rem
- Button padding: 0.5rem vertical, 1rem horizontal
- Input padding: 0.5rem vertical, 0.75rem horizontal
5. Component Guidelines
Buttons
Variants: default, secondary, outline, ghost, cyber, destructive, link
Sizes:
- sm: 32px height (8px vertical padding)
- default: 40px height (10px vertical padding)
- lg: 48px height (12px vertical padding)
- icon: 40x40px square
Touch Targets: Minimum 44x44px per WCAG 2.5.5
All buttons include proper focus states, keyboard navigation, and ARIA labels when needed
Badges
Variants: default, success, warning, destructive, outline, featured, active, tech
Sizes: sm (smaller padding), default
Use badges for status indicators, tags, and tech stack displays. All colors meet contrast requirements.
Cards
Variants: default, featured, elevated, flat
Structure:
- SeaOwlCardHeader: Title and description
- SeaOwlCardContent: Main content area
- SeaOwlCardFooter: Actions and metadata
Cards use semantic HTML (article, header, footer) for accessibility
Inputs
Height: 40px minimum for touch accessibility
States: default, focus, error, disabled
All inputs include proper labels, error states with aria-invalid, and visible focus indicators
Status Indicators
States: online (green), capturing (cyan), warning (amber), offline (red)
Includes optional label, role="status", and aria-live for dynamic updates
6. Accessibility Standards
100% WCAG AA compliant design system
Color Contrast - WCAG AA
| Color | Contrast on Background | Status |
|---|---|---|
| Primary | 7.1:1 | ✓ Pass AAA |
| Success | 6.4:1 | ✓ Pass AA |
| Warning | 8.2:1 | ✓ Pass AAA |
| Destructive | 5.8:1 | ✓ Pass AA |
| Foreground | 12.8:1 | ✓ Pass AAA |
Keyboard Navigation
- All interactive elements are keyboard focusable
- Logical tab order follows visual flow
- Visible focus indicators (2px outline, 2px offset)
- Skip links for main content navigation
- Escape key support for modals/overlays
- Arrow key navigation where appropriate
Screen Reader Support
- Semantic HTML5 elements (article, header, footer, nav, main)
- ARIA labels for icon buttons and decorative elements
- ARIA live regions for dynamic content updates
- ARIA roles for custom components (status, alert, etc.)
- Hidden decorative elements (aria-hidden="true")
- Descriptive link text (no "click here")
Touch & Mobile
- Minimum 44x44px touch targets (WCAG 2.5.5)
- Adequate spacing between interactive elements
- Mobile-first responsive design
- Viewport meta tag for proper scaling
Motion & Animation
All animations respect prefers-reduced-motion setting:
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}7. Usage Guidelines
Responsive Breakpoints
| Breakpoint | Width | Target Devices |
|---|---|---|
| sm | 640px | Large phones, small tablets |
| md | 768px | Tablets |
| lg | 1024px | Desktop |
| xl | 1280px | Large desktop |
| 2xl | 1536px | Extra large displays |
Mobile-First Approach
- Design for mobile (320px+) first
- Single column layouts
- Full-width buttons and inputs
- Larger touch targets
- Stacked navigation
- Enhance for tablet (640px+)
- Two-column layouts where appropriate
- Inline buttons and forms
- Horizontal navigation
- Optimize for desktop (1024px+)
- Multi-column grids
- Sidebar layouts
- Hover states and interactions
- Larger typography scale
Best Practices
- Use semantic HTML5 elements
- Leverage composition over prop drilling
- Test with keyboard navigation
- Test with screen readers (NVDA, JAWS, VoiceOver)
- Verify color contrast in all states
- Test on real devices, not just emulators
- Use proper heading hierarchy (h1-h6)
8. Implementation
Component Inventory
Installation
Inside the SeaOwl monorepo, add it as a workspace dependency:
"dependencies": {
"@seaowl/web": "workspace:*"
}Then in your app's root CSS:
@import "tailwindcss";
@import "@seaowl/web/styles";
@source "../../../node_modules/@seaowl/web/dist/**/*.js";The @source line matters: Tailwind v4 does not traverse node_modules by default, and without it any utility class used inside a SeaOwl component will be absent from your final CSS.
An npm release of @seaowl/web is planned; until then, please fork or vendor the package directly from the repo.
Dependencies
- React 19+
- Tailwind CSS v4.1+ (with the
@tailwindcss/postcssplugin) - Radix UI primitives
- lucide-react (icons)
- class-variance-authority, clsx, tailwind-merge
Credits & Inspiration
Primary Inspiration: unfuck.cloud by Art Rosnovsky
Secondary Inspiration: [broken] podcast, EDU themes
Built with: Next.js 16, React 19, Tailwind CSS v4, shadcn/ui
Typography: Inter by Rasmus Andersson, Space Mono by Colophon Foundry
SeaOwl Design System v2.1.1 • 2026 • WCAG AA Compliant • Mobile-First • Accessible