Iron Men Properties · Glass × Clay world · v2 — dual theme
Style & UI guide
The complete atomic vocabulary for the rebuild: gradient-lifted green on fills, glass in two strengths, five radii, and every element a site or web app build reaches for. Toggle the theme — every recipe resolves through semantic tokens in both modes.
Colors
Semantic tokens flip with the theme. Accent text is green-hot on dark and green-deep on light — vivid green never carries text on light grounds.
Gradients
Green lives as light across a surface, not a flat chip: three sanctioned ramps, applied to fills only — never to text (emphasis comes from weight and size).
The glass material
Blur 20px, 1px line, hard bevel edge (lit top, dark bottom, no blur). No drop shadows anywhere — foreground separates from ground by tonal step (bg → bg-2 → bg-3), the hairline, and the bevel. Standard on quiet grounds; strong is the legibility floor over photography.
Typography
Body 18 — Developing and operating multi-family housing for God's glory, built with Indiana cities and owned for good.
Radii
Five radii from canvas to control; sub-controls sit on --r-chip. The only circles in the system are people, dials and motion — avatars, the radio, the spinner, the play button. Everything else is square-cornered.
Textures
Hero Patterns (MIT) applied as masks — one black SVG per pattern in /tex, ink and alpha from tokens, so every texture resolves in both themes. Grounds only: a section band, a footer, a track, a placeholder. Never on glass, never on photography, never more than one per section. Ships at 6% (dark) / 7% (light); faint 3.5%; strong 12%; white ink at 7% on green fields. The page itself is a drawing sheet: body.tex.tex-sheet lays graph paper at 120px cells and 2–2.5% under every plain ground, so large stretches of --bg never sit empty; bg-2 panels and cards stay flat and read as plates on the sheet. Swatches below are shown at 14% so the pattern reads.
Icons
One stroke family, 1.9px, square caps and mitred joins — drawn, not rounded. Icon plates carry the corner ticks.
Motion
The focal move is condensation — glass arrives by focusing from blur, once, on entry. Everything else is feedback: ≤250ms state changes, moving light on green fills, exits faster than entrances. Reduced-motion renders everything settled.
ENERGY STAR at Anvil 38
Request plan set?
Buttons & links
Primary carries grad-green between a lit top edge and a dark bottom edge — a pressed plate, not a floating pill; hover brightens and lifts. Danger is reserved for destructive confirmation. Status badges are permit stamps: 1.5px outline in the status colour with a square legend swatch; a dashed stamp means proposed / not yet built. Chips and search are square-cornered controls, never pills. States: disabled is recessed and dashed (not yet built), busy keeps its width and shows the work; focus is an accent ring everywhere (ink on green fills). One selected recipe — bg-2 with an inset accent set-line — for chips, pager, tabs and subnav, so green means only command. Live stamps are solid, in-construction is hatched, proposed is hollow and dashed: status by shape, not colour. Stamps mark construction status only — availability (“on request”) is an action, revisions are metadata; neither wears a stamp.
Inline: read the ENERGY STAR announcement.
Badges, chips & tags
Forms
Navigation
Stats & progress
Pucks carry a gradient hairline crown and sheet-corner registration ticks; numerals are tabular and stay solid accent-text (no gradient text, ever). Plates run a dashed leader line from name to location and wrap long names. Figures carry a provenance line (as of · source) so a lender can trust the number. Tracks are recessed (dark top edge — cut into the surface) with graduations every 25%.
developments across Indiana
ownership retained, always
record Carroll County investment
As of 2024 · source: project fact sheet
Cards
Image card (plate overlay), content card, horizontal card, quote card, team card. All on panel radius, one surface step above the ground, with the bevel edge — no drop shadows. The content card closes with a title block: a hairline-divided row of facts (place · units · year), data only.
The Interurban
68 new homes — the first residential development in Delphi in decades.
View project
451 Lebanon
Lebanon, Ind.Downtown revitalization, still operated by Iron Men.
“We couldn't ask for a better citizen, a better corporate partner.”Tony RoswarskiMayor of Lafayette
Galleries
Uniform grid for project galleries; masonry for the sitewide gallery; carousel with controls for featured strips. Tiles zoom on hover; lightbox opens on click in the build.
Features
Two grammars: accent-crowned tiles for triads, ledger rows for longer lists. Icons from the house set only.
Develop
Site identification and capital stacks in partnership with local government.
Construct
Modern design with quality workmanship and materials.
Own & operate
100% ownership retained; managed and maintained by us, for good.
Direct partnership
We work with mayors and county officials from first site walk to ribbon cutting — one team, no handoffs.
Operated locally
Every property keeps a local management presence after opening; residents call people, not portals.
Lists, rows & tables
| Location | Stage | Plan set | |
|---|---|---|---|
| The Interurban | Delphi, Indiana | Completed | |
| Anvil 38 | Lafayette, Indiana | Completed |
- Units
- 68
- Investment
- $12.5M
- Partners
- Carroll County · City of Delphi · State of Indiana
Tabs, accordion & steps
Who can access the planroom?
Do you sell your properties?
Site & partnership
City partnership formed, site secured.
Construction
Built by our own team, on our own balance sheet.
- 3
Operate forever
Leasing, maintenance, and community — held for good.
Overlays
Modal for confirmations; menu for dropdowns; tooltip for terms; toast for async results. All glass-strong so content behind never fights the message.
Feedback & states
No projects match
Try clearing the location filter.
Media
Map embed · Delphi, Ind.
Wayfinding & routing
The navigation furniture detail pages need: skip link (first tab stop), sticky project subnav, prev/next travel, the audience router, and the gallery lightbox.
The Interurban · 3 of 14
Prose
The rich-text vocabulary CMS content renders into — 68ch measure, tinted blockquotes with attribution, green list markers, panel-radius figures, and the callout. No other article styling exists.
Certified, verified, operated
Anvil 38’s ENERGY STAR score of 96 places it in the top 4 percent of comparable buildings nationwide — verified performance, not projection.
- Weather-normalized source energy use
- Actual performance over twelve months
“From the boiler room to the board room, organizations are leading the way.”
Section patterns
Uplifting communities one apartment at a time.
Your city could be next.
Stay in the loop
Groundbreakings and grand openings, a few times a year.
Uplifting communities by developing and operating multi-family housing for God's glory.
Tokens
Semantic first: components reference these names, never raw values. Light mode redefines the same names.
bg #101110→#F1F1ED bg-2 #1B1D19→#FFF bg-3 #25271F→#E7E8E2 fg #F3F4F0→#161710
accent #6ABF4B (both) · accent-text #8FDD6E→#2F6519 · on-accent #0B2003
grad-green 160° #8FDD6E→#6ABF4B→#519E35 (light: #7ECF5C→#63B845→#4C9A31) — fills only
grad-green-deep (bands) · grad-tint (hovers, badge fills)
glass .45→.55 white · glass-strong .62→.80 white · line 26%→20% · edge = inset lit top 1.5px + inset dark bottom 1.5px (no blur)
radii 1.0/0.75/0.6/0.5/0.4 · NO drop shadows — separation by surface step + line + bevel edge · details: corner ticks on pucks/plates/icon plates · recess (inset dark top) on anything cut into the surface (inputs, toggles, tracks) · stamp badges (1.5px outline, square swatch, dashed = proposed) · dashed leader lines on plates · title-block card footers · 25% graduations · square-cap icons · textures: Hero Patterns as masks (/tex/*.svg) — --tex-ink / --tex-alpha, grounds only, one per section · page ground = body.tex.tex-sheet (graph paper 120px @ 2–2.5%) · chips/stamps/steps/menus on --r-chip 0.25 · focus = accent ring everywhere (ink on green) · selected = bg-2 + inset accent set-line · disabled = recessed + dashed · busy = in-place spinner · document row = type plate · name · size/rev/date · stamp · action · icons 1.9px stroke round\nmotion: ease cubic-bezier(.16,1,.3,1) · 150ms feedback / 250ms state / 400ms overlay / 600ms condense\ncondense = opacity+rise+blur→0, entrance only, once · stagger caps at 4 siblings ≤270ms\nreduced-motion: entrances settled, feedback instant, loops stopped
rules: gradient on fills never text · vivid green never text-on-light · glass-strong over photos