FYT DESIGN SYSTEM

BRUTAL TOOLS FOR CLEAR COMMUNICATION

A no-nonsense design system built for accessibility, printability, and low-bandwidth environments. When your message matters, brutal clarity cuts through the noise.

BUILT FOR COMMUNICATION

ACCESSIBILITY FIRST

WCAG 2.1 AA/AAA compliant. Screen reader optimized. Full keyboard navigation. High contrast ratios. Motion preference respect.
Every user deserves access to your message.

INK-CONSERVING PRINT

Brutal black-on-white print stylesheet. Maximum readability, minimum ink consumption. Every drop of toner counts when your message needs to reach paper.
Professional printing standards. Zero waste. Pure communication.

ZERO IMAGES

Pure CSS graphics. SVG icons. Typography-driven design. No external dependencies. Instant loading.
When bandwidth is limited, clarity remains.

TECHNICAL SPECIFICATIONS

PERFORMANCE OPTIMIZED

Lighthouse Score:
98/100
CSS Bundle:
11.77 KB
FCP/LCP:
1.8s
Dependencies:
Zero

BROWSER SUPPORT

Modern Browsers:
100%
IE11:
Graceful
Mobile:
Optimized
Print:
Perfect

BUILT FOR REAL COMMUNICATION

LOW BANDWIDTH

Works on 2G connections. Loads instantly on slow networks. Essential information gets through when it matters most.
CSS: 11.99 KB | TOTAL: 124.93 KB (gzipped)⚡
⊕
⊕

EMERGENCY COMMS

High contrast for visibility. Screen reader compatible. Works without JavaScript. Prints clearly on any device.
ALWAYS ACCESSIBLE⚡
⊕
⊕

MASS DISTRIBUTION

Copy-paste friendly. Print-ready layouts. QR code compatible. Scales from business cards to billboards.
SPREAD THE WORD⚡
⊕
⊕

DESIGN PRINCIPLES

CLARITY OVER BEAUTY

Every element serves communication. No decoration without purpose. When your message matters, clarity cuts through noise.

FUNCTION OVER FORM

Built for real-world constraints. Works on old devices. Loads on slow connections. Prints on cheap paper.

ACCESS OVER AESTHETICS

Every user deserves access. Screen readers welcome. High contrast guaranteed. Keyboard navigation complete.

SPEED OVER SOPHISTICATION

Zero dependencies. Minimal JavaScript. Pure CSS graphics. Instant loading when seconds count.

COMPONENT LIBRARY

BUTTONS

Primary, Secondary, States

TYPOGRAPHY

Headers, Body, Captions

CARDS

Layouts, Variants, Shadows

ALERTS

Urgent, Info, Success

FORMS

Inputs, Validation, States

NAVIGATION

Menus, Breadcrumbs, Tabs

MEDIA

TV Bars, Morse Code

UTILITIES

Spacing, Colors, Shadows

GET STARTED

01. INSTALL

Copy the CSS. Import the components. Zero configuration required.

02. CUSTOMIZE

Adjust colors, spacing, typography. Keep the brutal aesthetic.

03. COMMUNICATE

Build interfaces that refuse to be ignored. Spread your message.

READY TO COMMUNICATE?

Stop compromising on accessibility. Stop waiting for perfect conditions. Start building interfaces that work for everyone, everywhere.
YOUR MESSAGE DESERVES BRUTAL CLARITY⚡
⊕
⊕

WHEN THE SIGNAL FADES, THESE BARS REMAIN

When everything else fails, this signal endures.