Brand guidelines

This page collects the ExpTech Studio logo files, usage, colors, and fonts. Write the English name as ExpTech Studio (short name: ExpTech). The Chinese name is 探索科技.

Logo

Horizontal logo

The chip mark with the ExpTech Studio lettering. Use the transparent version on light backgrounds and the white-background version on dark backgrounds.

Light background

ExpTech_Studio.webp1600 × 600 px · WebP · 13.5 KB · Background: transparentDownload

Dark background

ExpTech_Studio_white.webp1600 × 600 px · WebP · 11.2 KB · Background: whiteDownload

Square icon

Comes with its own dark gray background, so it stays clear on light and dark backgrounds. It's the icon at the top left of this site's navigation bar.

Light background

exptech.webp200 × 200 px · WebP · 1.8 KB · Background: dark gray (#424242)Download

Dark background

exptech.webp200 × 200 px · WebP · 1.8 KB · Background: dark gray (#424242)Download

Favicon

The chip mark only, on a transparent background. Use it at small sizes, such as browser tabs. Shown below at actual size.

Light background

favicon.ico32 × 32 px · ICO · 4.2 KB · Background: transparentDownload

Dark background

favicon.ico32 × 32 px · ICO · 4.2 KB · Background: transparentDownload

You can download the original file under each preview. Only raster images are available (WebP and ICO). There is no vector file. If you need a vector file or another size, contact us.

Clear space

xHx

• Minimum clear space
• Logo artwork bounds

Keep at least a margin of x around the logo. x is 20% of H, the height of the logo artwork. The horizontal logo files already include enough margin. Using the whole image, without cropping it further, meets the requirement.

Usage

• 

  DoUse the transparent version on light backgrounds

• 

  DoUse the white-background version on dark backgrounds, and keep the white plate

• 

  Don'tStretch or squash it out of its original proportions

• 

  Don'tChange the logo colors

• 

  Don'tAdd effects such as shadows or outlines

• 

  Don'tPlace it on a busy background

• 

  Don'tPlace the transparent version directly on a dark background

Keep the original proportions and colors. Do not add effects, and do not place it on a busy background. There is no version with light-colored lettering yet. On a dark background, use the white-background version or the square icon.

Color

The primary brand color is violet, with a cool neutral gray. Light mode and dark mode each have their own values. The values below stay in sync with the site styles. Click a value to copy it.

Semantic colors

• Brand primary--primary

  Light modeoklch(0.55 0.22 285)Copy#6c50e9Copy

  Dark modeoklch(0.65 0.2 285)Copy≈ #8776ffCopy

• Text on primary--primary-foreground

  Light modeoklch(0.99 0 0)Copy#fcfcfcCopy

  Dark modeoklch(0.99 0 0)Copy#fcfcfcCopy

• Background--background

  Light modeoklch(0.988 0.002 247)Copy#fafbfcCopy

  Dark modeoklch(0.18 0.02 265)Copy#0d111bCopy

• Card--card

  Light modeoklch(1 0 0)Copy#ffffffCopy

  Dark modeoklch(0.22 0.02 265)Copy#161b24Copy

• Text--foreground

  Light modeoklch(0.145 0.01 265)Copy#080a0eCopy

  Dark modeoklch(0.96 0.01 265)Copy#eef2f9Copy

• Secondary text--muted-foreground

  Light modeoklch(0.45 0.02 265)Copy#505561Copy

  Dark modeoklch(0.65 0.02 265)Copy#898f9cCopy

• Border--border

  Light modeoklch(0.92 0.01 265)Copy#e1e5ebCopy

  Dark modeoklch(0.32 0.02 265)Copy#2e333dCopy

• Error and danger--destructive

  Light modeoklch(0.58 0.22 25)Copy#df202eCopy

  Dark modeoklch(0.6 0.2 25)Copy#de3b3dCopy

Colors marked ≈ are outside the sRGB gamut, so the HEX value is the closest approximation. Use OKLCH when you need exact colors.

On the web, use CSS variables (for example var(--primary)). Do not hard-code color values, so light and dark mode can switch on their own. Text and background need enough contrast to meet the WCAG accessibility standard.

Color scales

Violet scale--color-accent-*

1. 50≈#f3f4ff0.97 0.018 285
2. 100≈#e8e8ff0.94 0.04 285
3. 200≈#d1d1ff0.88 0.08 285
4. 300≈#b5b1ff0.8 0.13 285
5. 400≈#988dff0.71 0.18 285
6. 500≈#8776ff0.65 0.2 285
7. 600#6c50e90.55 0.22 285
8. 700#593bcc0.48 0.21 285
9. 800#452aa20.4 0.18 285
10. 900#3321780.33 0.14 285
11. 950#1f154e0.25 0.1 285

Neutral gray scale--color-gray-*

1. 50#f9fafc0.985 0.003 265
2. 100#f1f3f80.965 0.006 265
3. 200#e1e5eb0.92 0.01 265
4. 300#cdd1d90.86 0.012 265
5. 400#999ea90.7 0.016 265
6. 500#6c727e0.55 0.02 265
7. 600#5055610.45 0.02 265
8. 700#2e333d0.32 0.02 265
9. 800#1d222b0.25 0.02 265
10. 900#12161f0.2 0.02 265
11. 950#080a0e0.145 0.01 265

Colors marked ≈ are outside the sRGB gamut, so the HEX value is the closest approximation. Use OKLCH when you need exact colors.

Tailwind accent-* (for example bg-accent-600) and gray-* map to these two scales.

Fonts

• 36 px · 700Real-time earthquake monitoring
• 24 px · 600ExpTech Studio 探索科技
• 16 px · 400Get earthquake reports, real-time station data, and SSE real-time streams from the ExpTech API.
• 16 px · 400Traditional Chinese地震報告、即時測站資料與 SSE 即時串流，都可以透過 ExpTech API 取得。
• 14 px · 400The quick brown fox jumps over the lazy dog. 0123456789
• Monospace · 14 pxcurl -sL "https://api.core.exptech.dev/api/v2/eq/report?limit=5"

Aa200Aa300Aa400Aa500Aa600Aa700Aa800

Traditional Chinese and English pages

Plus Jakarta Sans VariablePlus Jakarta SansPingFang TCNoto Sans TCMicrosoft JhengHeiui-sans-serifsystem-uisans-serif

Japanese pages

Plus Jakarta Sans VariablePlus Jakarta SansHiragino SansNoto Sans JPYu Gothicui-sans-serifsystem-uisans-serif

Code

ui-monospaceSFMono-RegularSF MonoMenloMonacoConsolasLiberation MonoCourier Newmonospace

Latin letters use Plus Jakarta Sans (variable weight 200–800). Chinese and Japanese use the fonts built into each operating system. Code uses the system monospace font.

Permitted use

ExpTech Studio brand assets may be used only for the following:

• Official documentation and the website
• Community projects and tutorials
• Non-commercial display

For commercial use or any other special permission, contact us first.

Contact us

Email[email protected]

DiscordExpTech Studio

GitHubExpTechTW