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

tsx
1// Next.js font setup
2import { Instrument_Serif, Inter } from 'next/font/google'
3
4const serif = Instrument_Serif({ weight: '400', subsets: ['latin'], variable: '--font-serif' })
5const sans = Inter({ subsets: ['latin'], variable: '--font-sans' })

Color Palettes

Light theme (realfood.gov):

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

Dark theme (trumprx.gov):

css
1--background: #0a0a0a;
2--foreground: #ffffff;
3--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:

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

js
1extend: {
2  colors: { 'warm-cream': '#F3F0D6', 'warm-beige': '#e8e5d0' },
3  fontFamily: {
4    serif: ['var(--font-serif)', 'Georgia', 'serif'],
5    sans: ['var(--font-sans)', 'system-ui', 'sans-serif'],
6  },
7}

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