Press Resources

Official Bascik logos, colors, and usage rules for articles, talks, videos, podcasts, and community sites. Download the full brand kit or pick individual files.

Kit Contents

The brand kit is a single zip containing a bascik-press-kit/ folder. Every raster file is generated from the same two master SVGs, so all sizes stay consistent.

Contact

Press and media: press@bascik.dev

Write to this address for interviews, quotes, and questions about the logo or these guidelines, including permission for a use this page does not cover. You can also ask about logo use in an issue on GitHub. Bug reports and questions about using Bascik belong there too, not in email.

Brand Guidelines

The sections below cover logos, colors, naming, image sizes, and usage. Following them keeps Bascik recognizable and accurately represented wherever it appears.

Logos

Bascik has two logos. Both are skewed lime tiles with an ink cursor, and both are supplied as static artwork.

• Wordmark. The tile with the cursor and the name BASCIK. Use it whenever there is room, because it names the project.
• Mark. The tile with the cursor only. Use it where a square or very small image is required, such as avatars, favicons, and app lists, and only after the wordmark or the name "Bascik" has appeared nearby.

Color Versions

Use the full-color logo unless you are limited to one color. The black and white versions are a solid tile with the cursor and letters cut out, so the background shows through them. On a plain white background, give the full-color logo a little extra clear space so the lime tile reads as a shape.

Spacing and Minimum Size

Keep clear space of at least one quarter of the logo's height on every side of the wordmark and the mark. The height is that of the whole tile (lime, black, or white), not of the letters inside it: a wordmark shown 48 px tall needs 12 px of clear space on each side. Keep text, other logos, and the edges of images, cards, and buttons outside that space.

The SVG and PNG files in the kit are cropped to the artwork, with no space around the tile, so whoever places a file adds the clear space as padding or margin. Never place a file edge to edge in a container with rounded corners, a border, or clipped overflow: the container cuts off or covers the tile's sharp corners. Pad the logo inside the container by at least a quarter of its height instead.

Every PNG is larger than the smallest size on screen, so scale a PNG down, never up. A favicon or profile picture fills its own small square, so the edge of that square is the edge to keep clear of: start from an avatar file, which already keeps more than a quarter of the mark's height clear on every side, rather than from the cropped mark.

Colors

Ink on Lime has a contrast ratio of 16.9:1, and Lime on Charcoal has 15.5:1. Both pass WCAG AAA for body text.

Naming and Description

Write the name as Bascik in running text: capital B, lowercase rest. The all-caps BASCIK appears only inside the wordmark artwork. The main npm packages are @bascik/bascik and create-bascik; the language server is @bascik/language-server, and the deployment adapters are @bascik/adapter-cloudflare and @bascik/adapter-netlify.

The tagline is HTML components. Zero runtime.

Use this description when you need a short, accurate summary of the project:

Bascik is a build tool for HTML components with automatically scoped CSS and JS. Zero runtime. The code that ships is the code you wrote.

Official links:

• Website: https://bascik.dev
• Source and issues: https://github.com/bascikdev/bascik

Image Sizes and Resolutions

Use the SVG whenever the destination accepts it. SVG is resolution independent, so it stays sharp at any size. When you need a raster image, pick the file that matches the destination:

The profile pictures keep the mark well inside the frame, so circular crops do not clip it.

PNG exports are rendered at 1x. For sharp results on high-density screens, display a PNG at half its pixel width, for example a 2400 px file shown at 1200 CSS px.

Platforms change their recommended sizes from time to time. If a destination needs something different, scale the SVG instead of stretching a PNG.

Using the Logo

How to Use the Logo

These uses are fine without asking, as long as you follow the rules on this page:

• Link to the Bascik website or GitHub repository.
• Show that your tool, template, starter, or product has built-in Bascik support. The claim must be accurate and made in good faith.
• Illustrate an article, tutorial, talk, video, podcast, book, or course about Bascik.
• Promote a meetup, workshop, or conference that is about Bascik.
• Show your experience with Bascik in a portfolio, resume, or personal site.

Things to Avoid

• Do not use the Bascik logo as the icon or logo of your own app, website, or company.
• Do not include the Bascik logo inside your own logo.
• Do not modify the logo. That includes recoloring it, changing its proportions, rotating or skewing it further, adding shadows, outlines, gradients, or other effects, cropping it, or retyping the wordmark in another typeface. Use the supplied artwork.
• Do not place the logo on a background that makes it hard to see.
• Do not use the logo in a way that suggests Bascik, or anyone who contributes to it, sponsors or endorses your product, service, event, or organization.
• Do not sell products that feature the logo, such as stickers or shirts, without permission.

If you want to do something this page does not cover, ask first: see Contact.

The Bascik software is licensed under the MIT License. The license does not grant rights to use Bascik's names, logos, or trademarks.