OrangeRed 100
--brand-orangered-100#F47836
Mitutoyo design system
Implementation proof
Use this style guide when creating or updating Mitutoyo reporting pages, digital publications, templates, interface components, or supporting documentation. It provides practical, reusable foundations for consistent branded work.
Start with the core rules for logos, colors, and typography, then use the documented components, spacing, and graphical elements as restrained accents. When unsure, prioritize clarity and reuse existing tokens and assets instead of introducing one-off styling.
Mitutoyo logos
Approved regular Mitutoyo artwork, provided in safe-zone and cropped variants.
Colors
Brand primitives are kept separate from semantic interface roles.
OrangeRed 40
--brand-orangered-40#FBC9AF
OrangeRed 20
--brand-orangered-20#FEF1EB
Black K100
--brand-black-k100#000000
Dark gray K80
--brand-dark-gray-k80#58595B
Black K50
--brand-black-k50#808080
Light gray K10
--brand-light-gray-k10#E6E6E6
White
--brand-white#FFFFFF
Semantic color applications
Use brand primitives through these documented roles for backgrounds, text, borders, and informational states.
Backgrounds
Keep surfaces quiet so content remains readable.
Aa
--brand-whitePage default
White
Default page canvas.
Aa
--color-surface-specimenSubtle
K10 25%
Quiet UI and specimen surfaces.
Aa
--brand-light-gray-k10Surface default
K10
Standard neutral surfaces.
Aa
--color-surface-highlightSurface raised
OrangeRed 10%
Gentle accent or raised surface.
Aa
--brand-black-k100Inverse
Black
Inverse or high-contrast contexts.
Text
Assign text color according to information hierarchy.
Aa
--color-textPrimary
K100
Headlines and body copy.
Aa
--color-text-secondarySecondary
K80
Captions, metadata, and supporting information.
Aa
--color-text-mutedMuted
K10
Low-emphasis or disabled labels.
Aa
--color-text-inverseInverse
White
Text on dark or colored surfaces.
Borders
Borders support structure without competing with content.
Aa
--color-border-subtleSubtle
K10
Quiet dividers.
Aa
--color-borderDefault
K80
Standard component outlines.
Aa
--color-border-strongStrong
K100
High-emphasis frames.
Aa
--color-border-focusFocus
OrangeRed
Active or focus states only.
Aa
--color-border-inverseInverted
White
Borders on dark surfaces.
Information and status
Reuse brand and product-family colors; do not introduce a separate status palette.
Aa
--color-status-successSuccess
Image Measuring
5% surface; 100% text and border.
Aa
--color-status-warningWarning
OrangeRed
5% surface; 100% text and border.
Aa
--color-status-errorError
Measuring Tools
5% surface; 100% text and border.
Aa
--color-status-infoInfo
K10 / K100
K10 25% surface; K100 or K80 text; K100 border.
Product families
Coordinate measuring machine
#003291 · #8B98BA · #BEC3D6
Precision sensor
#96961E · #C4C595 · #E0E0C4
Image measuring machine
#006432 · #83B4A8 · #BCD6CB
Testing and measuring instruments
#C85F5F · #DAB2A8 · #EDD4CB
Shape measuring machine
#0082BE · #87BCD4 · #C0DBE6
Scale unit
#9B3264 · #C1A7B6 · #DDCFD5
Optical instrument
#329664 · #AACBAF · #D1E3D1
Measuring tools, standards & systems
#CD0000 · #DC9F88 · #EDCBB9
Typography
Mitutoyo Frutiger is loaded locally in Light, Roman, Bold, and Black. Desktop values match Figma; responsive heading interpolation remains provisional until viewport modes are formally specified.
Outline tagFilled tag
Body XL
--font-size-copy-xl / --line-height-copy-xlLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Body L
--font-size-copy-l / --line-height-copy-lLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Body M
--font-size-copy-m / --line-height-copy-mLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Body S
--font-size-copy-s / --line-height-copy-sLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Small info
--font-size-small-info / --line-height-small-infoLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Footnote
--font-size-small-footnote / --line-height-small-footnoteLight
Mitutoyo reporting
Roman
Mitutoyo reporting
Bold
Mitutoyo reporting
Black
Mitutoyo reporting
Buttons
Native links and buttons provide real hover, focus-visible, and disabled behavior. Demonstration columns below hold each visual state for comparison.
Navigation links
Reusable navigation link containers for desktop, tablet, and mobile menus.
Graphical elements
Approved non-CTL elements extracted from the supplied Figma selection.
Text link with arrowLayout tokens
Shared container and prose widths used across site chrome, reports, and legal pages.
.site-container- Page shell: max 1280, centered, hor-padding per breakpoint
--layout-shell-max- 80rem (1280) — site max width
--layout-gutter- Hor-padding by band: 20 (≤767) · 40 (768–1080) · 48 (≥1081)
--layout-max-width- 80rem (1280) — alias of shell max
--layout-prose-width- 50rem — report/legal rich text body
--layout-gutter-wide- 6rem — wide layout gutter token
--report-block-gutter- Class
.report-block-gutter— horizontal pad inside full-bleed report shells
Production components not shown here: SiteHeader, SiteFooter, HomeHero, ReportCard, ReportListCard, MinimalPageHeader, and report blocks — see live pages orsample report.
Spacing and styling
A shared scale prevents page-specific spacing and decoration values.
--spacing-22px
--spacing-44px
--spacing-88px
--spacing-1212px
--spacing-1616px
--spacing-2424px
--spacing-3232px
--spacing-4040px
--spacing-4848px
--spacing-6464px
--spacing-8080px
--spacing-9696px
--spacing-128128px
Border radii
S · 4px
M · 8px
L · 16px
XL · 24px
Stroke widths
Subtle · 0.5px
Hairline · 1px
Thick · 2px
Opacity
Disabled · 40%
Overlay · 70%