NDS UI Style

Generates UI in the style of National Design Studio - the team behind realfood.gov, trumprx.gov, and americabydesign.gov.

Typography

• Headlines: Instrument Serif (or Playfair Display, DM Serif), scale 4xl-8xl

• Body: Inter or system-ui sans-serif

• Labels: Monospace uppercase, tracking-widest

// Next.js font setup import { Instrument_Serif, Inter } from 'next/font/google'

const serif = Instrument_Serif({ weight: '400', subsets: ['latin'], variable: '--font-serif' }) const sans = Inter({ subsets: ['latin'], variable: '--font-sans' })

Color Palettes

Light theme (realfood.gov):

--background: #F3F0D6; /* warm beige */ --foreground: #1a1a1a; --muted: #e8e5d0;

Dark theme (trumprx.gov):

--background: #0a0a0a; --foreground: #ffffff; --accent: #f5f5dc; /* warm cream */

Layout Principles

• Heroes: h-screen , centered content, bg-black/30 overlay on images

• Max width: max-w-7xl (1280px)

• Whitespace: px-6 mobile, px-12+ desktop

• Sections: py-20 md:py-32 , alternating backgrounds

Core Patterns

Hero Section:

<section className="relative h-screen flex items-center justify-center"> <div className="absolute inset-0 bg-black/30" /> <Image src="..." fill className="object-cover -z-10" /> <div className="relative z-10 text-center text-white max-w-4xl px-6"> <h1 className="font-serif text-5xl md:text-7xl">Headline</h1> <p className="mt-6 text-xl md:text-2xl">Subheadline</p> </div> </section>

Statistics: Large serif numbers + monospace uppercase labels

Buttons: bg-white text-black px-8 py-4 hover:bg-gray-100 transition-colors

Navigation: Transparent over hero, logo left, minimal links right

Tailwind Config

extend: { colors: { 'warm-cream': '#F3F0D6', 'warm-beige': '#e8e5d0' }, fontFamily: { serif: ['var(--font-serif)', 'Georgia', 'serif'], sans: ['var(--font-sans)', 'system-ui', 'sans-serif'], }, }

Visual Style

• Photography over illustrations

• Semi-transparent overlays for text legibility

• Minimal ornamentation

• Alternating section backgrounds (cream/white/dark)

Reference

• Components: See reference/components.md for full component examples

• Sites: realfood.gov, trumprx.gov, americabydesign.gov, ndstudio.gov