Skip to main content

Brand DocsDocs

Introduction
Overview
Brand Architecture
Logo
Logo Usage
Clear Space & Sizing
Misuse
Color
Color Palette
Accessibility & Contrast
Typography
Typography Overview
Print & Formal Docs
Digital
Slides
Type Scale & Pairing
Imagery
Photography Style Overview
Mood & Reference Board
Negative Space for Logo
Do & Don't
Scenario A — Everyday Corporate
Scenario B — Visionary Innovation
Scenario C — Strategic Technology
Scenario D — B.GRIMM Power Energy
Scenario E — People & Partnership
Scenario F — Digital Events & Cyber
Scenario G — Corporate Portraits

Voice & Tone
Writing Style
Thai / English Guidelines
Core Messaging

Design System
Principles
Layout & Navigation
Buttons & Cards
Forms & Inputs
States & Feedback
Animation Guidelines
Badges & Tags
Avatar & List
Data Table
Design Tokens
Token Architecture
Color Tokens
Typography Tokens
Spacing, Radius & Elevation
Versioning
Framework Implementation
Figma — Variables Setup
Figma — Component Library
Figma — File Link
Tailwind — Config
Tailwind — Usage Patterns
MUI — Theme
MUI — Component Overrides
Vanilla CSS/HTML — CSS Variables
Vanilla CSS/HTML — Page Starter
Print — Adobe Swatches

Data Visualization
Chart Selection
Chart.js Theme
Dashboard Patterns
Presentations
Slide Deck Guidelines
Slide Theme Files
Motion & Broadcast
Broadcast Safe Colors
Lower Third & Overlay
Live Series Templates
AI & Skills
AI Usage Principles
Image Generation Guide
Prompt Library
Video Gen — Guide
Video Gen — Shot List
Skill Files — Overview
Skill Files — Claude
Skill Files — OpenWebUI

Templates & Assets
Downloads
Governance
Contact & Changelog

Introduction
Logo
Color
Typography
Imagery
Voice & Tone
Design System
Design Tokens
Framework Implementation
Data Visualization
Presentations
Motion & Broadcast
AI & Skills
Templates & Assets
Governance

Framework Implementation
Tailwind CSS

Tailwind CSS

Implementation guide

📄️ Tailwind Config

tailwind.config.js/ts ที่ generate จาก token

📄️ Usage Patterns

class convention และตัวอย่าง component

Figma File Link

Tailwind Config

B.Grimm Digital

Self-hosted Docusaurus v3.9.2 • by B.Grimm | Digital and Energy Solutions • Brand Docs • Contact Support