A cleaner, simpler redesign of fdacs.gov built as a static site with a standard U.S. government visual theme. Six pages, no framework, no build step, no dependencies.
▶ Live demo: https://nicholasoglo.github.io/fdacs-clone/
Important
This is a demonstration project, not a government website. It is not affiliated with, endorsed by, or connected to the State of Florida or the Florida Department of Agriculture and Consumer Services. Every form is inert, no data is collected or transmitted, and all names, figures, records, and phone numbers are illustrative. A persistent banner says so on every page. Do not enter real personal information anywhere in this site.
The real FDACS site carries an enormous amount of content — dozens of top-level entry points, deeply nested navigation, and several competing visual styles layered up over the years. This project keeps the same information architecture but reduces it to what a visitor actually arrives to do.
What changed:
| Original | This version | |
|---|---|---|
| Primary navigation | Many entry points, nested dropdowns | 6 flat top-level items |
| Visual language | Several styles layered over time | One token-driven system |
| Top tasks | Scattered across the page | 4 tiles above the fold |
| Typography | Mixed | Serif headings, sans UI, one scale |
| Page weight | Heavy, script-dependent | ~30 KB HTML + 16 KB CSS + 2 KB JS |
| Dependencies | Multiple | Zero |
The theme follows the conventions Americans already recognize from federal sites — the official site banner, the navy/blue/white palette, the identifier footer — drawing on USWDS patterns without pulling in the framework.
Top services — the four things people come here to do, above the fold.
Browse by topic — six subject areas covering the department's full remit.
Newsroom with an alert sidebar and helpline callout.
Fresh From Florida section.
A four-step progress indicator, grouped fieldsets, and inline hint text.
Accordion FAQ explaining what happens after filing.
Service tiles for licensing and registration tasks.
Fee schedule with status badges.
Downloadable forms library.
Business and license search with sample results.
Florida Do Not Call registration.
Current scam alerts.
A–Z resource guide with a letter jump nav.
Mission statement with an at-a-glance sidebar.
Leadership shown by role. No real officials are named anywhere in this project.
All nineteen divisions and offices.
Contact methods with a "who handles what" sidebar for misrouted complaints.
Regional office table.
Three breakpoints: 390 px (mobile), 834 px (tablet), 1440 px (desktop).
 |
 |
 |
Tablet.
 Home |
 File a Complaint |
 Pay & Register |
 Consumer Resources |
 Our Department |
 Contact |
Everything is driven by custom properties in one stylesheet — change a token, change the site.
| Token | Value | Used for |
|---|---|---|
--c-navy |
#162e51 |
Header nav, hero, footer, headings |
--c-navy-dark |
#0d1f38 |
Utility bar |
--c-blue |
#005ea2 |
Links, primary buttons, active states |
--c-blue-dark |
#1a4480 |
Hover states, stat band |
--c-blue-faint |
#eff6fb |
Icon wells, tinted sections |
--c-green |
#2e6b40 |
Agriculture accents, division cards |
--c-orange |
#c05600 |
Calls to action, alerts, Fresh From Florida |
--c-gold |
#ffbe2e |
Focus rings, active nav underline |
--c-red |
#b50909 |
Required-field markers, banner flag |
Serif for the wordmark and page titles, sans for everything else. System-font fallbacks throughout, so the site loads with zero network requests for fonts.
--font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
--font-serif: "Merriweather", Georgia, "Times New Roman", serif;Official site banner with a "Here's how you know" disclosure · utility bar · brand bar with search · primary nav with a mobile drawer · hero (home and interior variants) · breadcrumbs · stat band · service tiles · topic link cards · division cards · news list · alerts in four tones · badges · progress steps · fieldset forms · data tables · accordions · sidebar layout · A–Z index · multi-column footer with an identifier bar.
- Semantic landmarks throughout (
header,nav,main,aside,footer) - Skip link to main content on every page
- Visible focus rings at 3 px in a high-contrast gold, never suppressed
aria-current="page"on the active nav itemaria-expanded/aria-controlswired to the banner disclosure, mobile nav, and accordions- Every form control has a real
<label>; hints are associated, not placeholder-only - Tables use
<caption>and scoped<th> - Body text meets WCAG AA contrast against its background
- Works with JavaScript disabled — JS only enhances disclosures and stubs the demo forms
- A print stylesheet drops navigation and chrome
fdacs-clone/
├── index.html # Home
├── file-a-complaint.html # Complaint form, steps, FAQ accordion
├── pay-register.html # Licensing, fee schedule, forms library
├── consumer-resources.html # Business search, Do Not Call, scams, A–Z
├── our-department.html # Mission, leadership, 19 divisions
├── contact.html # Contact methods, regional offices
├── assets/
│ ├── css/styles.css # Entire design system, ~16 KB
│ ├── js/site.js # Disclosures, mobile nav, demo form handling
│ └── img/
│ ├── seal.svg # Original emblem — not the Florida state seal
│ └── favicon.svg
└── docs/screenshots/ # The 30 images used above
The emblem in assets/img/seal.svg is original artwork drawn for this project. It deliberately
does not reproduce the official seal of the State of Florida or of the department.
No build step and no dependencies — open index.html directly, or serve the folder:
python3 -m http.server 8000Then visit http://localhost:8000.
Any static host works. To publish with GitHub Pages, enable Pages on the main branch at the
repository root.
MIT — do what you like with the code.
The design is offered as a reference implementation. If you adapt it, please keep it clearly distinguishable from any real government website.