ElanoryaBrand
The Elanorya brand
One mark, one interaction colour, two radii and a single typeface. This page states each value once so nothing has to be guessed from a screenshot.
The mark, and where each one belongs
The Elanorya mark is an arch: two legs, a crossing, and a single stone at the centre. It belongs to the publisher. It appears in the site header, in the browser tab, on a device home screen and in the publisher record that search engines read.
Products have their own marks and those appear only on their own surfaces. Jewelry AI's mark belongs on Jewelry AI pages; the Elanorya mark belongs on the shell. The two are never shown side by side in the same line, because that would suggest a relationship of equals rather than publisher and product.
In the header the mark carries no accessible name of its own. It sits inside the same link as the word Elanorya, so a screen reader announces the brand once rather than twice, and the mark is treated as decoration. That is deliberate: a logotype next to its own wordmark adds nothing when read aloud.
Every file below is generated from one source image by a script, and a build gate re-generates them and compares checksums. If a file on disk stops matching what the source produces, the build fails rather than shipping a stale icon.
Colour
Fourteen tokens, one chromatic family. The contrast figures are measured against the canvas and are the reason each token is restricted the way it is.
| Token | Value | Where it may be used |
|---|---|---|
| --canvas | #F5F5F7 | Page and section background. The default ground. |
| --canvas-sunken | #E2E2E5 | Filled and disabled surfaces. Never carries text. |
| --surface | #FFFFFF | Raised card and panel. |
| --surface-2 | #F4F8FB | Elevated wash for a featured block. |
| --ink | #1D1D1F | Primary text. 15.46:1 on canvas. |
| --ink-muted | #474747 | Secondary text. 8.53:1 on canvas. |
| --ink-subtle | #707070 | Supporting text. 4.55:1 — the floor, not a target. |
| --hairline | #D2D2D7 | Standard rule and border. |
| --hairline-strong | #858585 | Stronger border and icon. 3.39:1 — never text. |
| --action | #0071E3 | Filled button background only. Never text, border or decoration. |
| --on-action | #FFFFFF | Label on a filled button. 4.70:1 against the fill. |
| --link | #0066CC | Inline link and outlined button. 5.11:1 on canvas. |
| --decor | #2997FF | Decorative line or icon only. 2.77:1 — not even a border. |
| --focus | #0071E3 | Two-pixel focus ring. 4.31:1, above the 3:1 component floor. |
Type
One family at five weights. Sizes shown are the upper bound where the class uses a fluid range. Columns are size, line height, tracking and weight.
| Class | Size / line / tracking / weight | Used for |
|---|---|---|
| .t-display | 56px / 1.07 / 0.011em / 600 | Page title (h1) on every family except tool pages |
| .t-h2 | 40px / 1.14 / 0.011em / 600 | Section heading, and the h1 on tool pages |
| .t-h3 | 28px / 1.18 / 0.007em / 600 | Sub-heading inside a section |
| .t-lead | 21px / 1.24 / -0.005em / 300 | Standfirst under a title — the whisper voice of the system |
| .t-kicker | 12px / 1.33 / 0.06em / 600 | Small uppercase label above a block |
| .t-meta | 14px / 1.29 / -0.016em / 400 | Secondary and supporting text |
| body | 17px / 1.47 / -0.016em / 400 | Running text everywhere. The negative tracking is what makes the type feel precise. |
Rules that are not negotiable
Each of these is enforced somewhere in the build rather than left to judgement. Breaking one does not produce a review comment; it produces a red build.
- There are exactly two radii: 980px for anything interactive and 8px for surfaces. A third value in the application source fails the build.
- The three blues do three separate jobs and are never mixed in one element: one fills, one draws links and outlines, one decorates and may not carry text.
- The strong hairline is a border and icon colour. It never carries text, at any size.
- The sunken canvas is a filled surface. Nothing legible is placed on top of it.
- There is one shadow in the system and it belongs to product photography. Cards, buttons and navigation never receive one; depth comes from surface shifts and hairlines.
- There is no dark theme, and no theme toggle. The single theme is declared to the browser so form controls and scrollbars render to match.
- There is one typeface. A second display face was removed rather than kept for occasional use.
Brand files
All seven are generated from one source. Two are opaque: a home-screen icon because the platform flattens transparency to black, and a maskable icon because the platform crops it to a circle.
| File | Size | Background |
|---|---|---|
| /favicon.png | 96 × 96 | Transparent |
| /brand/elanorya-mark-96.png | 96 × 96 | Transparent |
| /apple-touch-icon.png | 180 × 180 | Opaque #F5F5F7 |
| /brand/icon-192.png | 192 × 192 | Transparent |
| /brand/icon-512.png | 512 × 512 | Transparent |
| /brand/icon-maskable-512.png | 512 × 512 | Opaque #F5F5F7 |
| /brand/elanorya-mark-512.png | 512 × 512 | Transparent |
| /apps/jewelry-ai/mark.png | 144 × 144 | Transparent |
| /apps/jewelry-ai/mark-216.png | 216 × 216 | Transparent |