MintPrin.com
Menu

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";

Color System

Base Palette

Background

Primary surface

bg-mint-background

#FFFFFF

Text Primary

Main content

text-mint-text-primary

#1A1A1A

Accent

Signature Mint hue

bg-mint-accent

#2E7C8C

Highlight

Soft accent areas

bg-mint-highlight

#E3F2F3

Success

Calm positive tone

bg-mint-success

#3BAA7D

Error

Gentle alerts

bg-mint-error

#D34A4A

Border

Subtle dividers

border-mint-border

#E0E0E0

Text Secondary

Details & captions

text-mint-text-secondary

#555555

Neutral Scale

50

#FAFAFA

100

#F2F2F2

200

#E6E6E6

300

#CCCCCC

400

#999999

500

#666666

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 → 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

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)

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.

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