ThaiCloudLegacy format

An editorial precision interface for a community platform where developers discover, share, and download design system files. The aesthetic is quietly confident — bold display typography, generous spacing, and gallery-frame card surfaces. The mood is professional and modern without being sterile. High information density balanced by breathing room.

Primary#0671B8
Secondary#00A8A7
Neutral#9C9C9C
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayKanit · 72px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

HeadlineKanit · 60px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Section headingKanit · 32px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SubheadKanit · 24px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyKanit · 15px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SmallKanit · 13px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionKanit · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

OverlineKanit · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

An editorial precision interface for a community platform where developers discover, share, and download design system files. The aesthetic is quietly confident — bold display typography, generous spacing, and gallery-frame card surfaces. The mood is professional and modern without being sterile. High information density balanced by breathing room.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

TagActiveStatus PublishedStatus PendingStatus Rejected

lists

default

hover

checkboxes

default

navigation

default

hover

Elevation & Depth

hover card
primary button
focus
dropdown

Do's & Don'ts

Do

use blue (#0671B8) only for interactive elements — never for decoration or static text
maintain the 4px spacing grid for all padding, margins, and gaps
use Kanit for both headings and body, and JetBrains Mono for code — never set code in Kanit
keep kit cards at 12px radius and buttons/inputs at 6px — don't mix these values
provide sufficient contrast in both light and dark modes — test both

Don't

use pure black (#000000) or pure white (#FFFFFF) for text — use the defined palette values
add decorative gradients or illustrations — the interactive dot grid is the only decorative element
use shadows on static elements — reserve shadow elevation for hover and focus states
use more than two font weights on a single screen
place more than one primary (filled blue) button in the same view section
Download .md
Teeravee Sirinapasawasdee Teeravee Sirinapasawasdee @teeravee
License MIT
Uploaded yesterday
Version v2
File size 6.6 KB
Downloads 8
Copies 2
bold devtools landing-page light mobile-app

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/teeravee/thaicloud-design-system and implement it in my code

Don't have the MCP? Install it here