Design System
Component inventory for the Binary Code Barn website migration. binarycodebarn.com
1. Design Tokens
1b. Colour Accessibility
WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text and non-text UI (focus rings, borders). The table below audits every in-use combination so failures are visible before touching components.
Resolved: all brand-green text now uses text-primary-text (#4a5c0a, 6.8:1 on background, 6.3:1 on primary-subtle). The raw primary and primary-hover tokens are reserved for decorative fills (dots, borders, backgrounds) — never for text.
2. Typography
All variants come from textVariants() in @/lib/text. Usage: <h2 className={textVariants({ variant: "h2" })}>…</h2>
eyebrow · service overview
h1 · We build digital products that perform.
lead · Senior engineers embedded in your team. A product engineering studio backed by a decade of delivery.
h2 · Section heading with border
h3 · Sub-section heading
p. Body paragraph. Senior engineers embedded in your team, from strategy through launch. One team accountable for the outcome.
- ul item one. Web Applications
- ul item two. SaaS Products
- ul item three. Hybrid Mobile Apps
meta
22 April 2026 · Last updated
quote
“Obsessed with structure. Great software is both beautiful and maintainable.”
byline
Adeel Imran. Founder, Binary Code Barn.card-title (size at call-site)
card-title · default size
card-title · text-2xl
card-title · text-3xl
card-body
A short body paragraph used in card layouts. Sits below the card title and above the call to action.
stat-value + stat-label
4. Badges & Tags
5. Inputs & Forms
This field is required
6. Cards
Default Card
Neutral surface, subtle border, light shadow.
Elevated Card
No border, deeper shadow for prominence.
7. Service Cards
Mobile App Design
Sample card copy. Two short sentences showing how the component wraps body text and an optional icon.
Web Development
Sample card copy. Used to verify icon, title, and body stack correctly at narrow widths.
Cloud Computing
Sample card copy. Kept short so the visual rhythm is the same across all three cards in the grid.
Web Applications
One-line description showing the index, title, and body alignment in list form.
SaaS Products
One-line description. The separator and hover affordance come from the component.
Hybrid Mobile Apps
One-line description. Useful for verifying truncation behavior on narrow screens.
Staff Augmentation
One-line description. The last row omits the bottom border.
8. Stat Counter
10+
Years of Experience
20+
Products Shipped
24h
First Deliverable
100%
On-Time Delivery
10+
Years of Experience
20+
Products Shipped
24h
First Deliverable
100%
On-Time Delivery
Written Scope
Every project starts with a signed document. No verbal agreements.
Fixed Price
The number we quote is the number you pay. No hidden line items.
Weekly Updates
You get a written summary every Friday. No chasing for status.
You Own It
Full IP transfer on delivery. Code, design, and credentials are yours.
Avatar
9. Testimonial
“Placeholder testimonial copy. Two short sentences are usually enough. The component renders the quote, name, and rating.”
“Placeholder testimonial copy. Kept neutral so the visual rhythm of the card is easy to verify across widths.”
10. Blog Post Card
Placeholder blog title that runs to about two lines
Placeholder excerpt. Two sentences are typical. Long enough to show wrapping, short enough to keep the grid tidy.
Read the post →Another placeholder title for the second card in the grid
Placeholder excerpt. Used to verify that two different titles align on the same baseline at the same width.
Read the post →11. Section Header
A placeholder title with one accent word
Placeholder description. One sentence, used to verify eyebrow, title, and description alignment.
Another placeholder title with a different accent word
Placeholder description. Same component, left-aligned variant, used to compare against the centred version above.
15. Tech Stack Grid
17. FAQ Accordion
Is the fixed price actually fixed?
Yes. The number on the scope document is the number on the invoice. We estimate carefully before signing.
Who actually writes the code?
Adeel Imran. Ten years of senior engineering across four industries, including a 350B pharma client. I write the code. The person you speak to and the person who ships are the same.
What happens after handover?
You own the code. It is yours to run, modify, or hand to another team. A retainer is available but never mandatory.
Component Build Checklist
All components shipped in this design system:
components/ui/button.tsx
primary, dark, outline, ghost, sizes
components/ui/badge.tsx
primary, dark, outline, eyebrow
components/ui/input.tsx
label, error state
components/ui/textarea.tsx
label, error state
components/ui/select.tsx
label, options
components/ui/card.tsx
default, elevated, padding scale
components/ui/section-header.tsx
center, left, eyebrow, title, description
components/ui/service-card.tsx
icon, title, description
components/ui/service-list-item.tsx
icon, title, arrow
components/ui/stat-item.tsx
value, label, className
components/ui/testimonial-card.tsx
stars, quote, avatar
components/ui/blog-post-card.tsx
image, category, date
components/ui/faq-accordion.tsx
question/answer accordion, open-first
components/ui/mode-toggle.tsx
light/dark theme toggle
components/ui/popover.tsx
floating popover primitive
components/ui/cover-image/
cover-image + attribution
components/layout/navbar.tsx
theme-aware (CSS tokens), mobile drawer
components/layout/footer.tsx
multi-column with social links
components/logo.tsx
BCB logo mark
components/blur-bottom.tsx
gradient blur overlay
components/cal-booking.tsx
Cal.com embed
components/theme-provider.tsx
next-themes provider
components/blog/post-body.tsx
markdown renderer
components/blog/blog-card-art.tsx
decorative card art
components/sections/Hero
dark bg, illustration slot, dual CTA — inline in page.tsx
components/sections/CTABanner
dark, green accent — inline in page.tsx
components/sections/TechStackGrid
icon grid with labels — inline in page.tsx
components/common/CookieBanner
GDPR bottom-bar — inline in page.tsx