DB Design System
Foundations
The atomic visual decisions behind every DB interface: typography, colour, spacing and shape.
Typography
Noto Sans Devanagari UIH220px30pxSemiBoldProminent headlines, article detail pages, major titles and quiz questions
H316px24pxSemiBoldCompact headlines, subheadings, menu titles, inputs and primary buttons
Body16px28pxRegularArticle paragraphs, bullets, live-blog explanations and predictions
H414px22pxSemiBoldCategories, locations, badges, actions, options and progress labels
Subtitle14px22pxRegularImage captions, attribution, explanations and footer information
H512px18pxSemiBoldBylines, timestamps, bottom navigation, pagination and metadata
Hindi · Noto Sans Devanagari
दैनिक भास्कर समाचार
Corner Radius
TokenValueUsed in
Radius - 4 px4 pxNews thumbnails, media cards, compact controls, tags and inputs
Radius - 8 px8 pxWidget containers, compact cards and bottom sheets
Radius - 12 px12 pxEmbedded live-blog media and compact rounded badges
Radius - 16 px16 pxCategory pills and permission-dialog surfaces
Radius - Full1000 pxChips, search fields, floating CTAs, avatars and action buttons
Spacing
TokenValueUsed in
Spacing - 4 px4 pxCompact internal spacing and content gaps
Spacing - 8 px8 pxCompact internal spacing and content gaps
Spacing - 12 px12 pxCompact internal spacing and content gaps
Spacing - 16 px16 pxPage insets and separation between content groups
Spacing - 20 px20 pxPage insets and separation between content groups
Spacing - 24 px24 pxPage insets and separation between content groups
Spacing - 28 px28 pxPage insets and separation between content groups
Spacing - 32 px32 pxPage insets and separation between content groups
Colour
Accent
#FF8400Brand details, primary buttons, selected controls, active input borders, editorial emphasisError
#F44336Errors, warnings, snackbars, live indicators, urgent updatesSuccess
#8BC66FLimited positive cricket-result textLink
#3564C9Article links, read-more links, location detection, linked actionsBlack / Grey_100
#000000Logo, media backgrounds, overlays, video-duration labelsPrimary / Grey_70
#2B2B2BHeadlines, body text, headings, navigation, important iconsSecondary / Grey_40
#808080Supporting text, metadata, share/save actions, inactive navigationTertiary / Grey_20
#BEBEBEPlaceholders, input borders, disabled buttons, subdued metadataBorder / Grey_5
#EAEAEAOutlines, separators, dividers, category-pill bordersHeader & Footer / Grey_1
#FAFAFAHeader, bottom navigation, supporting rows and containersBackground / Grey_0
#FFFFFFPage backgrounds, cards, sheets, dialogsDefault White
#FFFFFFText and icons on dark or colored surfacesCategory colours
मेरा शहर
#FF554BLocal news headline accents, section CTAsदेश
#83B82ENational and political news headline accents, icons, section CTAsएंटरटेनमेंट
#9D46F3Entertainment news headline accents, section CTAsस्पोर्ट्स
#0F86F5Sports news headlines, slugs, section CTAsराशिफल
#7059FFRashifal news headline accents, section CTAsबिज़नेस
#3E9E3EBusiness news headlines, CTAs, confirmation and winning statusesDB ओरिजनल
#F89C1DOriginal reporting accents, section CTAs, brand detailsवीमेन
#F2639AWomen-category headlines, financial artwork and quiz graphicsटेक एंड ऑटो
#4766D2Tech and Auto headline accents, section CTAsजॉब्स एंड एजुकेशन
#22B6E4Job and education news headlinesविदेश
#39C3A2International news headline accents, live-blog slugs, section CTAsजीवन मंत्र / धर्म दर्शन
#DB6533Jeevan Mantra headline accents, live-blog slugs, section CTAsयूटिलिटी
#879DE9Utility news headline accents, live-blog slugs, section CTAsहैप्पी लाइफ / लाइफस्टाइल
#ECAF00Lifestyle news illustrationsओपिनियन
#6996CBOpinion news section CTAमैगज़ीन
#B85E95Manoranjan news headline slugs