LamanDesain
AI GuideFont PairingColor PairingShowcaseBlogAbout
Get /llms.txtOpen /ai

Get reference update notices

One email each time /llms-full.txt changes. Nothing else.

LamanDesain

Design and copywriting reference for humans and AI agents. The HTML, concise, and full versions share one source.

REFERENCE

  • /ai, HTML version
  • /llms.txt, concise version
  • /llms-full.txt, full version

LAMANDESAIN

  • About
  • Showcase
  • Privacy Policy
  • Terms of Service
  • Contact
lamandesain@gmail.com
paper #F4EFE6ink #1C1714brick #B7410E

© 2026 LamanDesain by Hibuno

/AI · VERSI 1.1 · SEPTEMBER 2026

LamanDesain design and copywriting reference for websites, PDFs, and AI agent output

AI slop is design or writing that looks neat but generic: it could move to any brand unchanged and shows no deliberate decision.

AGENT CONTRACT

Stop before coding. Confirm output, data, viewport, and font-color pairing first.

If data is missing, ask questions. Use this URL as the working reference and pick the visual style from the brief. Never invent brands, .ai names, products, prices, metrics, testimonials, logos, or photos. For every brief, suggest different font and color pairings.

Skills, templates, and tools run the implementation. The brief plus Laman Desain rules remain the source of truth. After using them, re-audit the output before shipping.

Every visual design request produces a viewable HTML artifact. Carousels render as 1080×1080 slides, posters as artboards, PDFs as print pages. Text outlines only when the user asks for a content plan.

/llms.txt/llms-full.txtSee six example pagesSee font pairingSee color pairing

CONTENTS

  1. 01Agent flow
  2. 02Tokens
  3. 03Pairing choices
  4. 04Font pairing
  5. 05Color pairing
  6. 06Typography
  7. 07Layout
  8. 08Navigation and motion
  9. 09Viewport and assets
  10. 1012 bans
  11. 11Copywriting
  12. 12Six-axis test
  13. 13Glossary
  14. 14Example
  15. 15Catalog example

01 · AGENT FLOW

Ask first, then design. Never fill gaps with generic text.

01Clarify the output

If the user has not said what is being made, ask first. Never assume a landing page. Output can be a website, PDF, invitation, poster, pitch deck, cheatsheet, image, or another format.

02Gather data

If content facts are missing, ask. Invitations need names, date, time, venue, RSVP. Websites need brand, goal, audience, action. Never fill gaps with generic text.

03Read the reference

Read /llms.txt, then /llms-full.txt, then /ai. Lock the copy rules, 12 bans, and six-axis test before designing.

04Offer pairings

Always offer at most three different font and color pairings based on context. Never hold or pick a default pairing. Use three color roles and at most three fonts; avoid Inter, Roboto, Open Sans.

05Fix the viewport

Ask the format when unclear: website, print, or social. Size determines layout, typography, and whether hover is allowed.

06Produce per the guide

Write specific copy and produce a standalone HTML artifact rendering the visual output in the brief format. Design within the chosen pairing. Icons from Lucide, Feather, or Hugeicons via CDN. Ready-made SVG from SVGRepo. Generate images only if the agent can and the user wants them or the content needs them.

07Run the six-axis test

Philosophy, hierarchy, execution, specificity, restraint, variation. Score 1 to 5. Anything below 3 is revised before shipping.

DATA ASKED PER OUTPUT

Website / landing page

website

  • Brand name
  • Page goal
  • Audience
  • One primary action
  • Specific names, numbers, places, or mechanisms

Company profile

website · print

  • Company name
  • Location
  • Services or products
  • Founding year or proof number
  • Contact

Portfolio

website

  • Creator name
  • Field
  • Work count
  • Year range
  • How to reach them

Catalog / store

website · print

  • Store name
  • Product list
  • Prices
  • Origin or materials
  • How to order

Pitch deck / presentation

print · website

  • Company name
  • Problem
  • Solution
  • Numbers or proof
  • Offer or action

Cheatsheet / worksheet / ebook

print · website

  • Title
  • Audience
  • Required points list
  • Reading order
  • Sources if needed

Invitation

website · print · social

  • Host or couple names
  • Date
  • Time
  • Venue and address
  • How to confirm / RSVP

Poster / infographic / carousel

social · print

  • Title
  • One core message
  • Date or number
  • Source or organizer
  • Upload size

02 · PAIRING

No default colors or fonts

Every brief gets a fresh pairing from brand, audience, medium, and goal. Offer at most three options, explain each, then wait for the user's pick.

  • Color: background, surface, text, plus one contrast-tested accent.
  • Fonts: display, body, and at most one mono or complement.
  • Once picked, the pairing locks until the output ships; a new brief gets different suggestions.
  • Radius 6px, garis 1px, ink color at 16% opacity, spasi 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64

03 · PAIRING CHOICES

Offer pairings based on the brief

  • Offer at most three different color and font pairings. Never choose silently and never set a default pairing.
  • One output uses the one color and font pairing the user picked.
  • Custom stays at three color roles: paper for background, ink for text, brick for one accent at most 3%.
  • Custom stays at most three fonts: display, body, at most one mono or complement.
  • Avoid Inter, Roboto, and Open Sans unless deliberately justified.
  • After the user picks, lock that pairing until the output ships. For a new brief, suggest a different pairing.

COLOR PRESETS

Warm Paper

Invitations, editorial, company profiles

#F4EFE6 · #1C1714 · #B7410E

Night Archive

Pitch decks, portfolios, studios

#F3F1EC · #141414 · #C45C26

Sea Chalk

Reports, cheatsheets, service sites

#E7EEF2 · #1A2330 · #2F6F7E

Green Ink

Ebooks, F&B identity, catalogs

#F2F0E9 · #1B241C · #3F6B4A

Limestone

Architecture, furniture, formal invitations

#EFECE6 · #2A2622 · #8A5A44

FONT PRESETS

Classic Editorial

Invitations, magazines, company profiles

  • display Playfair Display
  • body Manrope
  • mono JetBrains Mono

Sharp Modern

SaaS, pitch decks, landing pages

  • display Fraunces
  • body Source Sans 3
  • mono IBM Plex Mono

Newspaper

Editorial, cheatsheets, reports

  • display Newsreader
  • body Figtree
  • mono Space Mono

Studio

Portfolios, identity, architecture

  • display Cormorant Garamond
  • body Outfit
  • mono IBM Plex Mono

Workbook

Worksheets, ebooks, proposals

  • display Literata
  • body Source Serif 4
  • mono IBM Plex Mono

04 · FONT PAIRING

Pick font roles, then pick the pairing

This pairing reference is distilled from Fontpair. Use it to offer choices to the user, then test with real brief copy.

Open the font pairing collection →

Epilogue + Baskervville

Modern sans + editorial serif. Cocok untuk websites, company profiles.

Work Sans + Bitter

Humanist sans + slab serif. Cocok untuk websites, pitch decks.

Montserrat + DM Serif Display

Geometric + display serif. Cocok untuk landing pages, posters.

Archivo + IBM Plex Mono

Utilitarian sans + mono. Cocok untuk dashboards, cheatsheets.

EB Garamond + DM Mono

Classic serif + mono. Cocok untuk invitations, editorial.

Newsreader + Figtree

News serif + warm sans. Cocok untuk reports, ebooks.

Fraunces + Source Sans 3

Expressive serif + neutral sans. Cocok untuk branding, presentations.

Cormorant Garamond + Outfit

Elegant serif + geometric sans. Cocok untuk portfolios, architecture.

Zain + Nunito

Soft display + friendly sans. Cocok untuk invitations, education.

Unbounded + Albert Sans

Experimental display + sans. Cocok untuk technology, events.

Special Gothic Condensed One + Special Gothic

Condensed display + sans. Cocok untuk posters, social media.

SUSE Mono + SUSE

Mono + sans from one family. Cocok untuk digital products, documentation.

Young Serif + Manrope

Contemporary serif + sans. Cocok untuk catalogs, company profiles.

Metal + EB Garamond

Character display + serif. Cocok untuk posters, editorial.

05 · COLOR PAIRING

Pick colors by role, contrast, and context

This palette reference is distilled from Color Hunt. Offer choices to the user, check contrast, then lock the palette once confirmed.

Open the color pairing collection →

Navy Paper

calm, editorial, trustworthy. Cocok untuk company profiles, reports.

#F9F7F7 · #DBE2EF · #3F72AF · #112D4E

Warm Studio

warm, material, classy. Cocok untuk architecture, furniture.

#F8F0E5 · #EADBC8 · #9F8772 · #0F2C59

Soft Orchard

soft, personal, light. Cocok untuk invitations, lifestyle.

#F9F7F7 · #F2D7D9 · #D3CEDF · #9BABB8

Forest Field

natural, calm, organic. Cocok untuk wellness, food, education.

#F5F5F0 · #DDE6D5 · #8FA889 · #344E41

Ink and Lemon

bold, optimistic, high-contrast. Cocok untuk posters, pitch decks.

#FFFDF2 · #F7E987 · #F2C14E · #1B1B1B

Clay Archive

archival, tactile, nostalgic. Cocok untuk editorial, catalogs.

#F4EFE6 · #E6C9A8 · #C77B58 · #3D2B1F

Ocean Signal

fresh, clear, digital. Cocok untuk digital products, dashboards.

#F6FBFC · #B9E3E8 · #4BA3A8 · #155E63

Night Bloom

nocturnal, expressive, dramatic. Cocok untuk events, music, fashion.

#1E1E2F · #3B3B58 · #6D597A · #EAAC8B

Peach Concrete

friendly, active, contemporary. Cocok untuk products, social media.

#FFF4E6 · #FFD8BE · #FF9B71 · #3D405B

Redacted

direct, editorial, bold. Cocok untuk campaigns, public information.

#F5F5F5 · #D9D9D9 · #6B6B6B · #C1121F

Lilac Signal

imaginative, modern, focused. Cocok untuk technology, illustration.

#F7F2FA · #E3D7F1 · #9B72CF · #352F44

Citrus Cream

cheerful, warm, familiar. Cocok untuk cafes, invitations, events.

#FFFBEA · #F9E79F · #F4B942 · #4A3F35

06 · TYPOGRAPHY

Ten type rules

01At most three font families: one display, one body, at most one complement.

02Display stays roman. Italic only for emphasis in body text.

03Heading and body weights must look different.

04Type scale 1.25. At most five sizes per page.

05Display never above 5.5rem.

06Headings over 90 characters get shortened. Headings over 50 characters get downsized.

07Body text minimum 16px with 1.5 to 1.65 line height.

08Measure 45 to 75 characters.

09Avoid Inter, Roboto, and Open Sans unless deliberately justified.

10No all-caps paragraphs and no gradient text.

07 · LAYOUT

One primary axis, deliberate asymmetry

01Pick one primary axis: left, right, top, or bottom.

02Asymmetry is a deliberate design decision, not an accident.

03Break the grid at least once when context allows.

04Mix small, medium, and large spacing values.

05CSS Grid for page structure. Flexbox inside components.

06Prevent horizontal overflow with overflow-x: clip.

07Responsive tested at 320, 375, 414, and 768 pixels wide.

08 · NAVIGATION, FOOTER, MOTION

Navigation patterns and motion rules

NAVIGATION AND FOOTER

  • Editorial masthead: small meta row on top, large wordmark, numbered index.
  • Brutalist slab: ink-colored block with large links.
  • Genre-native navigation: contents for documents, project index for portfolios, price menu for stalls.
  • Footer as a short colophon: name, address, three links, fonts used.

MOTION AND INTERACTION

  • One deliberate entrance animation, not animation on every section.
  • At most three micro-interactions per page.
  • Transition only specific properties: opacity, transform, background-color. No transition-all.
  • Duration 300 to 900 milliseconds with ease-out curve.
  • Respect prefers-reduced-motion.

09 · VIEWPORT AND ASSETS

Fix sizes first, then pick icons, SVG, and images

website

Test at 1440, 768, and 375 pixels. Overflow-x: clip. Hover allowed, but key information stays visible without hover.

print

A4 210×297 mm, A5 148×210 mm, or Letter 8.5×11 in. Margins 12 to 16 mm. No hover. Mind page breaks.

social

1080×1080 feed, 1080×1350 portrait, 1080×1920 story, 1200×630 link. One message per frame. Large type, 80px safe zone.

  • Ask the format when unclear. Never assume a website.
  • One output, one primary format. Never mix website hover rules into print.
  • Text must stay readable without hover, animation, or excess zoom.

CDN ICONS

Lucide

Thin strokes, suits UI and websites.

https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/{nama}.svg

Feather

Classic 24px set, suits simple print.

https://cdn.jsdelivr.net/npm/feather-icons/dist/icons/{nama}.svg

Hugeicons

Wide set, suits more specific icon needs.

https://api.iconify.design/hugeicons/{nama}.svg

READY-MADE SVG

  • Primary source: https://www.svgrepo.com
  • Download the SVG, embed inline, swap fill or stroke to the ink or brick token.
  • Use SVG for marks, patterns, or finished illustrations. Not as random decoration.

IMAGES AND ILLUSTRATIONS

  • Ask first when image needs are unclear.
  • Generate only when the agent has image capability and the output needs it: heroes, illustrations, mockups, or visuals icons cannot carry.
  • Subjects must be specific to the brief, not generic stock.
  • Alt text names the image content, not 'AI image'.
  • One icon family per output. Never mix Lucide, Feather, and Hugeicons.
  • Icons from CDN, embedded as inline SVG, colored with the ink or brick currentColor token.
  • Emoji are not icons. Generic icon tiles are still banned.
  • Ready-made SVG comes from SVGRepo, recolored to tokens. Avoid cartoon clipart, 3D blobs, and auroras.
  • Generate images or illustrations only if the agent can AND the user wants them or the content needs them. When in doubt, ask.
  • Never invent photos of people, brand logos, metrics, or testimonials.

10 · BANS

Twelve rejected patterns and their replacements

01Purple-blue hero gradient backgrounds

Replace: Solid colors and typography.

02Gradient headline text

Replace: One weight, one color, real contrast.

03Aurora blobs or floating 3D spheres

Replace: Strong composition and deliberate whitespace.

04Decorative glassmorphism

Replace: Thin rules, weight, and scale.

05Three identical feature cards

Replace: Asymmetry. Break the grid at least once.

06Generic icon tiles or emoji as icons

Replace: Words, numbers, or no icon.

07All-centered layout with a one-screen one-line hero

Replace: One primary axis: left, right, top, or bottom.

08Generic AI navigation: wordmark, five links, one CTA

Replace: Editorial masthead, brutalist slab, genre-native navigation.

09Four-column footer with social icon rows

Replace: Short colophon.

10Fake browser, phone, or code-window frames

Replace: Real screenshots in a plain figure.

11Invented metrics, testimonials, or logos

Replace: Real proof, honest placeholders, or no proof section.

12transition-all, hover-scale on every card, fade-up on every section

Replace: One deliberate entrance animation.

11 · COPYWRITING

Replace abstraction with facts, mechanisms, names, dates, and numbers.

AVOID

Revolutionize your wedding with our seamless experience.

USE

Ceremony 08.00, reception 11.00 to 13.00. 200 seats, indoor parking.

SEVEN PRINCIPLES

1
One button, one verb
"Save changes", not "OK" or "Submit".
2
Errors explain three things
What failed, why it failed, how to fix it. Not "Oops!".
3
Empty states get one action
What is empty, why it matters, one available action.
4
Links name their target
"See pricing", not "Click here".
5
Active sentences, repeated words
Use the clear word twice rather than forcing synonyms.
6
Portability test
A sentence that moves to another product unchanged is filler. Replace with names, numbers, dates, places, or mechanisms.
7
Show, don't label
Delete "important", "surprising", "clear". Let the facts prove it.

REMOVED PATTERNS

Binary contrast
State the main point directly without an X-versus-Y contrast pattern.
Throat-clearing
Delete openers like "Here's the thing," "to be honest," and "what you need to know." Start with the key information.
False insight
Delete claims like "what's often missed" and "what nobody tells you." Name the fact or mechanism.
Dramatic colon
Write cause-and-effect as a plain sentence, no reveal after the colon.
Dangling -ing claims
"highlighting," "showcasing." Replace with the real consequence.
Puffery
"key moment," "proof of commitment." State just the facts.
Vague attribution
"experts agree," "studies show." Name the source or delete.
Negative lists
State the chosen option or action without a string of rejections.
Poetic closing line
Delete it. End on the last concrete sentence.
Excess formatting
Emoji in headings, random bold, bullets for ordinary prose.

24 BANNED WORDS

delvefosterleverageutilizefacilitateempowerstreamlinerobustcutting-edgeparadigm shiftgame changertapestryrealmbeaconmultifacetedmeticulousintricateparamounttransformativeelevateembarksuperchargeharnessever-evolving

BANNED OPENERS

  • “Built for the modern team”
  • “Unleash your X”
  • “Where X meets Y”
  • “Reimagine the way you...”
  • “Supercharge your workflow”
  • “Innovative solutions”
  • “Seamless integration”
  • “In today's digital landscape”
  • “Next-generation”
  • “Revolutionize Your Workflow with AI”
  • “Innovative solutions for your business”
  • “Make your dreams come true with us”

WHAT MAKES COPY SPECIFIC

Brand names, People names, Dates, Times, Locations, Counts, Prices, Product mechanisms, Audience details, One primary action.

APPLIES TO

Headings, Buttons, Labels, Error messages, Empty states, Helper text, Nav links, Form actions, Status messages, Confirmation messages.

12 · SELF-TEST

Six axes, score 1 to 5, below 3 gets revised

1 / 6

Philosophy

A recognizable idea? Is the page recognizable without the brand name?

2 / 6

Hierarchy

Do type and spacing guide the eye without decoration?

3 / 6

Execution

Tokens locked? Contrast sufficient? Layout works on phone and desktop?

4 / 6

Specificity

Does the copy use names, numbers, places, and mechanisms?

5 / 6

Restraint

Accent under 3%? At most three fonts? At most three micro-interactions?

6 / 6

Variation

Does the structure avoid the hero, three features, CTA, footer pattern?

Score 1 to 5 per axis. Below 3 on any axis means revise before shipping.

13 · GLOSSARY

Terms used in this reference

AI slop
Neat but generic design or writing that moves to another brand unchanged.
Token
Named design values: colors, fonts, radius, spacing.
Masthead
Print-style page head: meta row, wordmark, index.
Colophon
Short note at the page end: name, contact, fonts used.
Hairline
1px rule at low opacity.
Portability test
Check whether a sentence moves to another product unchanged. If it does, it is filler.
1.25 scale
Each type size 1.25× the previous: 16, 20, 25, 31, 39.
Output
The form the user asked for: website, PDF, invitation, poster, and kin. Never guess when unstated.
Pairing choice
Context-matched color and font pairing. No default pairing; the user picks one of at most three options.
Viewport
Output size and context: website, print, or social.
Assets
CDN icons, ready-made SVG, and images generated only when needed.

14 · SHOWCASE EXAMPLE

Aura Architecture Studio

SHOWCASE DATA

TYPE
company profile
TOPIC
studio arsitektur
AGENT
Google Gemini · Gemini 3.6 Flash

ORIGINAL PROMPT

Buat website mengenai website company profile tentang studio arsitektur, dengan panduan visual, copywriting, dan HTML/CSS desain untuk AI Agen berdasarkan lamandesain.com/ai

Open this page in /showcase

15 · CATALOG EXAMPLE

Catalogs don't start from a generic hero

BRIEF

“Make a catalog website for Toko Batik Laras, hand-drawn and stamped batik from Pekalongan and Solo. Show 24 motifs, prices Rp185,000 to Rp2,400,000, shipping across Indonesia, orders via WhatsApp.”

REQUIRED DECISIONS

  • Color and font pairing picked after the catalog context is confirmed; no default pairing.
  • Masthead uses store name, origin cities, and a Collection index; not Home, Our Story, Reviews navigation.
  • Every product shows motif name, technique, origin, and price.
  • One primary action: order via WhatsApp. No checkout, cart, or invented testimonials.
  • Asymmetric product grid with right-aligned prices in JetBrains Mono; no generic promo hero.

REJECTED PATTERNS

Generic fashion catalog with a Natural Elegance headline, season badges, three feature cards, search/cart, and an Explore the Collection CTA.