MintPrin.com Design System

I'm not really a designer - just someone who obsesses over how things fit together. A design system turns aesthetics into logic. That's where design feels less like decoration and more like clarity.

Typography

Headings (Noto Sans Thai)

Heading 1

Heading 2

Heading 3

Thai Example

ระบบการออกแบบมิ้นท์

Body (Bai Jamjuree)

Large text (text-lg) — Used for emphasized content, navigation, and section intros.

Regular body text (text-body) — A balanced blend of editorial tone and product logic with soft contrast and human warmth.

Caption text (text-caption) — Subtle details, supporting information, small labels, and metadata.

Thai + English

การออกแบบที่ดี disappears quietly — ให้ผู้ใช้รู้สึกว่าทุกอย่างเป็นไปตามธรรมชาติ.

Monospace (IBM Plex Mono)

const token = "mint-accent";

Post Body (.prose-mint)

Body and lists use .prose-mint, column uses .post-column • No italic: Thai has no true italic, the browser fakes the slant

Most product calls are not hard because the data is missing. They are hard because nobody decided what the product is for. A short paragraph at this size shows the real reading rhythm of a post.

การตัดสินใจเรื่อง product ส่วนใหญ่ไม่ได้ยากเพราะขาดข้อมูล แต่ยากเพราะยังไม่มีใครตัดสินว่า product นี้มีไว้เพื่ออะไร ย่อหน้านี้แสดงจังหวะการอ่านจริงของโพสต์ภาษาไทย

Lists share the paragraph size and rhythm
รายการภาษาไทยใช้ขนาดและระยะบรรทัดเดียวกัน

Color System

Base Palette

Background

Primary surface

bg-mint-background

#FFFFFF #0C0C0C

Text Primary

Main content

text-mint-text-primary

#1A1A1A #FAFAFA

Accent

Signature Mint hue

bg-mint-accent

#2E7C8C #70C1C9

Highlight

Soft accent areas

bg-mint-highlight

#E3F2F3 #153A3F

Success

Calm positive tone

bg-mint-success

#3BAA7D #7ED4B2

Error

Gentle alerts

bg-mint-error

#D34A4A #F08080

Border

Subtle dividers

border-mint-border

#E0E0E0 #333333

Text Secondary

Details & captions

text-mint-text-secondary

#555555 #B3B3B3

Neutral Scale

50

#FAFAFA #0F0F0F

100

#F2F2F2 #1C1C1C

200

#E6E6E6 #2A2A2A

300

#CCCCCC #3A3A3A

400

#999999 #7A7A7A

500

#666666 #999999

Spacing & Layout

Spacing Scale (divisible by 4)

xs (4px) Tiny gaps

s (8px) Button padding, small cards

m (16px) Standard component padding

l (24px) Section spacing, card gaps

xl (40px) Large layout blocks

Layout Grid & Breakpoints

sm: 480px

md: 768px

lg: 1024px

xl: 1280px

Responsive 12-Column Grid Demo

12/12 → 6/12 → 4/12

12/12 → 12/12 → 4/12

Container: max-w-container (1200px) • Gutter: gap-gutter (24px) • Mobile padding: px-mobile-padding (16px)

Components

Buttons

Cards

Card Title

Cards have soft shadows, rounded corners (12px), and subtle hover effects with lift and tint.

Interactive

Hover over cards to see the gentle elevation change and accent tint applied smoothly.

Modular

Build from atoms to molecules to sections. Minimal and purposeful design components.

Navigation Demo

Navigation links: lowercase, wide letter spacing, soft underline fade-in on hover

Code Blocks

Inline Code

Use inline code for variables like const token = "mint" or function names like toggleDarkMode() within paragraphs.

Code Block with Copy Button

Multi-line code blocks feature a copy button in the upper right corner for easy copying.

JavaScript Example

function toggleDarkMode() {
  const isDark = document.body
    .classList.toggle('dark');
  localStorage.theme = isDark 
    ? 'dark' : 'light';
}

CSS Example

.btn-primary {
  background: var(--mint-accent);
  color: white;
  padding: 8px 24px;
  border-radius: 8px;
  transition: transform 120ms;
}

.btn-primary:hover {
  transform: scale(1.03);
}

Full Width Code Block

// Mint Design System - Color Tokens
const colors = {
  mint: {
    background: '#FFFFFF',
    textPrimary: '#1A1A1A',
    textSecondary: '#555555',
    accent: '#2E7C8C',
    highlight: '#E3F2F3',
    border: '#E0E0E0',
  },
  dark: {
    background: '#0C0C0C',
    textPrimary: '#FAFAFA',
    textSecondary: '#B3B3B3',
    accent: '#70C1C9',
    highlight: '#153A3F',
    border: '#333333',
  }
};

Code Block Styling

• Font: IBM Plex Mono for clear readability
• Background: Neutral-100 with left accent border
• Padding: 24px (l) with subtle shadow
• Copy button: Appears on hover with smooth fade
• Feedback: Checkmark appears briefly after copying

Imagery & Iconography

Image Grid (4:3 Aspect Ratio)

Image 1

Image 2

Image 3

Imagery style: human, natural, unpolished but clean — prefer real textures and light

Iconography (Outline style, feather-weight)

Interaction & Motion

Hover States

Smooth, subtle transitions (100–200ms ease-in-out). Buttons scale slightly (1.03×), cards lift and tint.

Focus States

Soft glow with accent color at 30% opacity. Always visible for accessibility.

Motion Principles

• Prefer opacity & transform over other properties
• Durations: 100–300ms for UI interactions
• Easing: ease-in-out for natural feeling
• Dark mode toggle: 150ms background-color fade
• Scroll reveals: fade-up with 400ms timing

Accessibility

Text Contrast

All text meets WCAG AA standards with contrast ratio ≥ 4.5:1 for primary text.

Primary text (4.5:1+ contrast)

Secondary text (readable contrast)

Nav links on header

About text-mint-nav

About text-mint-dark-accent

Interactive Elements

All tap targets ≥ 44px for easy interaction. Focus indicators always visible.

Bilingual Support

Thai and English text display clearly in both light and dark modes with proper line-height and spacing.

English: The quick brown fox jumps over the lazy dog.

ไทย: การออกแบบที่ดีต้องคำนึงถึงทั้งความสวยงามและการใช้งาน