# Lanna Craft > Hand-dyed indigo, lacquer red and teak on unbleached cotton, edged with woven tin chok hem bands and running-stitch outlines — calm Northern Thai craft. - Nickname: Indigo & tin chok - Also called: Northern Thai craft, Chiang Mai handmade, Woven indigo - Category: Thai & Regional - Moods: Calm, Natural, Friendly, Nostalgic - Industries: Fitness & Wellness, Travel & Hospitality, Food & Restaurant, Creative & Portfolio, E‑commerce - Style page: https://uilingo.dev/styles/lanna-craft/ From the hand looms of Chiang Mai: the page is unbleached cotton with a faint plain-weave texture, the main colour is mo hom indigo, and lacquer red, teak brown and turmeric ochre appear only as woven threads. Panels are finished like cloth: weft pin stripes on ordinary cards, a full tin chok lozenge hem on alternate section bands, price cards, the hero product frame, the CTA, featured cards and the footer, and a dashed running stitch inside the outline. A sturdy calligraphic serif over a soft humanist Thai sans keeps it slow and hand-made, not ceremonial or glossy. ## Best for - Spas, yoga studios and retreats in Northern Thailand - Handmade textile, ceramic and coffee brands from Chiang Mai and Nan - Community-based tourism, homestays and craft workshops - Slow-living and wellness apps with a strong local identity ## Avoid for - Fintech, developer tools and dense data products - Ceremonial or royal campaigns (use Thai Modern Heritage) - Loud sales and street-market promotions ## Do - Use indigo for the one main action and large dyed panels; keep red, teak and ochre as 1–3px threads - Put the 22px tin chok hem only on .alt section edges, price cards, the hero product frame, textile art panels, the CTA, the mobile featured card and the footer; use 8px weft pin stripes on ordinary card tops, under the nav and top bar, and above the tab bar; never put either behind body text - Keep each plain-weave line layer at or below 6% alpha (teak 5.5%, indigo 4.5%) and Thai body line-height 1.7+ (eyebrows exactly 1.7) - Use the dashed running stitch as the hand-made finish: 13px 6px 6px inside cards, 28px 7px 7px under a hem, 4px inside buttons ## Don't - Don’t use gold leaf, temple arches or Prajam Yam — that is Thai Modern Heritage - Don’t fill large areas with lozenge pattern at full contrast; it vibrates - Avoid pure white, glossy gradients and soft blurred shadows - Don’t set body text in a script or decorative Thai display face ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Lanna Craft" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Hand-dyed indigo, lacquer red and teak on unbleached cotton, edged with woven tin chok hem bands and running-stitch outlines — calm Northern Thai craft. Design keywords: mo hom indigo, tin chok hem band, woven stripe borders, running-stitch outline, lacquer red threads, unbleached cotton ground, lozenge diamond motif, hand-made calm. ## Visual language Northern Thai (Lanna) hand-loom craft translated into calm UI. The page is unbleached cotton (#F3ECDF) with a faint plain-weave crosshatch; the dominant colour is deep mo hom indigo (#26386B), with lacquer red (#9C2A22), teak brown (#7A4A2A) and turmeric ochre used only as thin woven threads. Two ochres: #C08A2E (chart-3) for the 1px pin-stripe thread and woven bars; brighter #E2B04A only for the hem-tile centre, check icons on the indigo price card and the progress fill on the mobile featured card. Panels are finished like cloth: ordinary cards, the nav, the dashboard top bar and the tab bar carry 8px weft pin stripes; the full 22px tin chok lozenge hem goes top only on price cards, the hero product frame and the footer; top and bottom on .alt sections, the CTA panel and the textile art panels (showcase/onboarding/figure); bottom only on the mobile featured card. A dashed running stitch sits just inside each outline. Type is a sturdy calligraphic serif over a soft humanist sans; corners are small (3–8px; 12px only on the hero frame and CTA panel), shadows are flat and warm, and the overall pace is slow and hand-made rather than ceremonial or glossy. ## Signature details (must be visible) - Tin chok hem band, 22px tall: red 0–2px, cream 2–3px, indigo 3–19px, cream 19–20px, red 20–22px. Over the indigo zone repeat a 24×12px SVG tile with repeat-x at background-position y 5px from the band top (centred in the 3–19px zone): indigo #26386B fill; red #9C2A22 diamond M12 1 18 6 12 11 6 6Z (12×10) with an ochre #E2B04A centre M12 4 14 6 12 8 10 6Z; cream #F3ECDF half-diamonds M0 1 6 6 0 11Z and M24 1 18 6 24 11Z, which meet at each seam to form one cream diamond the same size as the red one. Placement: top only on price cards, the hero product frame and the footer; top and bottom on .alt sections, the CTA panel and the textile art panels (showcase/onboarding/figure); bottom only on the mobile featured card. Hems stay 22px at every breakpoint, and the panel radius clips the hem (overflow: hidden) - Weft pin stripes, 8px: indigo 3px, gap 2px, red 1px, gap 1px, ochre #C08A2E 1px — on top of every ordinary card, under the nav and the dashboard top bar, above the mobile tab bar, and as an 84px rule under every section h2 - Running stitch, 1px dashed: teak #7A4A2A at 42% alpha on light surfaces, cream #F3ECDF at 40–50% on indigo. Insets: cards inset 13px 6px 6px (8px stripes + 5px gap); hemmed panels inset 28px 7px 7px (22px hem + 6px gap); buttons inset 4px; mobile featured card outline-offset -7px; CTA panel outline-offset -32px (-16px under 640px) - Dyed indigo ikat tile for the hero product frame, showcase art, onboarding art and article figures — 36x36 SVG: fill #26386B; outline M18 2 34 18 18 34 2 18Z, no fill, stroke #354B88 2px, dasharray 3 2; inner diamond M18 10 26 18 18 26 10 18Z fill #2E4279; centre M18 15 21 18 18 21 15 18Z fill #B9852F. Calm tile (behind text: highlight price card, CTA panel, mobile featured card): stroke #2C3F75, inner #293B6F, no centre - Woven ribbon eyebrows: lacquer red #9C2A22 label, text #FBF1E6 (on-secondary), threads = color-mix(in srgb, #FBF1E6 55%, #9C2A22) 1px at 3px from top and bottom; swallow-tail ends via clip-path polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%). Latin: 0.74rem uppercase, 0.16em tracking, weight 700, padding 5px 18px. Thai: 0.86rem, weight 600, no tracking, line-height 1.7, padding 4px 20px - Lozenge as the only shape motif: rotated-square logo with a red ring, diamond (clip-path) red step numbers, diamond legend and status dots, diamond active marker in the tab bar and onboarding dots - Plain-weave background: two repeating-linear-gradients of 1px lines every 3px — horizontal lines rgba(110,80,50,0.055), vertical lines rgba(38,56,107,0.045); keep each layer at or below 6% alpha - The whole hero headline in indigo #26386B, with no red word highlight; red stays as 1–3px threads, the ribbon eyebrow and step diamonds. KPI values also indigo; Alegreya 600 for Latin headings, Pridi 600 for Thai, Alegreya Sans + KoHo for body ## Design tokens — use these exact values Colours (light mode): - background #F3ECDF - surface #FBF7EF - surface-2 #EADFCB - text #2B1E16 - text-muted #6A5646 - primary #26386B (text on it #F8F2E6) - secondary #9C2A22 (text on it #FBF1E6) - accent #7A4A2A - border #D4C3A6 - success #3F6B3A · warning #975F0D · danger #A3261E - chart series #26386B, #9C2A22, #C08A2E, #7A4A2A, #6F86B8 Radius: sm 3px, md 5px, lg 8px, xl 12px, pill 999px Border width: 1px Shadows: sm `0 1px 0 rgba(72,44,22,0.10)`, md `0 2px 0 rgba(72,44,22,0.08), 0 8px 18px -8px rgba(72,44,22,0.22)`, lg `0 3px 0 rgba(72,44,22,0.08), 0 18px 36px -14px rgba(72,44,22,0.30)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 260ms cubic-bezier(.3,.1,.2,1) ## Typography (Latin + Thai) - Headings: Alegreya 500/600 with Thai fallback Pridi 500/600 - Body: Alegreya Sans 400/500/700 with Thai fallback KoHo 400/500/600/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Alegreya:wght@500;600&family=Alegreya+Sans:wght@400;500;700&family=Pridi:wght@500;600&family=KoHo:wght@400;500;600;700&display=swap - CSS stacks: heading `"Alegreya", "Pridi", system-ui, sans-serif`; body `"Alegreya Sans", "KoHo", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.6rem), heading weight 600, heading tracking -0.005em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Pridi’s sturdy, slightly slabbed looped serif matches Alegreya’s calligraphic, low-contrast strokes; KoHo’s soft hand-made humanist forms sit beside Alegreya Sans with the same warm, pen-drawn feel. ## Components - Primary button: indigo fill, cream text, 3px radius, weight 700, dashed cream stitch 4px inside, 2px flat drop line in 22% text colour; hover darkens indigo 14% and lifts 1px - Secondary button: #FBF7EF surface, text colour, 1px teak-tinted border = color-mix(in srgb,#7A4A2A 55%,#D4C3A6); hover fills with surface-2 #EADFCB and the border turns full teak. Accent button is lacquer red with the same inner stitch - Cards: #FBF7EF surface, 1px #D4C3A6 border, 8px radius, 1px flat warm shadow, pin stripes along the top and a dashed stitch at inset 13px 6px 6px. Price cards: all three price cards get a top-only hem; the middle one is indigo with the calm ikat tile, a cream #F3ECDF button with indigo text, #E2B04A check icons and a red solid badge; stitch inset 28px 7px 7px - Inputs: surface fill, 1px #D4C3A6 border with a 2px bottom edge = color-mix(in srgb,#7A4A2A 45%,#D4C3A6), 3px radius; focus turns the border indigo with a 3px indigo ring at 16%. Checkboxes 2px radius, indigo when checked; switch is a squared track with a square thumb - Chips and radio cards: 3px radius with a 1px dashed outline = color-mix(in srgb,#7A4A2A 55%,#D4C3A6); active chip/selected radio is solid indigo with a 2–3px red thread along one edge - Badges: 2px radius tinted fills with a 30% currentColor border; solid badge is lacquer red - Nav: cotton strip, no blur, pin-stripe selvedge along the bottom; active link indigo with a 2px red underline; diamond logo - Charts: indigo and red-dashed lines, dashed 2/4 grid, woven bars (chart colour with a #C08A2E-tinted 2px thread every 9px), heatmap as an indigo dye swatch grid mixed toward the cotton surface with a 12% floor so low cells still read blue, 2px gaps and 1px radius, diamond legend dots - Dashboard top bar: surface with pin stripes on the bottom; active nav item is a solid indigo tab with a red bottom thread - Mobile tab bar: sticky surface strip with pin stripes on top, active item indigo with a 7px red diamond below the label ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: bar style. Sections in order: hero → features → steps → showcase → testimonials → pricing → faq → cta. Feature section as grid. Editorial hero: copy column ~56% left (red ribbon eyebrow, large indigo serif headline, lead, indigo primary and outlined secondary buttons, small note); the narrow right column holds the ikat-framed dashboard mock (12px radius, hem on top only) with one line-chart card on top and two KPI cards below; mock cards keep their pin stripes and stitch. Section rhythm: hero cotton -> features cotton -> steps darker (#EADFCB at 88%, hemmed top and bottom) -> showcase cotton -> testimonials darker -> pricing cotton -> FAQ darker -> CTA section cotton holding the 12px indigo CTA panel -> footer on cotton with a top hem. Because the CTA section sits on plain cotton, two hems never stack. Counts: 4-up features grid (6 cards in 2 rows) of stitched cards; 3 diamond steps in 3 columns on the darker band; 2 alternating showcase rows (an indigo ikat art panel hemmed top and bottom beside heading + copy + checklist); 3 testimonials as stitched cards with avatars as a 40px teak #7A4A2A circle with cream initials, 2px cotton gap and 1px red ring; 3 price cards (middle one indigo); 4–5 dashed-rule FAQ items; the indigo CTA panel with a red button and a dashed stitch at outline-offset -32px; the footer has no surface fill, padding-top 64px + 22px. Dashboards use a top nav, indigo KPI numbers, woven bars and an indigo heatmap. Responsive: 4-up features and 3-up steps go 2-up below 1024px and 1-up below 640px; the CTA stitch offset drops to -16px on phones. ## Content Use realistic product copy (fictional brand) suited to: Spas, yoga studios and retreats in Northern Thailand. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use indigo for the one main action and large dyed panels; keep red, teak and ochre as 1–3px threads - Put the 22px tin chok hem only on .alt section edges, price cards, the hero product frame, textile art panels, the CTA, the mobile featured card and the footer; use 8px weft pin stripes on ordinary card tops, under the nav and top bar, and above the tab bar; never put either behind body text - Keep each plain-weave line layer at or below 6% alpha (teak 5.5%, indigo 4.5%) and Thai body line-height 1.7+ (eyebrows exactly 1.7) - Use the dashed running stitch as the hand-made finish: 13px 6px 6px inside cards, 28px 7px 7px under a hem, 4px inside buttons ## Don't - Don’t use gold leaf, temple arches or Prajam Yam — that is Thai Modern Heritage - Don’t fill large areas with lozenge pattern at full contrast; it vibrates - Avoid pure white, glossy gradients and soft blurred shadows - Don’t set body text in a script or decorative Thai display face - Gold leaf, gold double hairlines, temple-arch shapes or Prajam Yam motifs (that is Thai Modern Heritage) - Terracotta-and-sand palettes with paper grain and sun/dune shapes (reads as Nature Distilled) - Large areas of high-contrast lozenge or ikat pattern behind body text — use the calm tile there - Glossy gradients, blur/glass and soft diffuse shadows - The xl 12px radius is only for the hero textile frame and the CTA panel; the pill token is unused, so never use pill buttons, chips, badges or tabs - Clip-art elephants, umbrellas or khom lanterns — the weaving is the only motif - Letter-spacing or uppercase on Thai text, and script/decorative Thai fonts for body copy - Italic Thai: set :lang(th) em, :lang(th) i { font-style: normal } — use weight or indigo colour for emphasis instead ## Stack notes One self-contained HTML file with a