Central Broadcasting

Design System Kitchen Sink

A comprehensive showcase of all components in the Central Broadcasting design system. Built with a focus on clarity, accessibility, and balanced presentation.

Alerts & Notifications

Buttons

Badges

DefaultSecondaryOutlineDestructiveLiveNewBreaking

Cards

News Article
Latest updates from around the world

Stay informed with our comprehensive coverage of global events, delivered with balance and accuracy.

Sport Highlights
Catch up on today's action

Watch the best moments from today's matches.

Weather Forecast
Your local weather
18°C

Partly cloudy with a chance of rain

Form Elements

Contact Form
Get in touch with our team

Tabs

Latest News
Breaking stories from around the world

Comprehensive coverage of today's most important stories, delivered with accuracy and impartiality.

Accordion

Dialogs & Dropdowns

Progress & Sliders

Interactive Controls
Progress bars and slider components
33%
50%

Avatars & Loading States

User Avatars
Profile pictures and fallbacks
CNJDCB
Loading Skeleton
Content placeholder while loading

Data Tables

Programme Schedule
Today's broadcasting schedule
Central Broadcasting - Daily Schedule
TimeProgrammeCategoryDuration
06:00Morning NewsNews3 hours
09:00Breakfast ShowEntertainment2 hours
13:00Afternoon NewsNews1 hour
18:00Evening ReportNews30 mins
20:00Prime Time DramaDrama1 hour
22:00Late Night NewsNews30 mins

Typography

Text Styles
Typography hierarchy and styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a regular paragraph with bold text, italic text, and a link. Central Broadcasting maintains the highest standards of journalism.

This is smaller, muted text often used for secondary information or captions.

This is larger, medium-weight text for emphasis or lead paragraphs.

"Balanced reporting and impartial journalism are the cornerstones of public broadcasting."

Color Palette

Primary Colors
Primary
Main brand color
Secondary
Supporting color
Neutral Colors
Muted
Subtle backgrounds
Accent
Highlight color
Semantic Colors
Destructive
Errors & warnings
Border
Dividers & outlines