Brand assets
Everything here is produced by the same code that renders the site and the app, so it cannot drift from the real thing. Use the files as they are: do not recolour, stretch, rotate or add effects to the marks.
The mark
Write it “Astrina”, in lower case in the wordmark and capitalised in a sentence — never “ASTRINA”.
You may use the mark and the name to refer to Astrina — in an article, a review, an integration page or a talk.
Colours
Read live from the stylesheet the site uses.
#6d4dff#b04dff#ff4f9a#ffb547#e8c27a#12b886#2f6bff#19c6e6#0a0820linear-gradient(118deg,#6d4dff 0%,#a64dff 46%,#ff4f9a 100%)linear-gradient(100deg,#19c6e6,#6d4dff 38%,#b04dff 62%,#ff4f9a 86%,#ffb547)linear-gradient(118deg,#f6d38b 0%,#e8b04b 50%,#c98a2a 100%)linear-gradient(118deg,#2f6bff 0%,#6d4dff 55%,#19c6e6 100%)Unbounded
Headlines and big showcase numbers only.
Onest
Body text, interface and dense numbers.
JetBrains Mono
Code, keys and tabular figures.
Astra
The mascot has one shape and several moods. Pick the mood that matches your story; do not draw new ones.
Every app icon file
One mark, built once and laid out for every place it has to live. Each file is generated from the same vector, so nothing here can drift from what the app actually ships.
A complete replacement for the folder in Assets.xcassets. Every PNG is opaque — App Store does not accept an alpha channel.
Goes into ios/Runner/Assets.xcassets/AppIcon.appiconset/
The adaptive icon: the circle lives in the foreground layer, the background is transparent, and the artwork sits inside the middle 72dp of 108.
Goes into android/app/src/main/res/
Icon-192 and Icon-512 are transparent; the maskable pair is opaque, with the safe area at 80%.
Goes into web/
Google Play takes an opaque square; the large transparent files are for presentations.
The vector everything else is built from, and the note on what goes where.
If you rebuild these
- Render the vector with a browser engine. ImageMagick has its own SVG parser and draws Astra an outline she does not have.
- The Android monochrome layer is tinted by its alpha channel alone — fill colour means nothing. Black eyes come out the same tone as the body, so the eyes and mouth are cut out as holes.
- After her 7° tilt the star really sits at x 30.7–164.3, y 33.0–165.3, centred on 97.5/99.1 — centring it on the 200×200 canvas pushes the circle off to one side.
Using these files
- You may use the mark and the name to refer to Astrina — in an article, a review, an integration page or a talk.
- Keep it a reference rather than an endorsement: the mark should not suggest that we built, sponsor or approve your product.
- The mark and Astra stay ours — they belong on our product, not on your packaging, your app icon or a mark of your own.
- Astra has one shape. Recolour her, redraw her or give her new poses and she becomes someone else.
- Anything else, or a file you cannot find here: write to us.
