Switch between the rendered Visual preview and the Raw DESIGN.md.
MGR Online embodies a professional, authoritative news platform with a bold, high-contrast aesthetic designed to command attention and build trust. The design prioritizes clarity and immediate content hierarchy through strategic use of primary blues, vivid accent reds, and neutral grays. This system creates a dynamic yet professional environment that conveys urgency and reliability—essential for a news organization serving Thailand's diverse audience. The design favors clean layouts with generous whitespace, allowing content to breathe while maintaining visual interest through color blocking and typography variation. The overarching mood is contemporary journalism: direct, impactful, and accessible across all devices.
Key Characteristics
#337AB7) as the dominant brand color, evoking trust and authority#FF0000, #E62117) for breaking news and urgent alerts#333333, #FFFFFF) for legibility and professionalism#337AB7): Primary interactive elements, links, call-to-action buttons, and brand accent bars. Used extensively throughout the interface for consistency.#23527C): Hover states and secondary brand applications; provides deeper visual feedback.#4862A3): Tertiary brand color for subtle accents and background tints.#125688): Navigation active states and emphasis elements requiring maximum contrast.#296494): Edge cases and specialized brand applications.#FF0000): Primary danger, error states, and breaking news alerts. High visibility for critical information.#E62117): Darker red variant for hover states on red elements and secondary urgent messaging.#D14836): Tertiary error state and muted alert styling.#FF9900): Warning states and caution messaging distinct from errors.#337AB7): Default hyperlink color for body text and inline navigation.#23527C): Darker blue on hover for link feedback.#337AB7): Primary button backgrounds and CTAs.#333333): Primary text color; high contrast on white for readability. Most frequently used neutral.#999999): Secondary text, timestamps, and metadata.#BBBBBB): Disabled states and de-emphasized content.#EEEEEE): Subtle background tints and dividers.#F2F2F2): Card backgrounds and container fills.#808080): Tertiary text and utility labels.#FFFFFF): Primary surface and card backgrounds; high contrast base.#000000): Strong borders and rare emphasis elements.#E7E8E1): Subtle container borders and dividing lines.#FF0000): System errors, validation failures, critical alerts.#D14836): Secondary error messaging and muted error states.#FF9900): Non-critical alerts and cautionary messaging.#4CAF50 for positive confirmations.'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif'Font Awesome 5 Free''Courier New', monospace| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/Hero | C-Font-Bold | 36px | 400 | 44px | 0px | Page titles, hero headlines |
| Heading 1 | C-Font-Bold | 28px | 400 | 33.6px | 0px | Major section titles |
| Heading 2 | C-Font-Bold | 18px | 400 | 21.6px | 0px | Article titles, card headers |
| Heading 3 | C-Font-Normal | 14px | 400 | 22.4px | 0px | Section subheadings, metadata |
| Body Text | C-Font-Normal | 14px | 400 | 19.6px | 0px | Article body, descriptions |
| Button Text | C-Font-Bold | 12px | 400 | 18px | 0px | CTA and button labels |
| Label/Caption | C-Font-Normal | 12.5px | 400 | 19.6px | 0px | Form labels, timestamps |
| Small Text | C-Font-Normal | 11px | 400 | 16.5px | 0px | Metadata, bylines, captions |
| Icon | FontAwesome | 18px | 400 | 18px | 0px | Icon glyphs, decorative symbols |
#337AB7#FFFFFF12px4008px 16px4px0px32px18px#23527C, maintain text color#125688#CCCCCC, text color #999999, cursor not-allowed#F2F2F2#337AB712px4008px 16px4px1px solid #337AB732px18px#E8EAEF, border #23527C, text #23527C#D9DEEB, border #125688, text #125688transparent#337AB714px4000px0px0pxauto19.6px#23527C, underline 1px solid #337AB7#125688transparent#99999918px4000px0px0px20px20px#337AB7#23527C#FF0000#FFFFFF12px4008px 16px4px0px32px18px#E62117#D14836#FFFFFF#33333320px 15px0px1px solid rgba(0, 0, 0, 0.08)rgba(0, 0, 0, 0.04) 0px 2px 4px120px16px14px19.6pxrgba(0, 0, 0, 0.12) 0px 4px 8px, transform translateY(-2px)#000000 or video overlay with 60% opacity#FFFFFF32px0px0pxnone300px20px14px19.6px#E7E8E1#33333320px 15px0px0pxnoneauto16px14px19.6px#FF0000#FFFFFF12px 16px0px0pxnone44px14px40019.6px#FFFFFF#333333#99999914px8px 12px4px1px solid #CCCCCC36px19.6px2px solid #337AB7, outline none, box shadow 0px 0px 0px 3px rgba(51, 122, 183, 0.1)1px solid #FF0000, background #FFF5F5#F2F2F2, text #BBBBBB, cursor not-allowed18px × 18px#FFFFFF1px solid #CCCCCC2px#337AB71px solid #337AB70px 0px 0px 2px rgba(51, 122, 183, 0.2)18px diameter#FFFFFF2px solid #CCCCCC50%2px solid #337AB76px diameter, background #337AB70px 0px 0px 2px rgba(51, 122, 183, 0.2)12.5px400#33333319.6px8px#FF0000, margin left 4px#FFFFFF#33333355px0px 20px1px solid #EEEEEE14px19.6px#33333314px12px 16px0px3px solid transparent3px solid #337AB7, color #337AB73px solid #337AB7, color #337AB7, font weight 500#FFFFFF#3333331px solid #CCCCCC0px8px 0pxrgba(0, 0, 0, 0.3) 0px 6px 12px 0px12px 16px#F2F2F2, color #337AB712px#999999/ in #999999#333333#337AB7underline, color #23527C#FF0000#FFFFFF11px4004px 8px10px0pxinline-block16px#E7E8E1#33333311px4004px 12px14px1px solid #CCCCCC16px#FF9900#FFFFFF11px4004px 8px10px16pxtransparent#33333314px12px 16px2px solid transparent#F2F2F22px solid #337AB7, color #337AB7, font weight 500#FFFFFF20px1px solid #EEEEEE0px4px4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 52px, 60px, 80px, 104px, 120px, 132pxUsage Context:
4px–8px): Button padding, badge internals, tight component gaps12px–16px): Form field padding, card padding, section dividers20px–32px): Container padding, section margins, feature spacing40px–60px): Major section breaks, page padding on desktop80px–132px): Page margins, hero sections, full-width content separation1188px for main content area (standard desktop)20px on tablet/mobile, 32px on desktop16px between grid columnsMGR Online follows a generous whitespace approach that emphasizes content breathing room and visual hierarchy. Space is used strategically to group related content and separate distinct sections, preventing cognitive overload. Large gaps between major sections (60px–120px) provide visual rest points. Within cards and containers, internal padding (16px–20px) ensures text remains comfortably distant from edges. Whitespace also functions as a visual separator, reducing reliance on borders and creating a modern, premium aesthetic.
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, box-shadow: none | Default buttons, text, borders |
| Raised (Level 1) | rgba(0, 0, 0, 0.04) 0px 2px 4px | Card shadows, subtle elevation |
| Elevated (Level 2) | rgba(0, 0, 0, 0.12) 0px 4px 8px | Hovered cards, floating elements |
| Dropdown (Level 3) | rgba(0, 0, 0, 0.3) 0px 6px 12px 0px | Dropdown menus, modals, overlays |
| Modal (Level 4) | rgba(0, 0, 0, 0.4) 0px 8px 16px 0px | Full-page modals, alerts (inferred) |
Shadow Philosophy: MGR Online uses a restrained shadow approach that maintains clarity while providing subtle depth cues. Shadows are dark and soft, creating perceived depth without distraction. The most prominent shadow (Level 3) appears on interactive overlays like dropdowns. Cards use minimal shadows (Level 1) in default state and increase on hover to signal interactivity. Avoid stacking multiple shadows; use a single, well-calibrated shadow per element for visual consistency.
#337AB7 as the primary interactive color for links, buttons, and highlights36px touch targets for mobile buttons and interactive elements#FFFFFF backgrounds for card content to ensure readability against body text16px–20px) inside cards and containers for breathing room#FF0000 exclusively for breaking news, errors, and urgent alerts4px border radius on inputs, buttons, and form controlsC-Font-Normal and C-Font-Bold stack for all body and heading text0px for character integrity11px except in extreme edge cases#337AB7) or red (#FF0000), never both#CCCCCC or lighter) on white backgrounds; minimum contrast ratio 4.5:1 required200ms| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single-column layout, full-width cards, 12px–14px font sizes, 16px padding |
| Small Tablet | 480px–767px | Single-column with wider padding, 14px body text, 20px section margins |
| Tablet | 768px–1023px | 2-column card grid, 14px–16px font sizes, 24px section margins, max-width 728px |
| Desktop | 1024px–1439px | 3-column card grid, 14px–18px font sizes, 32px padding, max-width 1188px |
| Large Desktop | 1440px+ | Fixed max-width 1188px, centered container, 40px–60px outer padding |
44px × 44px for all interactive elements (buttons, links, checkboxes, icons)48px × 48px for primary CTAs and frequently used actions8px gap to prevent accidental activation36px × 36px if clearly actionable36px, checkbox/radio 18px × 18px (expand touch area with 8px padding around)1188px, 32px padding728px, 24px padding, hide secondary sidebars16px padding each side12px padding, hide decorative elements, prioritize content#337AB7) — Links, buttons, hover states#FFFFFF) — Cards, containers, primary surfaces#333333) — All headings, primary text#333333) — Article text, descriptions#999999) — Metadata, timestamps, captions#BBBBBB) — Disabled form states#FF0000) — Breaking news badges, error alerts#FF9900) — Caution messaging#23527C) — Darker version of primary blue#125688) — Active nav links, emphasized states#FFFFFF) — News cards, content containers#E7E8E1) — Featured/highlight sections#EEEEEE) — Subtle dividers, card borders#999999) — Icon glyphs, then change to #337AB7 on hover#337AB7 as the base interactive color — Link colors, primary buttons, navigation active states all map to this single blue. Danger actions use #FF0000.36px, H1 28px, H2 18px, Body 14px, Label 12.5px, Small 11px. Do not interpolate; use exact values from the hierarchy table.4px: Use 8px, 12px, 16px, 20px, 24px, 32px, never arbitrary values. Buttons: 8px 16px. Cards: 20px 15px. Inputs: 8px 12px.rgba(0, 0, 0, 0.04) 0px 2px 4px, hover rgba(0, 0, 0, 0.12) 0px 4px 8px, dropdown rgba(0, 0, 0, 0.3) 0px 6px 12px 0px.#23527C or #125688), shadow increase, or background change. No silent interactions.#FF0000) for breaking news and errors only, Orange (#FF9900) for warnings only. Do not repurpose these for other meanings. Maintain accessibility contrast ratio ≥ 4.5:1 for all text on backgrounds.