The Harmonyc Group
Typography is the primary element.
The name contains the city.
Harmonyc was coined from “harmonic” and NYC. The last three letters carry the house cobalt, and that is the whole idea the identity rests on.
The studio field is quiet: paper, ink, hairlines, and whitespace. Colour belongs to the work, not to the studio. Each project world carries its own full palette inside its own case study, and the field around it stays still.
This page is the system as built. Every value on it is read from the same tokens the site ships, and every claim on it is checkable against the design record.
- Place
- New York City
- Typeface
- Die Grotesk, Klim
- Field
- Paper, ink, cobalt, signal
- Motion
- Static first
Wordmark
The wordmark is live text, not a graphic. It is set in Die Grotesk at the optical-size 42 headline master, and the last three letters take cobalt.
Lockups
- TheHarmonycGroup
Stacked, paperThe primary lockup. Three lines, flush left, at poster scale. - TheHarmonycGroup
Stacked, off-blackThe same lockup on the dark field. Cobalt lifts to #5370FF so it holds against ink. - The Harmonyc Group
InlineFor running text and the site kicker, where the stacked mark would break the line.
Clear space
Keep clear space equal to half the cap height on every side. Nothing enters this zone, including rules.
- Clear space
- 0.5 × cap height, all four sides
- Cap height
- 0.73 em, or 730 units at 1000 per em
- At a 64px mark
- 23.4 px on every side
Misuse
Never write Harmony, HarmonyC, harmoNYC, HarmoNYC, or Harmonic.
These are the five misspellings that actually occur. The name is The Harmonyc Group on first reference and Harmonyc after.
Do not rebuild the wordmark as a vector.
There is no approved standalone vector master. The mark is text so it inherits every optical correction on this page. A traced outline would freeze one plane’s correction into every plane.
Do not colour any letters other than the final three.
The cobalt thread is the one idea. Spreading it removes the point.
Do not set the mark in capitals.
The studio speaks sentence case. Capitals are reserved for a project brand writing its own mark on a surface that world owns.
Colour
Two grounds, one ink, two colours that mean something. Everything else is the absence of colour, which is the point.
Field
Paper
Role: background
The field. Every studio surface starts here.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 16.13:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 15.73:1, AAA
Surface
Role: surface
A half-step off the ground, for panels that need to separate without a rule.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 14.85:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 14.48:1, AAA
Ink
Role: ink
Type and rules. Off-black, never pure black.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 15.83:1, AAA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 15.83:1, AAA
Muted
Role: neutral
Secondary text. Deepened from #6E6D68 to clear 4.5:1 on paper.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 4.82:1, AA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.87:1, AA
Accent
Cobalt
Role: accent
The work plane and link hovers. Carries the last three letters of the name.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.40:1, AA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 4.62:1, AA
Signal
Signal
Role: signal
The position. One plane per page, never two.
Light field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 5.64:1, AA
Dark field
- RGB
- HSL
- CMYK
- approx.
- Type on it
- at 6.34:1, AA
CMYK is converted from RGB with no colour profile, so it is an approximation. A print value needs a profile and a proof.
Proportions
- Paper72%
- Ink18%
- Muted6%
- Cobalt3%
- Signal1%
Rules
- Cobalt is the work plane and link hovers. It is also the thread in the wordmark. It does not decorate anything else.
- Signal orange marks the position — the one thing on a page the studio is arguing for. One plane per page. If a second plane wants it, the page has two arguments and needs an edit, not a colour.
- Hairlines are ink at 18 percent, never a grey value. They inherit the theme automatically.
- Project worlds keep their own fixed identities inside their case studies. The studio field never adopts a project’s colour.
Typography
One variable family does every job. Weight and optical size do the work that a second typeface would otherwise do.
The family
Die Grotesk
- Foundry
- Klim Type Foundry
- Source
- Local files
- Fallback
- Archivo, Arial, sans-serif
- Licence
- Licensed for web on theharmonycgroup.com — order 26070638, full family, 5,000 monthly unique users. The licence names the domain, so these files are served from that domain and nowhere else.
| Axis | Name | Range | Named instances |
|---|---|---|---|
| wght | Weight | 100 – 900 |
|
| opsz | Optical size | 6 – 42 |
|
- Uppercase
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lowercase
- abcdefghijklmnopqrstuvwxyz
- Numerals
- 0123456789
- Punctuation
- . , : ; ! ? ‘ ’ “ ” ( ) [ ] – — … / & @ # % + = < >
Roles
| Role | Weight | Optical size | Tracking | Size | Usage |
|---|---|---|---|---|---|
| Display | 540 | 21 | 0em | h1, h2, index rows, plane lines | Reads --fst-display-wght and --fst-display-track, so any plane can override it. See the optical corrections below. |
| Body | 460 | 18 | 0em | 16px, prose measure 62ch | Running text and every decision line. |
| Label | 500 | 6 | +0.01em | 11–12px | Kickers, eyebrows, counts. The only place tracking opens up. |
The scale
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
The name contains the city.
Optical corrections
Bright grounds erode dark letterforms; light type on dark grounds blooms. This is the irradiation illusion, and the correction for it cannot be computed — it is calibrated by eye with the same specimen on every plane, then logged. A plane with no entry has not been calibrated yet, and says so.
| Plane | Ground | Weight | Tracking | Calibrated |
|---|---|---|---|---|
| Paper — light and dark fieldBaseline. Every other correction is measured against this. |
| 540 | 0em | no date |
| Work plane — cobaltNot calibrated. Runs neutral today and is a candidate for a future pass. |
| not calibrated | no date | |
| Position plane — orange |
| 556 | −0.008em | 2026-07-15 |
| Contact plane — off-blackLight theme only. In dark theme the plane flips to paper and the correction goes neutral. |
| 528 | +0.002em | 2026-07-15 |
| Landing mark — poster scale, opsz 42Dark field only; neutral in light theme. |
| 530 | +0.002em | 2026-07-18 |
The same sentence on both planes, each at the weight and tracking recorded above.
The name contains the city.
The name contains the city.
The studio speaks sentence case everywhere. A brand may write its own mark in capitals only on surfaces its world owns, and those capitals take a smaller size step plus −0.005em extra tracking.
Motion
Harmonyc accelerates hard and brakes late. Between moves, nothing drifts.
In motion
Enter
Copy and visuals arriving into view.
760ms
Move
A control answering a press.
320ms
In use
The entrance
Copy rise
Appearance tick
Cover
The curve
Enter
Move
Two curves carry the site. Enter is for anything arriving, Move for anything answering an input.
Nothing loops and nothing is ambient. Every effect collapses under reduced motion, and none mount on touch.
Voice
The studio makes checkable statements in sentence case. That is most of the voice.
Pillars
Every visible claim is verified fact
Licensed for web on theharmonycgroup.com, order 26070638.
If a number, a date, or a credential appears on a surface, there is a record behind it. Nothing is rounded up and nothing is implied.
Sentence case, everywhere
The name contains the city.
Headlines, labels, buttons, and navigation. Capitals belong to a project brand on a surface that world owns.
Say the decision, not the process
The public site ships static.
One muted decision line under each heading. It states what was chosen, not how the choosing felt.
One channel
The contact form.
No public email address appears anywhere, ever. Every route to the studio goes through the form.
Do and don’t
Describing the work
Do
The site ships static.
Don’t
We leverage cutting-edge motion design to elevate the experience.
A heading
Do
The name contains the city.
Don’t
THE NAME CONTAINS THE CITY
A credential
Do
Die Grotesk, licensed for web on this domain.
Don’t
Premium typography from a world-class foundry.
Contact
Do
Use the form.
Don’t
hello@…
Layout
Rules, planes, and whitespace. There is no grid system to learn, only four measurements and a sequence.
Measurements
- Shell
- The outer measure. Nothing runs edge to edge except a plane’s ground colour.
- Padding
- Continuous, not stepped. The margin is correct at 1100px, a width nobody designs at.
- Hairline
- 1px. The only divider in the system.
- Prose measure
- Journal and any running text longer than a paragraph.
The page shell
Grammar
- Chrome is the kicker line only: identity left, place and appearance control right. There is no fixed top bar.
- Sections are full planes separated by a single hairline.
- A section opens with an eyebrow (01 Work), then a balanced display heading, then one muted decision line. Never two.
- Index rows are number, then a large name, then the kind — baseline-aligned and hairline-ruled.
- Figures in the journal are code-native. Sources are ruled and listed, never linked inline.
Held to the 62ch prose measure. The hairline marks where it falls at this text size.
Plates
Twelve compositions drawn from the five palette tokens. The studio ships no photography and no client material, so anything that needs an image draws its own.
Every plate on this page is drawn in the browser from the same colours documented in the colour section, at the moment you load it. Change a hex there and the whole set is redrawn. Half the plates stand on ink and half on paper, and because the ink and surface tokens swap together, the set keeps its internal contrast in either appearance — the plates simply change sides.
The set
00 Field
01 Bands
02 Arcs
03 Plate
04 Measure
05 Split
06 Dot field
07 Frames
08 Horizon
09 Weave
10 Column
11 Eclipse
What each one is
- 00Field
- Cobalt pooling toward one corner over paper. The softest thing in the set.
- 01Bands
- Ink ground, stepped paper rules at growing weight, one struck in cobalt.
- 02Arcs
- Concentric rings struck from the bottom-left corner, every third one heavy.
- 03Plate
- A vertical ramp from ink to paper. The one composition with no drawn mark on it, and the one that carries the heaviest grain.
- 04Measure
- Hairlines at accelerating pitch over a baseline, the seventh struck in cobalt.
- 05Split
- A hard diagonal, cobalt beneath ink, with a hairline on the seam.
- 06Dot field
- A halftone ramp, dense at the top-left and opening toward the bottom.
- 07Frames
- Nested hairlines stepping off-centre on ink, with one solid cobalt block.
- 08Horizon
- Paper above, an ink band below, a cobalt disc sitting on the line.
- 09Weave
- Two pitches of hairline crossing on ink, with one cobalt column running through.
- 10Column
- One heavy cobalt bar off-centre on paper, ink rules stepping beside it.
- 11Eclipse
- A paper disc high on ink with a cobalt disc crossing it.
Rules
- Each plate is a different silhouette on purpose. At a glance you should be able to tell which one you are looking at — that is what makes a trail, a wheel, or a wrap readable rather than a smear.
- Compositions are fractions of the box, not pixel measurements. The same plate can be drawn portrait for a wheel of cards or landscape for a grid tile without being redesigned.
- Every plate takes the same hairline frame and the same grain, so twelve different silhouettes still read as one printed set.
- Never substitute stock photography for a plate. The set exists so the library never has to ship an image it does not own.
- Never recolour a plate by hand. They are drawn from the tokens; if a plate looks wrong, the token is wrong.
Accessibility
Accessibility is the weakest graded axis among award-winning sites, which makes it the cheapest place to be visibly better than the field.
Commitments
- Focus is always visible
- Every interactive element carries a focus-visible outline. In dark theme the outline keeps the light cobalt, which clears 3:1 on both grounds.
- Forms are real forms
- Every field is labelled and the budget options are real radio inputs, not styled divs.
- Motion collapses
- prefers-reduced-motion removes every transition on the site. Nothing degrades to a shorter animation; it goes away.
- Analytics is opt-in and reversible
- Nothing is requested until it is explicitly allowed, the choice can be revoked from a persistent control, and revoking removes the cookies. Allow and decline carry equal visual weight.
- Type loads without a reflow
- The roman variable font is preloaded at 146KB with font-display: swap, so a split headline does not jump after load.
Contrast
1 of 8 pairs falls short: Paper on signal measures 2.86:1 against a required 3:1.
| Pair | Specimen | Foreground | Background | Measured | Required | Result |
|---|---|---|---|---|---|---|
| Paper on signal | Visual sample | #EEEDE8 | #FF4A28 | 2.86:1 | 3.0:1 | Fail |
| Ink on paper | Visual sample | #11110F | #EEEDE8 | 16.13:1 | 4.5:1 | PassAAA |
| Muted on paper | Visual sample | #676661 | #EEEDE8 | 4.91:1 | 4.5:1 | PassAA |
| Cobalt on paper | Visual sample | #173EDB | #EEEDE8 | 6.52:1 | 4.5:1 | PassAA |
| Ink on dark field | Visual sample | #ECEBE5 | #111210 | 15.73:1 | 4.5:1 | PassAAA |
| Muted on dark field | Visual sample | #9D9C96 | #111210 | 6.83:1 | 4.5:1 | PassAA |
| Light cobalt on dark field | Visual sample | #5370FF | #111210 | 4.59:1 | 3.0:1 | PassAAA |
| Ink on signal | Visual sample | #11110F | #FF4A28 | 5.64:1 | 4.5:1 | PassAA |
Ratios use the WCAG 2.1 relative-luminance formula and are computed from the hex values on this page, so they move the moment a colour does. A required 3:1 applies to large display type and non-text marks; everything else is held to 4.5:1.
Focus
Press Tab. The outline that lands on the control below is the focus-visible style the whole system uses: 2px of the accent colour, offset 3px, on a 1px radius. This section does not restyle it.
Assets
Where the real files live. This page is generated from the same records, so if something here is wrong, the record is wrong.
The typeface is licensed to one domain and is not redistributable. Do not copy the font files into a deck, a client hand-off, or another site.
Typeface
Die Grotesk, Klim Type Foundry. Variable roman and italic.
- Roman VF
- die-grotesk-vf-roman.woff2 — 146KB, preloaded
- Italic VF
- die-grotesk-vf-italic.woff2 — 159KB
- Licence
- Web, theharmonycgroup.com, order 26070638, 5,000 monthly unique users
- Fallback
- Archivo subset, then Arial
Tokens
The values on this page are read from these files, not copied from them.
- Field tokens
- app/(field)/home.css — the --fst-* custom properties
- Type declaration
- app/(field)/flood.css — --font-harmonyc-build
- Landing
- app/(field)/landing.css
Records
The authoritative sources behind every claim on this page.
- Design system
- theharmonycgroup/DESIGN.md — canonical
- Brand registry
- AI-First Life/context/BRANDS.md — naming and precedence
- Optical method
- Global skill: optical-type-calibration
- Public write-up
- /journal/bright-grounds
Not yet defined
Recorded here rather than left blank, because an undefined rule and an unwritten rule are different things.
- Cobalt plane correction
- The work plane runs neutral and has never been calibrated by eye.
- Vector wordmark
- No approved standalone master exists. The mark is text by decision.
- Photography
- No studio imagery direction has been set. Project worlds carry their own.