Design System

This page lists every design token and component style used on the site. Tokens and component styles are defined in the site-wide stylesheet /_base.css (the site CSS in the admin system settings). When adding a page, reuse these classes and tokens instead of introducing new color values or sizes.

Logo

The logo comes in two versions; its shape and proportions must not be altered. Use the full-color version on light backgrounds, and the reversed version on dark navy (footer, dark sections) with the star kept in gold. Keep clear space at least the height of the star, and never add shadows, outlines or place it over photos.

logo_url Full color: white and light backgrounds, used in the header.

footer_logo_white Reversed: dark navy backgrounds, used in the footer.

Color

The primary color is --jun-blue-700 #0048A0, used for links, primary buttons, active states and icons. Gold is an accent only: the logo star, the short rule under headings, the active menu underline, and the single highlight button on a page. Gold is never used as text color on white.

Jun Star Blue

--jun-blue-950#04204A

--jun-blue-900#062A5C

--jun-blue-800#073070

--jun-blue-700#0048A0

--jun-blue-600#1358B8

--jun-blue-500#3D72C4

--jun-blue-400#7E95C4

--jun-blue-300#A8B8D0

--jun-blue-200#CFDCEC

--jun-blue-100#E1EAF6

--jun-blue-50#EFF5FA

Jun Star Gold

--jun-gold-700#9A7A05

--jun-gold-600#D9A80B

--jun-gold-500#F5C518

--jun-gold-300#F9D95E

--jun-gold-100#FDF3D0

Semantic — Brand

--brand-primary#0048A0

--brand-primary-hover#073070

--brand-primary-active#062A5C

--brand-accent#F5C518

--brand-accent-hover#D9A80B

--rule-accent#F5C518

Semantic — Surfaces & Borders

--surface-page#FFFFFF

--surface-subtle#F0F6FA

--surface-tint#E8F0F8

--surface-brand-subtle#EFF5FA

--surface-dark#08234B

--surface-footerGradient

--border-hairline#DCE5F0

--border-strong#C2CEDF

--border-control#7F8FA9

Semantic — Text

--text-heading#10264F

--text-title#073070

--text-body#42506A

--text-muted#5F6E88

--text-link#0048A0

--text-ondark-muted#B7C4DA

Neutral Steel (for photo surroundings; use the text tokens above for UI text)

--steel-950#0B0D0F

--steel-900#16191D

--steel-800#22272D

--steel-700#3A4048

--steel-600#545C66

--steel-500#6B7480

--steel-400#909AA5

--steel-300#B9C0C8

--steel-200#D8DDE3

--steel-100#EDF0F3

--steel-50#F7F8FA

--steel-0#FFFFFF

Typography

Chinese and most Latin text use Noto Sans TC. Every size has a matching line height and letter spacing; specs, dimensions and dates always use the monospaced IBM Plex Mono. Chinese body text keeps a line height of at least 1.8.

--text-hero
clamp(38–60px) / 1.24
700 · +.02emPrecision Manufacturing Global Service

--text-h2
clamp(28–38px) / 1.3
700Core Services

--text-h3
24px · 700Advanced Machinery

--text-h4
20px · 700Our Philosophy

--text-lead
17px / 1.9Integrating precision machining technology to provide diversified component manufacturing services.

--text-body-size
16px / 1.8Jun Star specializes in precision component manufacturing, following the ISO 9001 quality management system with process and quality control at every step.

--text-small
14pxChemical-resistant, high-strength process consumables and precision parts for semiconductor equipment.

--text-caption
13pxHigh accuracy · High stability

--font-mono
IBM Plex Mono1100 x 600 x 600 mm ・ 10,000 RPM ・ (4+5L/1000) μm

Spacing

Based on a 4px unit. Maximum layout width --page-max 1240px, side padding --page-pad 32px, section spacing --section-y clamp(64px, 7vw, 104px), card padding --card-pad 24px.

Radius & Shadow

The overall look is squared-off, echoing machined parts: 4px for buttons, controls and QC labels, 2px for tags and small badges, 8px for cards and images. No pill shapes. Shadows are always soft near-black, and cards at rest have almost none.

Radius

--radius-xs2px

--radius-sm · control4px

--radius-md · card8px

--radius-lg12px

Shadow

--shadow-1

--shadow-2

--shadow-3

--shadow-4

Gradients

Gradients are functional only, never decorative: the footer background, protective scrims for text over photos, and edge fades that blend full-width photos into color bands. Edge fades are solid overlay elements rather than CSS masks.

--surface-footerFooter

--scrim-heroHero scrim

--scrim-bottomCaption scrim

--fade-subtle-rightLight-blue edge fade

--fade-page-rightWhite edge fade

Components

These are the component styles used on the site; copy the matching classes directly.

Buttons .btn.btn--solid / .btn--outline / .btn--sm

Learn More

View Details

Buttons on dark .btn--accent (one per page, only in the closing navy band) / .btn--ondark

Learn More

Icons icons (layout variable, SVG inlined as data URIs with colors baked in)

QC process .qc-chain

IQC Incoming Quality Control
IPQC In-Process Quality Control
FQC Final Quality Control
OQC Outgoing Quality Control

Service card .svc-card and machine card .machine + .spec

Standard ServicesIntegrating precision machining, surface treatment and assembly to deliver stable, reliable manufacturing.View Details

CNC Vertical Machining Center (Agma VMC-199)

Travel: 1100 x 600 x 600 mm
Spindle speed: 10,000 RPM
Quantity: 1 Unit

Feature strip .feature and numbered list .indus__list

Precision Machining
High accuracy · High stability

01Semiconductor Equipment Parts
02Industrial Equipment Parts
03Custom Metal Machining

Motion

Always use --ease-standard cubic-bezier(.4,0,.2,1). No bounce, no parallax, no autoplaying animation. Cards lift 4px on hover and scale to --press-scale .985 when pressed.

80ms

--dur-instant

Press

150ms

--dur-fast

Color / border

220ms

--dur-base

Card lift

400ms

--dur-slow

Image zoom

700ms

--dur-reveal

Reveal