72 straight lines whose envelope reads as a curve. Connect them one way and you get a star; another way, a bloom; another, a spiral. The same simple elements, transformed by how they relate and a metaphor. That is what we share and teach people about AI; from something at harmony to purposefully chaotic to harmony again in different form.
The logo is the stitch star, tilted 20 degrees, in coral. But the full identity is motion: on the site the mark re-stitches between its canonical figures as you scroll. Frozen states each have a job.
#E76F51 on black; #BE4A2B on light grounds. Never outline it, never fill it, never add a container tile.assets/logo/, animated 800x800 loop included (MP4 + GIF).The ground is true black; on OLED the page disappears and the geometry floats. Warm ivory text, one loud coral, and the palette tints in reserve. Interactive text (links, and list-row titles on hover) warms to the coral accent #E9805E. Dark is the only surfaced mode; a light warm-paper variant stays dormant behind ?light as a print and forced-light fallback.
Supporting tints (sand #F4A261, sage #A8D5BA, teal #3B7A9D) survive from the light system for tags and gentle category color; sparingly, never as fields. Every text pairing clears WCAG AA (4.5:1); each hue has a designated ink for use as text; bright hues never set type.
The warm cast is a recipe, not a background color; this page uses it too. The base is pure #000000. Over it, every section carries a full-bleed wash at 5 to 6 percent alpha, alternating coral rgba(231,111,81,.05) and sand rgba(244,162,97,.06), melting to transparent at the top and bottom edge so sections blend instead of banding. That is the entire chocolate-espresso feel: true black doing the OLED disappearing act, with a breath of warmth where the eye rests. The light variant inverts it; a warm-paper base carrying the same two tints, fainter still. Raised elements on the black ground use these warm near-black tones, never a neutral gray.
Display · Inter bold · tight tracking (−0.02em) · line height ~1.06 · sentence case, always
Body runs in Krub at 17px with a 1.7 line height, warm and loopless. The eyebrow is the only uppercase in the system: 13px, tracked +0.08em, coral. No monospace anywhere; the system has no clinical register. Scale: 12 / 13 / 14 / 16 / 17 / 22 / 28 / 36 / 48 / 64 / 80.
No patterns, no noise, no stock. Background texture is the brand geometry at architectural scale: figures filling a full section and bleeding off the page, alternating sides down the scroll (right, left, right, left).
| Rule | Value |
|---|---|
| The skeleton (non-negotiable) | 72 lines · 18 rings x 4 arms · ring-major order · consistent rotation. Any figure honoring it morphs fluidly into any other. |
| Dark mode lines | #E76F51 at 0.38 opacity, 0.8px non-scaling stroke |
| Light mode lines | #C2B5A1 at 0.5 (0.4 mobile) |
| Placement | Section-filling, off-page bleed, alternating sides; never centered as an object |
| Resolution | Figures hold fully stitched through their section; the morph (the messy middle) lives only between sections |
| Protection | Selection-style bars, background-colored, measured from real text line boxes, drawn under all text. Lines never cross a glyph. |
Where the field crosses text, no line may touch a glyph. The fix is a measured highlight layer, and it has four rules we learned by breaking each one:
| Rule | Why it exists |
|---|---|
| Bars are background-colored | Black on dark, white on light. They read as the geometry parting around the words, never as cards or panels. |
| Measure the text, not the box | Range.getClientRects() per element. A block element (eyebrow, label) reports full column width and would over-cover; the range hugs the actual glyphs. |
| Above the figures, below all text | The bars live on their own layer between the line field and the type. Wrong paint order and the lines cover the bars instead. |
| The layer may never inflate the page | Give it real height; a zero-height SVG is clipped in Safari and the bars vanish. Measure the document with the layer collapsed, and guard the resize observer on width so a height change can never loop the layout into infinite growth. |
t*1.18 − (i/72)*0.18, smoothstepped; figures dissolve leading-edge-first and re-stitch the same way.prefers-reduced-motion: snap between resolved figures; never animate.Warm, plain, confident; a small gathering run by people with taste. Sentence case everywhere. Digits when functional: 120, 5pm, 2026. Say less; one idea per section, air around each. "We" for hosts, "you" for the reader. No em-dashes, ever; commas, colons, semicolons, periods.
Avoid: corporate SaaS, startup pitch, transit dashboard, design influencer energy. No buzzwords, no exclamation marketing, no emoji.
Every gathering is a numbered volume with its own theme title: Vol. 03 · Designing with AI. Field Notes issues mirror the volume numbers; the event and its recap are two halves of one object. Archive rows lead with the volume; dates ride trailing.
Download the full asset pack → zip · logo + textures · ~11 MB
fc-mark.svg (coral, transparent) · fc-mark-on-black.svg · fc-mark-light-bg.svg (#BE4A2B for light grounds) · fc-mark-1600.png · fc-mark-black-1600.png · animated 800 MP4 · animated 800 GIF
star · cardioid · pursuit (coral) · star gray · cardioid gray · pursuit gray (light mode)
All assets derive from the shared 72-line keyframes; request any figure, any in-between frame, any size.
Frontier Creatives · frontiercreatives.design · assembled with the messy middle fully visible.
