/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.
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.
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.
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
- One button, one verb
- "Save changes", not "OK" or "Submit".
- Errors explain three things
- What failed, why it failed, how to fix it. Not "Oops!".
- Empty states get one action
- What is empty, why it matters, one available action.
- Links name their target
- "See pricing", not "Click here".
- Active sentences, repeated words
- Use the clear word twice rather than forcing synonyms.
- Portability test
- A sentence that moves to another product unchanged is filler. Replace with names, numbers, dates, places, or mechanisms.
- 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 /showcase15 · 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.