--- version: alpha name: meridian-design description: "A near-black charcoal canvas (#17181a) with concrete-white ink (#ecebe8), a single blueprint cyan (#57c2d9) standing for drawing and process, and a warm stone taupe (#a9977c) standing for finished material. Syne carries every heading at weight 700, set in uppercase for the wordmark; Inter carries the surrounding prose. The system reads as a working drawing set pinned to a studio wall, not a glossy render portfolio." --- ## Brand Positioning Meridian & Co. is for clients who want to see the actual construction logic, not a hero render designed to sell a mood. It exists because most architecture-firm sites borrow real-estate-marketing chrome (moody lifestyle photography, a slow Ken Burns pan, testimonial carousels) that has nothing to do with how a building actually gets designed and built, layer by layer, from a line drawing to a finished elevation. Meridian's bet: the one piece of drama on the page should be that literal process, a blueprint resolving into its built form as you scroll. Every visual decision below serves that one bet. If a component doesn't help someone understand a project's status or start one, or doesn't come from a real practice interaction (project table, status, intake form), it doesn't belong in this system. colors: accent: "#57c2d9" accent-alt: "#a9977c" ink: "#ecebe8" ink-muted: "#9a9d9f" canvas: "#17181a" surface: "#1e2022" surface-raised: "#26292c" border: "#34383c" focus-ring: "#57c2d9" ## Logo / Wordmark System The mark is a rounded-square card containing a small gable elevation, half rendered as a cyan blueprint outline, half filled in warm stone taupe, literally the homepage's blueprint-to-render mechanic frozen at its midpoint. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then the wordmark "Meridian & Co." in Syne/700, uppercase, mark always left of the wordmark, never stacked or reversed. - **Minimum size**: mark not smaller than `16px` square, below that the blueprint outline and the filled half merge. Wordmark not smaller than `0.8rem`. - **Clearspace**: empty margin equal to the mark's own height (22px at default size) on all four sides of the lockup. - **Don't**: recolor the mark for a light background, it only ever renders on `--panel`/`--bg`. Don't fill the whole gable solid or leave it fully unfilled, the half-and-half split is the entire point, it's a process mark, not a finished-building icon. Don't animate the mark itself, the resolve motion belongs to the homepage's elevation section, not the nav. Don't rotate or stretch it. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#17181a` | Page background | | Surface | `--panel` | `#1e2022` | Panels, nav, table header | | Surface raised | `--surface-raised` | `#26292c` | Wall fill in the elevation drawing, row hover, input focus bg | | Border | `--border` | `#34383c` | Panel edges, dividers, roof/door fill, table rules | | Ink | `--ink` | `#ecebe8` | Primary text | | Ink muted | `--dim` | `#9a9d9f` | Secondary text, helper text, in-permitting status | | Blueprint / process | `--accent` | `#57c2d9` | Blueprint line-drawing, primary button fill, eyebrow labels, under-construction status, focus ring | | Material / finished | `--accent-alt` | `#a9977c` | Window fill in the elevation drawing, complete-project status, permit-delay state | There is deliberately no red anywhere in the system. A delayed permit or a paused project is real information a client needs, not a failure state to alarm them with, it's communicated in `--accent-alt` and a specific sentence, the same warm material tone used for a finished building. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` text on `--bg` | ~14.9:1 | AAA | | `--dim` text on `--bg` | ~6.5:1 | AA (body text) | | `--accent` text on `--bg` (eyebrow, under-construction status) | ~8.6:1 | AAA | | `--accent-alt` text on `--bg` (complete status, permit-delay copy) | ~6.3:1 | AA (body text) | | Dark label on `--accent` fill (primary button) | ~8.6:1 | AAA | | `--ink` on `--panel` | ~13.7:1 | AAA | | `--ink` on `--surface-raised` | ~12.3:1 | AAA | The rule this table exists to enforce: a button or badge filled with `--accent` always labels itself in a near-black (`#0a1416`), never `--ink`, white text on this cyan at fill-strength reads flat and undershoots the crispness the rest of the system holds to. typography: display: fontFamily: Syne fontWeight: 700 body: fontFamily: Inter fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.25rem, 5.5vw, 4rem)` | 700 | Syne | 1.05 | -0.01em | Hero H1 only | | `--text-h2` | `1.5rem` (homepage) / `1.4rem` (second page) | 700 | Syne | 1.2 | 0 | Section headings | | `--text-eyebrow` | `0.75rem` | 700 | Syne | 1.3 | 0.18em, uppercase | "Architecture & Planning" / "Selected Work" labels above a heading | | `--text-body` | `1rem` | 400 | Inter | 1.6 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Inter | 1.5 | 0.01em | Footer, nav utility links, helper text, table cells | Rule for Syne vs. Inter: Syne, always uppercase when used as a label or wordmark, is reserved for the hero headline, section headings, and short eyebrow labels, the moments meant to feel drafted, not written. Everything read as continuous prose, body copy, table cells, form labels, is Inter. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape One radius scale: `--radius: 6px` for panels, cards, inputs, and table containers, tighter than most other systems in this gallery on purpose, an architecture firm's UI shouldn't feel soft. `--radius-pill: 999px` reserved for buttons and the complete-project badge only. ## Iconography No icon library. The only non-text glyphs are the logo mark, the elevation line-drawing itself, and one Unicode glyph, `✓` (project complete), set at the same weight as the text beside it. Project status is communicated with a plain-language phrase ("Under construction", "In permitting") paired with color, never a status icon. If a future page needs more iconography, the fallback is Phosphor (line style, `1.5` stroke), that decision just hasn't been needed yet. ## Motion Principles Scroll dissolves a cyan blueprint line-drawing of a building elevation into its finished rendering: the blueprint fades to a ghosted 28% opacity while the roof and walls fill in, then the windows fill in with a short stagger, floor by floor, like construction actually proceeding upward, then the door resolves last. The whole sequence is scroll-scrubbed (`scrub`, not a fixed duration), tied exactly to scroll position rather than playing on a timer, and reverses cleanly if the visitor scrolls back up. This is the only scripted animation on either page, everything else (buttons, table rows, form inputs) uses only `:hover`/`:active`/`:focus-visible` CSS transitions. The whole system honors `prefers-reduced-motion` by showing the ghosted blueprint and the fully resolved building at once, with no animation. ### Never-list (written before the impeccable-pass rebuild) 1. No centered hero sitting a full section above the blueprint, the elevation drawing shares the first viewport with the headline. 2. No two-button CTA row floating free of the drawing, the primary action sits beside the intro copy that introduces it. ## Voice & Tone precise, restrained, confident, no adjectives without a reason. In practice: - **Button label**: "Start a project", not "Let's Build Something Amazing Together" - **Error message**: "Permit delayed. Fircrest House is waiting on a county review.", not "Oops, there's a delay!" - **Empty state**: "No open projects on the board right now.", not "Nothing to show yet, check back soon!" - **Success status**: "Alder Court, occupied 2025", not "🎉 Project successfully completed!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent)`, `2px` offset, applied via `:focus-visible` on every interactive element (links, buttons, inputs, textarea), never removed without a visible replacement. - Reduced motion: the elevation blueprint-to-render sequence checks `prefers-reduced-motion: reduce` and shows the ghosted blueprint and fully filled building simultaneously, no scrubbed animation. - Minimum tap target: `44px` in the smallest dimension for every button and form control on touch viewports. - Color is never the only signal: project status pairs color with a specific phrase ("Under construction", "Complete, 2025"), the permit-delay state pairs `--accent-alt` with a full sentence naming the project. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: a small "back to gallery" utility link. Center-left: the mark + wordmark lockup, wordmark uppercase. Right: a Projects link plus one primary button. Collapses to just the lockup and primary button under `480px`, no hamburger, there are only two destinations. ### Buttons Three variants, `6px` radius (matching the system's tighter shape language) except the pill exception below, one accent: - **Primary**: `--accent` fill, dark label, `--radius` (not pill), used once per view for the single real action ("Start a project", "Send it over"). - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. "Check status" and similar secondary actions. - **Ghost**: text-only, `--dim` label, `--ink` on hover. Tertiary actions like "see it resolve." All variants define `:hover` (brightness/border shift), `:active` (`transform: scale(0.98)`), `:disabled` (`opacity: .4`, `pointer-events: none`), and `:focus-visible` (accent outline). ### Elevation drawing An SVG with two coincident layers, a stroke-only `#blueprint` group and filled `.wall-fill`/`.roof-fill`/`.window-fill`/`.door-fill` shapes beneath it, sharing identical geometry. The blueprint never fully disappears, at rest it settles to 28% opacity, a permanent reminder the finished building started as a drawing. ### Table Header row in `--panel`/`--dim` labels, body rows in `--bg`, one `--border` rule between rows, row hover to `--surface-raised`. Status cells are plain text colored by phase (`--accent` for active construction, `--accent-alt` for complete, `--dim` for permitting), never an icon or dot alone. ### Forms Label above input, `--text-small`/`--dim`. Input/textarea: `--panel` background, `1px solid --border`, `--radius`, `--ink` text, `--dim` placeholder. On `:focus`, border becomes `--accent` and the background lifts to `--surface-raised`. On error, the border becomes `--accent-alt` and the helper text explains what's missing in plain language. ### Status / feedback states - **Loading**: a skeleton shaped like the real content (bars matching text line-heights), not a spinner. - **Empty**: a plain sentence in `--dim`, no illustration. - **Error**: an inline `--accent-alt` message naming the specific project, with a concrete next step, never a silent failure. - **Success / status badge**: `--radius-pill`, `1px solid --accent`, `--accent` text on transparent fill, not filled, filled would compete with the primary button's exclusive use of a solid `--accent` fill. ### Footer One row: firm name/tagline on the left, real page links on the right (Projects, back to gallery). No invented legal or licensure text. ## Do's and Don'ts ### Do - Let the elevation drawing be the only scroll-scrubbed element on the page, everything else reacts only to direct interaction. - Reserve `--accent` for the blueprint/process meaning and `--accent-alt` for finished-material meaning, keep that split consistent everywhere. - Report delays and setbacks (permit issues, schedule slips) as plain, specific sentences, never euphemized or hidden. - Use a dark label on any `--accent`-filled surface. - Keep the wordmark and eyebrow labels uppercase, body copy always sentence case, never mix the two. ### Don't - Don't use lifestyle or stock photography anywhere, the elevation drawing and typography carry the whole visual system on purpose. - Don't introduce red for delays or problems, route those to `--accent-alt` with specific copy instead. - Don't replay the elevation reveal on every scroll pass in one direction only, it scrubs both ways with the scrollbar. - Don't stack more than one primary button in the same view. - Don't fill a status badge solid, badges stay outlined so the primary button remains the only solid-`--accent`-fill element on screen. ## Known Constraints - Two routes now exist (home, projects), still no case-study detail pages or a real client portal, no responsive breakpoint table beyond a single-column mobile collapse, no authenticated client login (the "Start a project" form is not wired to anything real, this is a concept demo).