Foundations / Change history
Change history
What changed in each version and which old values are no longer used, with what to use instead.
Version 1.4 · Oct 20, 2026
Version 1.4 · Oct 20, 2026
Working demos, motion that follows the spec, an accessibility pass and search-ready pages.
- Website. The guide is now a website with a Light, Dark and System theme switch, an “On this page” index, click-to-copy tokens and hex values, and a logo playground. Home is now the homepage.
- Forms. The form demos work: the select has a proper chevron, and toggles, checkboxes and radios respond to clicks without submitting anything.
- Navigation and overlays. The navbar’s active item has a flat line, the demo modal’s close button is centred and Cancel and Confirm close it, and the side menu keeps its scroll position between pages.
- Motion. Tokens follow the motion spec: 240 ms to enter and 180 ms to exit, with cubic-bezier(0.2, 0.8, 0.2, 1) and cubic-bezier(0.4, 0, 0.2, 1). The Motion page quotes the new values, and its demos are aligned and readable in dark mode.
- Interaction and accessibility. No sticky hover on touch screens, 44 px touch targets, a brand focus ring (#2164EE, #4D8DFF in dark mode), the current item marked in the page index, and static state samples that no longer take focus.
- Search and sharing. Every page has its own title, description and structured data, and images have alt text.
- Fixes. Do and Avoid samples keep their light colors in dark mode, wide samples no longer overflow on small screens, and the Borders Avoid sample now shows the wrong divider colors it describes.
Version 1.3 · Oct 14, 2026
New accessible status tokens, unified grays, radius scale, renamed styles and the first product components.
- Accessible color. New status-*-text tokens that reach 4.5:1 on white, status-*-subtle backgrounds, and one bluish gray family (text-body #37434E, border-default #DCE3EA, new border-strong #7E92A5 at 3.2:1).
- One scale and clear names. Radius scale sm 4, md 8, lg 12, full 9999 (radius-card = radius-lg), and style names in English with hyphens, the same in Figma and in code.
- Logo v1.1 everywhere. All files use the official v1.1 logo (0.75X gap, Solid and Ring versions); the old guide is now “Archive · v1 (deprecated)”.
- Product components. Button, Input, Select, Textarea, Checkbox, Radio, Toggle, Badge, Alert, Link, Card, Navbar, Tabs, Tooltip and Modal, all linked to tokens and passing AA, with pages 12–15 in the menu.
- New pages and cleanup. Dark mode, Motion, Tone of voice, Photography and Illustration (with the Spark motif) as pages 16–20. Spacing, radii and hand-set colors are now linked to tokens, and no tokens were deleted.
Version 1.2 · Oct 13, 2026
The Logo page is reorganized to be easier to use. The rules do not change.
- New order. The Logo page has seven sections: Downloads, Version by background, Sizes, Clear space, Wrong uses, Symbol use and Technical details.
- No repeated information. Each fact appears in one place only; measures, gap and tokens are in Technical details.
- Fixes and symbol use. Version names match across the page, clear space is shown in px, the formats table is simpler, and a new section explains when to use the symbol without the name (favicon, app icon, avatar).
Version 1.1 · Oct 13, 2026
New rule to choose the logo version by background.
- Solid version. A new Symbol version: a filled shape with the star cut out, for pure white backgrounds only, in Ink or blue. How it is built is documented on the Logo page.
- Ring version. It is still the official logo, used on every background that is not white. The star always looks white.
- Gap between symbol and name. Set to ¾X in the horizontal logo and ½X in the vertical one (before 0.73X and 0.41X). Only the name moved; nothing was scaled.
- Examples. Ring samples sit on color-surface-subtle and solid ones on white, so every example follows the rule.
Version 1.0.1 · Oct 9, 2026
The logo Symbol is now a perfect circle.
- Symbol. The circle is now perfectly round, so it fits square spaces like app icons, favicons and avatars. The star does not change.
- Horizontal and vertical logos. The horizontal logo is a bit wider and the vertical one centres the corrected symbol above the name. The name and gap do not change.
- Minimum size and files. The symbol’s minimum is 16 × 16 px on screen and 5 × 5 mm in print. New SVGs in dark, light and blue are in brand-inventory/logos/oficial-v1.0.1/.
Version 1.0 · Oct 8, 2026
First version of the Starshot brand foundations.
- Reference and color. starshotsoftware.com is the visual reference. Starshot Blue #006AFF for the brand, with color-action-default #2164EE and color-action-strong #124EA1 for buttons and links.
- Contrast. All text colors and links meet the recommended contrast on color-white and color-surface-subtle.
- Type and logo. One typeface, Hanken Grotesk, with a 14-size scale; the logo in three versions (Horizontal, Vertical and Symbol) and three colors.
- Shape, formats and images. A scale of 15 spaces, eight radii plus two for cards, two shadows, canvas sizes and grids, vuesax linear icons, and images that fill their frame.
What replaces what: color
If a file uses a value from the “Before” column, change it to the one in “Now use”.
Before (no longer used)
Now use
Note
#286BF6
color-action-default · #2164EE
Same tone, a bit darker: it now reads well on color-surface-subtle too.
#5E6D7B · #5B6A76 · #5B6B80 · #616F7B
text-secondary · #435260
Darker: it now reads without effort.
#959595 · #AEAEAE · #7B87A3
text-muted · #63707D
Bluish gray of the same tone as Ink; it now meets the recommended contrast.
Cyan #00C8FF
Starshot Blue (color-brand-blue) or color-action-default
Cyan is no longer part of the brand.
#F9FAFC · #F2F2F2 · #EFF5FA
color-surface-subtle · #F0F5FA
#E4E9EE · #D8DEE8 · #D9D9D9 · #C4C4C4
color-border-default · #E4E4E4
#0067FF · #006AFE · #0059FC · #3366FF · #1867DB · #4253FF
Starshot Blue · color-brand-blue · #006AFF
#0075FF · #4D65FF · #3898EC
color-action-default · #2164EE
#3C65BA · #134991 · #1B5395 · #2254A2 · #075FAB
color-action-strong · #124EA1
#000000 · #151515 · #0B1B2B · #132954 · #081633
Ink · color-ink · #021627
#222222
text-body · #333333
#ED114C · #EF2F56 · #E24912
status-error · #FB4F02
#FBDA00 · #FED03F
status-warning · #FBBB06
#00C851
status-success · #22C55E
#7F39FB
Violet · color-accent-violet · #7839F3
2021 rainbow gradients
No longer used
Use a flat color or a photo.
What replaces what: typography
Before (no longer used)
Now use
Note
Radnika
Hanken Grotesk
Light, Regular, Medium and Bold are the same as weights 300, 400, 500 and 700.
Geist Mono
label-caps (Hanken Grotesk in uppercase)
For text above titles, counters and labels.
JetBrains Mono · Chivo · Martian · Space · Fragment Mono · MONO-RGO
Hanken Grotesk
Inter · Roboto · Arial · Plus Jakarta · Libre Franklin
Hanken Grotesk
HK Grotesk is another name for Hanken Grotesk.
Sizes outside the type scale
The nearest size in the scale (text.*)
66 / 52 → 72 / 56 · 128 → 120 · 80 / 96 / 100 / 104 → 86 · 70 → 72 · 44 / 48 / 36 → 40 · 30 / 34 → 32 · 28 → 24 or 32 · 22 → 24 · 17 → 18 · 15 → 16 · 13 → 14 · 10 / 9 / 8 → 11
Thin · ExtraLight · ExtraBold · Black
Light (font-weight-light) or Bold (font-weight-bold)
Thin and ExtraLight → 300; ExtraBold and Black → 700.
Line heights outside the scale
The nearest line height (leading.*)
110 → 100 or 120 · 130 / 135 → 140 · 160 / 165 / 1.75 em → 150
Letter spacing outside the scale
The nearest value (tracking.*)
−3 / −4 → −2 · −0.5 → −1 · +1 / +2 / +3 → 0 · +8.5 → +8
What replaces what: logo
Before (no longer used)
Now use
Note
Old horizontal logo (more stretched)
Horizontal logo (logo.horizontal)
Old symbols: inside a square box or squashed
Symbol (logo.isotipo)
Name “Starshot” as an image (PNG or JPG)
Horizontal logo as SVG
Other old versions: 2021 name, outlined logo and 2024 seal
The three official versions
Logo in other colors (#242833, #0A0A0A, #170159, #134991, #4253FF)
Dark, light or blue logo (logo.color)
Old files
Some old files (Brand Site Docs, Page 1, Business Card and others) still show retired logos; the list is on the Inventory page, section 13. Update them when you edit each file.
What replaces what: shape and effects
Before (no longer used)
Now use
Note
Spacing of 6, 10, 14, 15, 21, 30, 60, 100 and 120 px
The nearest step in the scale (space.*)
6 → 4 or 8 · 10 → 8 or 12 · 14 / 15 → 16 · 21 → 20 · 30 → 32 · 60 → 64 · 100 → 96 · 120 → 128
Radii 2 · 3 · 5
radius-sm
Radii 6 · 9 · 10
radius-md
Radii 13 · 14
radius-card (radius-lg · 12)
Radii 17 · 20 · 21
radius-xl
Radius 26
radius-2xl
Radii 294 and larger
radius-pill
0.5 px borders
border-width-default
2.5 · 3 · 4 · 6 px borders
border-width-strong
Border #979797
border-default (color-border-default)
Border #000000
border-strong (color-ink)
Shadow 0 3 16 #0000000F
shadow-md
Inner, hard and colored shadows
No longer used
Layer blur
Only in illustrations
What replaces what: formats and grids
Before (no longer used)
Now use
Note
Slide margins of 120, 150, 180 or 48 px
Slide grid (grid-deck): 128 px margins
Web margins of 150, 180 or 48 px
Web grid (grid-web): content up to 1400 px
Posts of 493 × 493 or 1200 × 1200
Square post of 1080 × 1080 (format-social-square)
Emails 640 to 680 px wide
Email 600 px wide (format-email)
What replaces what: images
Before (no longer used)
Now use
Note
Stretch
Fill (image.fit)
Tile
Only for patterns
Opacity 20%
opacity-10 or opacity-30
Opacity 40% · 50%
opacity-30 or opacity-60
Opacity 70%
opacity-60 or opacity-80
What replaces what: icons
Before (no longer used)
Now use
Note
Font Awesome
vuesax linear
mdi · pixelarticons · IconPark · unicons · remixicon · Fluent · Phosphor · ico_*
vuesax linear
Emoji
Only on social media
Icons at 12 · 40 · 72 px
16 or 32 px (icon-size-sm / lg) or an illustration