Design Gallery
Good UI, in a reproducible form.
UI designs from First CH's production work, stocked with source code and an AI Script. Copy one straight into your next project.
10 designs / 4 categories
Elements5
FAQ Accordion
A question-and-answer disclosure list built on native <details> — no JavaScript. The plus mark rotates 45° into a cross when open.
Status Badge
Badges for showing state in dashboards and lists — soft tinted background plus a dot, in four states.
Standard Buttons
The three baseline buttons for white-background sites: primary (amber), secondary (outlined), and text — three levels of emphasis.
Feature Card
A link card for service or feature lists: heading, description, and an arrow link. On hover an amber rule grows across the top and the card lifts slightly.
Text Field
The baseline form input for contact forms — normal and error states, with label, helper text, and error message.
Typography1
Blocks3
CTA Banner
A call-to-action block for the bottom of a page: soft amber gradient panel with eyebrow, heading, and two buttons. A section-level specimen, not a component.
Pricing Plans
A three-tier pricing block. Only the recommended middle plan gets an amber border, ring, and filled button — for LPs and service pages.
Process Steps
Numbered process steps for content where order matters, like a production flow. Circled numbers connected by a hairline, laid out horizontally on desktop.