সময় নিউজ | সময় নিউজ

Design Specification — সময় নিউজ | সময় নিউজ

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#222222), a vivid accent (#DC3545). Display headings use a distinct face (Noto Serif Bengali) over the body stack (Roboto). Detected font weights: 400, 500, 600, 700, 900. Detected style signatures: rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://www.somoynews.com.bd/_next/image?url=%2Fassets%2Fimages%2Flogo.png&w=256&q=75

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(90deg,#fff0 0%,#fff9 50%,#fff0 100%)
• linear-gradient(90deg,#f5f5f500 0%,#fff9 50%,#f5f5f500 100%)
• linear-gradient(90deg,#ececec 0,#f5f5f5 50%,#ececec 100%)
• linear-gradient(90deg,#0000,#fff3,#0000)
• linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))

Typography

Primary typeface: Roboto — stack: Roboto

Display / heading typeface: Noto Serif Bengali (used for large headings; body uses the primary stack)

Font stacks (most used first)

• Roboto
• Noto Serif Bengali
• "Font Awesome 5 Free"
• Noto Serif Bengali Fallback
• Noto Serif Bengali,Noto Serif Bengali Fallback
• Roboto Fallback
• var(--bs-font-sans-serif)
• var(--bs-body-font-family)
• var(--bs-font-monospace)
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 0 .25rem rgba(13,110,253,.25)
• 0 0 2px #00000051
• 0 8px 14px 12px #bababa33
• 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
• inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075)
• 0 0 0 0.25rem rgba(, .5)
• 0 0 0

Layout

Container max-width: 992px

Grid columns (largest detected grid): 1

Breakpoints

• 500px
• 767px
• 768px
• 991px
• 992px
• 1024px
• 1200px
• 1225px

Animation & Motion

Transitions

• all .3s ease
• all .3s ease
• transform .4s
• background .4s
• background .4s,color .4s
• border-color .15s ease-in-out,box-shadow .15s ease-in-out
• none
• color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
• opacity .15s linear
• color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
• box-shadow 0.15s ease-in-out

Keyframes

@keyframes pulse { 0%{background-color:#e1e1e1}50%{background-color:#f0f0f0}to{background-color:#e1e1e1} }
@keyframes shimmer { 0%{background-position:-500px 0}to{background-position:500px 0} }
@keyframes pulsate { 0%{opacity:0;-webkit-transform:scale(.1)}50%{opacity:1}to{opacity:0;-webkit-transform:scale(1.2)} }
@keyframes news-shimmer { to{transform:translate(100%)} }
@keyframes shimmerMove { 0%{background-position:-1000px 0}to{background-position:1000px 0} }
@keyframes fadeIn { to{opacity:1;transform:translateY(0)} }
@keyframes bounce { 0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)} }
@keyframes newsTicker { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes webStoryFromRight { 0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)} }
@keyframes webStoryFromLeft { 0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)} }
@keyframes webStoryFromTop { 0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)} }
@keyframes webStoryFromBottom { 0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)} }
@keyframes webStoryCaptionFade { 0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes progress-bar-stripes { 0%{background-position-x:var(--bs-progress-height)} }
@keyframes spinner-border { to{transform:rotate(360deg)} }
@keyframes spinner-grow { 0%{transform:scale(0)}50%{opacity:1;transform:none} }
@keyframes placeholder-glow { 50%{opacity:.2} }
@keyframes placeholder-wave { 100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%} }

Animations

• 1s ease-out infinite pulsate
• 1.5s infinite shimmer
• 1.5s infinite news-shimmer
• 1.2s ease-in-out infinite shimmer

CTA labels found on page

• En
• English

Source Design Tokens (CSS custom properties)

:root {
  --primary: #f04130;
  --black-color: #000;
  --white-color: #fff;
  --border-color: #eee;
  --border-color2: #ddd;
  --gray-color: #f7f7f7;
  --remaining-height: calc(100vh - 239px);
  --transition: all .3s ease;
  --bs-gutter-x: unset!important;
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13,110,253;
  --bs-secondary-rgb: 108,117,125;
  --bs-success-rgb: 25,135,84;
  --bs-info-rgb: 13,202,240;
  --bs-warning-rgb: 255,193,7;
  --bs-danger-rgb: 220,53,69;
  --bs-light-rgb: 248,249,250;
  --bs-dark-rgb: 33,37,41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
}

Do's and Don'ts

Do

• Do reserve the accent #DC3545 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in Noto Serif Bengali with tight tracking (-.2px), and body copy in the primary stack.
• Do stick to the detected font weight(s): 400, 500, 600, 700, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #FFFFFF;
  --color-text-primary: #222222;
  --color-primary: #F04130;
  --color-accent: #DC3545;
  --color-surface: #F8F9FA;
  --color-secondary: #000000;
  --color-text-secondary: #DEE2E6;
  --color-border: #343A40;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F9FA;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #F0F0F0;
  --font-sans: Roboto;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 26px;
  --font-size-title-lg: 23px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 30px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 0 .25rem rgba(13,110,253,.25);
  --shadow-md: inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);
  --shadow-lg: 0 8px 14px 12px #bababa33;
  --space-xs: 3px;
  --space-sm: 8px;
  --space-md: 16px;
  --font-display: Noto Serif Bengali;
  --tracking-display: -.2px;
  --container-max: 992px;
}