Thaimart: One system, after four versions without one.ระบบกลาง หลังสี่เวอร์ชันที่ไม่มี

Thaimart is 7 Solutions' own marketplace for Thai brands, OTOP goods, food, herbs and fashion, on the web and in an app, with checked sellers and a ranking that rewards quality and reviews over ad spend. Its first four versions had no system to speak of: parts were used wrongly and mixed together, and each designer made their own. For version 5 I was given the job of building one design system for the whole project, and I built it alone. It carried version 5 until the product was later redesigned.ไทยมาร์ทคือมาร์เก็ตเพลสของ 7 Solutions เอง สำหรับแบรนด์ไทย สินค้า OTOP อาหาร สมุนไพร และแฟชั่น มีทั้งเว็บและแอป ร้านค้าผ่านการยืนยันตัวตน และการจัดอันดับให้น้ำหนักกับคุณภาพและรีวิวมากกว่าเงินโฆษณา สี่เวอร์ชันแรกไม่มีระบบที่เป็นระเบียบ ใช้ผิด ใช้ปนกันไปหมด ต่างคนต่างทำของตัวเอง ในเวอร์ชัน 5 ผมได้รับมอบหมายให้สร้างดีไซน์ซิสเต็มกลางของทั้งโปรเจกต์ และทำคนเดียว ระบบนี้ใช้กับเวอร์ชัน 5 จนภายหลังโปรดักต์ถูกรีดีไซน์ใหม่

The logo is the system's first page: one component with three layouts (the name to the right, the name below, the badge alone), four colours (default, black, white and mono) for light, red and dark backgrounds, and ten sizes from 48 down to 12.โลโก้คือหน้าแรกของระบบ เป็นคอมโพเนนต์ตัวเดียวที่มี 3 รูปแบบ (ชื่ออยู่ขวา ชื่ออยู่ล่าง และสัญลักษณ์อย่างเดียว) 4 สี (default, black, white และ mono) สำหรับพื้นสว่าง พื้นแดง และพื้นมืด และ 10 ขนาด ตั้งแต่ 48 ลงไปถึง 12

Two brand colours (Thaimart red and navy), then twelve hues and a neutral, each as a scale from 010 to 975, each with six see-through steps for hovers and overlays. On top of them sit semantic colours named for what they do: surface, content, border, and for every state a control can be in.สองสีแบรนด์ คือแดง Thaimart และน้ำเงิน ตามด้วยอีก 12 เฉดและสีกลาง แต่ละชุดไล่จาก 010 ถึง 975 และมีแบบโปร่งแสงอีก 6 ขั้นสำหรับ hover และ overlay ชั้นบนเป็นสีตามความหมาย ตั้งชื่อตามหน้าที่ ได้แก่ พื้นผิว เนื้อหา เส้นขอบ และครบทุกสถานะของคอนโทรล

Display, heading, body and caption, each with its size and line height: 58 on 96 down to 12 on 20. The lines run about 1.6 to 1.8 times the size, so Thai above- and below-line marks never touch the next line.display, heading, body และ caption แต่ละขนาดมีระยะบรรทัดของตัวเอง ตั้งแต่ 58/96 ถึง 12/20 ระยะบรรทัดราว 1.6–1.8 เท่าของขนาดตัวอักษร สระบนล่างของภาษาไทยจึงไม่ชนบรรทัดถัดไป

Spacing from 0 to 80 in small steps for components and large ones for layouts; radius from none to fully rounded, with small for forms and buttons, medium for menus, large for popups; four elevations, each a hairline edge and a soft drop; and a grid of 2 columns on mobile, 12 on desktop.ระยะห่างตั้งแต่ 0 ถึง 80 ขั้นเล็กสำหรับคอมโพเนนต์ ขั้นใหญ่สำหรับเลย์เอาต์ มุมโค้งตั้งแต่ไม่โค้งจนโค้งเต็ม เล็กสำหรับฟอร์มและปุ่ม กลางสำหรับเมนู ใหญ่สำหรับป๊อปอัป เงา 4 ระดับ แต่ละระดับมีเส้นขอบบางกับเงานุ่ม และกริด 2 คอลัมน์บนมือถือ 12 คอลัมน์บนเดสก์ท็อป

Every Button and Input state is drawn and bound to a semantic colour, so hover, focus, pressed and disabled are designed, not guessed: the focus ring, the error border, the disabled fill. Play with them below: they're drawn from the same values as the file.ทุกสถานะของปุ่มและช่องกรอกถูกวาดไว้และผูกกับสีตามความหมาย ทั้ง hover, focus, กด และปิดใช้งาน จึงเป็นสิ่งที่ออกแบบแล้ว ไม่ใช่เดา ทั้งวงโฟกัส เส้นขอบตอนผิดพลาด และพื้นตอนปิดใช้งาน ลองเล่นด้านล่างได้ วาดจากค่าเดียวกับในไฟล์