The spark on the i
Every great site starts with a spark.
The whole identity is one idea: the dot of the i is a star, and it is alive. Everything on this page follows from that.
The magic lives inside the name.
BuildSpark is named after the moment before the work, not the work. So the mark is not a symbol bolted on beside the name. It is in it. The dot of the i becomes a star, it breathes, and wherever the name appears the wonder is already there.
What it has to say
Wonder, and ease. Someone describes the website they want and it appears. That should feel like a wish granted, not like software being operated.
What it must never say
Not a tool, not a dashboard, not a machine. The four-point twinkle is the most borrowed symbol on the internet, so ours earns its place by where it sits and how it moves, never by being drawn louder.
One star, four parts.
It is built from a long four-point star with soft shoulders, so it reads as light rather than as a shape. Three layers move around it, and a white core holds the centre when it gets small.
How it is drawn
- The halo. Gold into pink into nothing. It swells and fades on the beat.
- The counter-star. Pink, 44% scale, turned 45°, drifting the other way.
- The star. White at the centre, gold at the tips, with a soft bloom around it.
- The core. A flat white dot, r = 4.5. It is the last thing standing at 16 px.
Below 24 px the halo and the counter-star are dropped and the star is filled flat, because the bloom turns to mud at that size. Never draw the star smaller than 16 px.
Lowercase, one word, dotless i.
The wordmark is set in Sora 700 at −0.04em, all lowercase, as a single word. The i is typed as a dotless ı so the star can take its place. In running prose the company is written BuildSpark; only the wordmark is lowercase.
On Midnight
The default. The star carries its halo and its gold.
On white
On a light ground the star body turns Wish violet and keeps a gold core. Gold alone holds only 1.7:1 on white, so it would dissolve.
Clear space is the height of the star, on every side. Nothing else goes inside the dashed line, and the star above the i is never clipped by the edge of a container.
The app icon and the favicon
The star stands alone on a Midnight tile with a corner radius of 22% of the width. It fills roughly 68% of the tile, so the points nearly touch the safe area without crowding it.
A night sky, lit from one point.
Midnight is the ground of everything. Violet is the light in the sky. Gold is the spark, and it is rationed to almost nothing, which is exactly why it works. Select any swatch to copy its value.
Gold lives inside the mark and nowhere else. Not headlines, not buttons, not rules, not icons, not links. The moment gold appears as text the brand stops being a night sky with one star in it and starts being an ordinary yellow-and-purple website.
| Where it is used | Sample | Measured | Needs | Verdict |
|---|---|---|---|---|
| Body and headlines on Midnight | Aa 123 | 19.07:1 | 4.5:1 | Pass |
| Lead paragraphs on Midnight | Aa 123 | 16.07:1 | 4.5:1 | Pass |
| Captions and labels on Midnight | Aa 123 | 11.26:1 | 4.5:1 | Pass |
| Links and kickers on Midnight | Aa 123 | 9.00:1 | 4.5:1 | Pass |
| Body on Deep night | Aa 123 | 19.94:1 | 4.5:1 | Pass |
| Captions on Deep night | Aa 123 | 11.78:1 | 4.5:1 | Pass |
| Body on a Night card | Aa 123 | 17.77:1 | 4.5:1 | Pass |
| Captions on a Night card | Aa 123 | 10.50:1 | 4.5:1 | Pass |
| Midnight text on a white button | Aa 123 | 19.07:1 | 4.5:1 | Pass |
| Midnight text on Lavender | Aa 123 | 9.00:1 | 4.5:1 | Pass |
| White text on a Wish 600 button | Aa 123 | 5.18:1 | 4.5:1 | Pass |
| Confirm label on Midnight | Aa 123 | 12.40:1 | 4.5:1 | Pass |
| Glow as a large label on Midnight | Aa 123 | 6.77:1 | 3.0:1 | Pass |
| Wish as a graphic edge on Midnight | Aa 123 | 4.39:1 | 3.0:1 | Pass |
| The spark inside the mark on Midnight | Aa 123 | 12.08:1 | 3.0:1 | Pass |
| Midnight inside a gold spark | Aa 123 | 12.08:1 | 4.5:1 | Pass |
Wish 500 carries white text at only 4.34:1, which is why every filled violet button is Wish 600 instead. Wish 500 stays for glows, edges and large shapes.
Sora for the wonder, DM Sans for the work.
Two faces, no exceptions. Sora is round and confident and does the promising; DM Sans is quiet and does the explaining. Both are subsetted and inlined in the page, never fetched from a font CDN.
Display
Sora 700
abcdefghijklmnopqrstuvwxyz 0123456789
- Dotless i
- ı U+0131, the character the wordmark uses
- Used for
- The wordmark, every heading, big numbers
- Tracking
- −0.035em headings, −0.04em wordmark, −0.05em display
- Line height
- 0.92 to 1.12, tightening as it gets bigger
- Weights
- 700 only
Body
DM Sans
abcdefghijklmnopqrstuvwxyz 0123456789
- Used for
- Paragraphs, labels, buttons, tables, captions
- Tracking
- Normal, or 0.1em to 0.16em for uppercase labels
- Line height
- 1.6 body, 1.3 to 1.45 in small print
- Weights
- 400, 500, 600, 700
Never set a wrapping block with a ch max-width. The ch unit is the width of a zero in the font actually in use, so it changes when the fallback face is swapped for the real one and the text reflows underneath the reader.
It has to be alive, or it is just a star.
A static four-point twinkle belongs to every AI feature button on the internet. Ours is ours because it breathes. One clock, 3.6 seconds, three parts moving at different rates so the loop never looks mechanical.
01
The breath
The star scales from 0.8 to 1.07 and rotates 12° over 3.6 s, eased at both ends. The counter-star shrinks and turns the other way. The halo swells a beat behind them.
02
Out of step
Where several stars share a view, each is offset by a fraction of the cycle. They must never pulse in unison, which reads as a loading indicator rather than a sky.
03
The sky
Embers drift upward behind every page on a canvas, between 0.1 and 0.5 px a frame, a tenth of them drawn with a cross flare. They sit behind the content and never compete with it.
Short list, held firmly.
Do
Put it on Midnight wherever you can. The brand is a night sky and the mark is the only thing lit in it.
On white, use the Wish star with its gold core, and set the word in Midnight.
Let the star stand alone once the name has been said: as the icon, the favicon, a bullet, a loading state.
Give it clear space of one star height, and keep the star unclipped at the top.
Don't
Don't use gold for type of any size. Gold is the spark, not a colour you write in.
Don't set the wordmark in capitals or in title case, and don't split it into two words.
Don't tint the wordmark or recolour the star. It is white on dark, Midnight on light, and the star keeps its own colours.
Don't stretch, squash, outline, emboss or add a second star beside the first.
Everything above, as code.
This is the whole brand in one block. It is the same declaration every BuildSpark page opens with.
/* BuildSpark, the spark on the i. Gold lives inside the mark and nowhere else. */
:root{
--night: #0E0B2B; /* Midnight */
--night-deep: #08061C; /* Deep night */
--night-card: #171239; /* Night card */
--wish: #7C5CFF; /* Wish */
--wish-600: #6D4DF7; /* Wish 600 */
--lav: #B7A6FF; /* Lavender */
--glow: #FF5FA8; /* Glow */
--pink: #FF8FC8; /* Pink */
--spark: #FFC53D; /* Spark gold */
--starlight: #FFF7E0; /* Starlight */
--text: #FFFFFF; /* White */
--soft: #EDE9FF; /* Soft */
--muted: #C8C2EE; /* Muted */
--ok: #6EE7A8; /* Confirm */
--line: rgba(255,255,255,.1);
--glass: rgba(255,255,255,.06);
--display: "Sora", "Sora Fallback", system-ui, sans-serif;
--body: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
color-scheme: dark;
}The marks themselves are drawn in code, not stored as files: _build/partials/spark-base.js builds every star from one path, so there is no logo file to go stale.