Design System Inspiration of Loglass (ログラス)
1. Visual Theme & Atmosphere
Loglass makes management-accounting software — budgeting, forecast-versus-actual and planning for
finance teams that otherwise live in spreadsheets. The company, 株式会社ログラス, was founded on
30 May 2019, and states its mission in a sentence that picks a fight with its own field:
「管理会計100年の歴史に終止符を打ち、新しいデータ経営の在り方を生み出す。」 — end a hundred years
of management accounting as it has been done, and create a new way to run a company on data.
The product's name simplified on the way to market. It went into closed release in April 2020 as
「コーポレート・インテリジェンス・クラウド・ログラス」 — Corporate Intelligence Cloud Loglass —
already paid for by more than ten companies, and on 8 July 2020 it launched publicly as, simply,
Loglass. Today the flagship is Loglass 経営管理, with siblings for workforce planning, IT
investment and capital expenditure.
The site looks like the finance tool it sells: white and cool-gray surfaces, a near-black ink
#171725 on 588 elements, one confident blue #2352c8 on every filled call to action,
and orange #e77623 held back for accent — most visibly as a ring that snaps around the demo
card when you point at it. Buttons are square-shouldered at 4px while badges and pills go fully
round.
What makes it worth reading:
- A role layer over the ramps.
--color-cta-primary, --color-text-link,
--color-surface-warning — the page never asks for "blue 8", it asks for a job.
- A chart palette as tokens.
--color-chart-categorical-1 to -11, alternating strong and
pale steps of five hues, for a product whose output is charts.
- Shadows named for what casts them —
--shadow-cta-card, --shadow-resource-card,
--shadow-ai-hero — 22 of them.
Primary tasks
- Download the product overview; book a demo; contact sales.
- Browse the product suite and solutions.
2. Color Palette & Roles
Measured with getComputedStyle on loglass.jp: 309 custom properties. Tailwind v4's are
excluded — 69 --tw-* runtime variables, --default-*, the stock --ease-* curves,
--font-sans, the stock --container-3xl/4xl/6xl/7xl, --spacing, --blur-sm and
--aspect-video. About 225 remain, Loglass's own.
Many of Loglass's theme tokens are declared twice: in Tailwind's @layer theme as a placeholder
that refers to itself (--text-xs: var(--text-xs)), and again in an unlayered :root rule that
holds the value and wins the cascade. The values below are the resolved ones.
Blue — the action
Ramp --color-blue-1 … -10. The steps in use:
- Primary (
#2352c8) — blue-8. --color-cta-primary, --color-bg-brand,
--color-text-brand and --color-text-link. Every filled button on the home page (13
elements).
- Primary Hover (
#1337a1) — blue-9, --color-cta-primary-hover and --color-text-active.
- Primary Deep (
#062073) — blue-10.
- Primary Surface (
#eef5ff) — blue-2, --color-surface-active and --color-bg-blue-lighter.
- Primary Tint (
#f8fafd) — blue-1, --color-bg-blue-light.
- Chart Blue Light (
#d5e4fb) — blue-3, the second chart step.
Neutral — ink and surface
Ramp --color-neutral-0 … -10, cool and slightly violet.
- Foreground (
#171725) — neutral-10, --color-text-primary and --color-bg-primary. Body
text, by a wide margin.
- Text Normal (
#3f3f4a) — neutral-9, --color-text-normal.
- Text Secondary (
#6c6c7f) — neutral-7, --color-text-secondary and -annotation
(112 elements).
- Text Placeholder (
#9090a1) — neutral-6.
- Disabled (
#b5b5be) — neutral-5, --color-text-disabled, --color-surface-disabled and
--color-border-hard.
- Border (
#d5d5dc) — neutral-4, --color-border-medium and -divider.
- Muted (
#f1f1f5) — neutral-2, --color-bg-muted, --color-border-soft and
--color-surface-secondary; the second most-painted background (36).
- Surface (
#fafafb) — neutral-1, --color-bg-surface.
- Canvas (
#ffffff) — neutral-0.
- Night (
#000c2a) — --color-darkblue-10, the dark hero ground.
Orange — the accent
- Accent (
#e77623) — orange-6, --color-cta-accent. Seen once as a fill; mostly it is the
3px hover ring on the demo card.
- Accent Hover (
#c3540a) — orange-7, --color-cta-accent-hover, and also
--color-text-warning.
- Warning Surface (
#fff2de) — orange-2, --color-surface-warning.
Status
Info #026572 (--color-text-info, turquoise-8) on #f0f7ff (--color-surface-info) ·
Success #108a10 (green-7) on #eafbe5 (green-2) · Danger #d3403a
(--color-text-error and --color-border-error, red-7) on #ffede9 (red-2).
Chart
--color-chart-categorical-1 … -11: blue-8 #2352c8, blue-3 #d5e4fb, turquoise-6
#29a4b3, turquoise-3 #bfebef, green-6 #37ac32, green-3 #cdecc6, orange-6
#e77623, orange-3 #ffdebf, red-6 #ee6e66, red-3 #ffdbd4, neutral-5 #b5b5be. Each hue
appears as a strong step and a pale step, so paired series read as related.
Campaign namespaces
-summit — the company's annual 経営企画サミット (Loglass Keiei Kikaku Summit):
--color-summit-cta-start #ff1fb8 · -cta-end #ff0004 · -keynote #ef59d6 · -focus
#46b3ed · -solution #52c57e. They appear on the summit's own page, inside gradient-filled
headline text, not as flat fills.-lp — --color-orange-lp #fa7d19, --color-red-lp #ff4b4b, --color-gold-lp #cfb946
and others, with --shadow-lp-* and --gradient-lp-* beside them; where they render was not
confirmed.-ai — --color-blue-ai-light #67bcff with --shadow-ai-block (rendered twice on the home
page) and --shadow-ai-hero.
None of these is recorded as a brand token.
3. Typography Rules
Font family
Noto Sans JP is the only loaded webfont — 400, 500, 700 and 900, self-hosted from
/_next/static/media/ — and the body and buttons compute to it.
The token set declares more than renders:
--font-heading names Montserrat, and @font-face rules for it ship in the stylesheet, but
it did not load on the home page. The home page <h1> computes to the
--font-yugothic stack — YuGothic, 游ゴシック体, 游ゴシック, "Yu Gothic" — an operating-system
face, not recorded as a brand font.--font-accent names Libre Baskerville; not loaded.--font-mono resolves to "avenir-next-lt-pro","Avenir Next",sans-serif — a sans, under a
monospace name; not loaded.
Only Noto Sans JP is a font fact here. The others are declared names.
Scale
--text-xs 12 · sm 14 · base 16 · lg 18 · xl 20 · 2xl 24 · 3xl 32 · 4xl 40 ·
5xl 48 (the home page h1) · 6xl 60 · 8xl 96. Leading is set in percentages —
--leading-tight 130% · -snug 140% · -normal 170% · -relaxed 180% — generous for Japanese
text. Tracking is small and positive: --tracking-tight 0.24px, -normal 0.28px, -wide
0.36px, -wider 0.4px. Weights are tokenised 300 to 900.
4. Component Stylings
Four controls declared, every state on its own page load, focus read before the mouse moved.
- Primary —
#2352c8, white 14px/700, 4px radius, 40px, 6px 12px, a two-layer hairline
shadow rgba(0,0,0,0.1) 0 1px 3px, rgba(0,0,0,0.1) 0 1px 2px -1px. Hover and press deepen it to
#1337a1.
- Secondary — transparent with a
#d5d5dc border and #171725 label. Hover fills
#f1f1f5 and darkens the border to #b5b5be.
- Demo card —
#ffffff with a translucent white 3px ring (--shadow-cta-card,
0 0 0 3px #ffffff80). On hover the ring turns solid #e77623 — --shadow-cta-card-hover,
matched exactly.
- Navigation link —
#171725 14px/600, 44px. Hover turns the label #2352c8. The link
colour has no resting use on the home page; this is where it shows.
Two further controls were measured and are not declared: a white 詳しく見る link on the dark hero,
which changes none of the seven measured values on hover, and a white announcement-bar link that
fades to opacity 0.9.
Focus is the browser's
Every measured control shows outline: rgb(0, 95, 204) auto 1px under :focus-visible —
Chrome's default ring. No focus colour is recorded.
Radius
--radius-sm 4 · -md 8 · -lg 8 (the same value) · -xl 12 · -2xl 16 · -full 9999.
Rendered: 9999px ×52 (pills, badges, avatars) · 4px ×28 (buttons) · 8px ×24 ·
8px 8px 0 0 ×6 (card headers) · 12px ×3. A 6px radius appears 9 times and is not on the
scale.
5. Layout Principles
--container-max, --container-header and --container-padding sit beside Tailwind's stock
container sizes.--btn-section-list-height is a single-purpose layout token.- Radius splits by role: buttons square-ish at 4px, content cards 8px, anything that is a label or a
person fully round.
6. Depth & Elevation
22 shadow tokens. The generic --shadow-sm/md/lg/xl are not seen rendered on the home page; the
named ones are:
--shadow-floating 0 0 32px 0 #1717252e, 0 0 8px 0 #17172514 — the most rendered (10), centred.--shadow-card 0 10px 30px -20px #17172533, 0 16px 30px -30px #17172533 (9) — two long, tight
shadows cast down, tinted with the ink rather than black; --shadow-card-hover lengthens them
and adds a 1px ink hairline.--shadow-cta-card / -hover — the 3px white and orange rings above.--shadow-ai-block 0 5px 50px -10px var(--color-blue-8) — a blue glow.
Shadows are tinted with #171725 or the brand blue, not with black, apart from the four generic
ones and the header button's hairline.
7. Do's and Don'ts
Do
- Ask for a role —
--color-cta-primary, --color-text-secondary — not a ramp step.
- Use
#2352c8 for filled actions and #e77623 sparingly, as an accent or a hover ring.
- Tint shadows with the ink
#171725.
- Use the categorical chart palette in its order.
Don't
- Don't count
--tw-*, --default-* or the stock containers as Loglass's.
- Don't render headings in Montserrat on the strength of
--font-heading; it did not load.
- Don't read
--font-mono as a monospace face.
- Don't treat
-summit or -lp colours as the product palette.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#2352c8 action · #1337a1 action hover · #171725 ink · #3f3f4a / #6c6c7f / #9090a1
text steps · #d5d5dc borders · #f1f1f5 / #fafafb / #ffffff surfaces · #e77623 accent ·
#026572 info · #108a10 success · #d3403a danger · #000c2a night
Example Component Prompts
- "A 40px button:
#2352c8, white 14px/700, 4px radius, 6px 12px; hover #1337a1."
- "A white card with a
0 0 0 3px #ffffff80 ring that turns 0 0 0 3px #e77623 on hover."
10. Voice & Tone
Not assessed as authored voice. 3,010 characters on the measured surface.
11. Brand Narrative
Loglass sells an argument against the spreadsheet — that a century-old discipline has been run on
tools not built for it. The product's first name said too much, and within three months it was cut
to one word. The site carries the same economy: a single blue for doing, an orange kept for the
moment of attention, and an ink that is nearly black but not quite.
Under the surface the token set is organised the way a finance team would want its own data
organised — by role, with the raw scales hidden behind names that say what each value is for, and
with the charts, which are the product's output, given their own palette.
12. Principles
- Name the job. Every colour in use reaches the page through a role token.
- One blue for action, one orange for attention.
- Charts are first-class. Eleven categorical steps, in order.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Four components declared, every state measured. The primary deepens to #1337a1; the secondary
fills #f1f1f5 with a #b5b5be border; the demo card's ring turns #e77623; navigation turns
#2352c8. Focus is the browser's auto ring throughout. No disabled state was observed;
--color-text-disabled / --color-surface-disabled #b5b5be exist.
15. Motion & Easing
Three --transition-* tokens are Loglass's; the two --ease-* curves are Tailwind's stock.
Durations on the measured controls were not recorded.
Tier 1 sources: https://loglass.jp/ (live product site — 309 custom properties read via getComputedStyle, Tailwind v4 excluded; six controls measured at rest, hover, pressed and focus, four declared; only Noto Sans JP loaded, captured 2026-09-23); https://loglass.jp/zz-this-does-not-exist (nonsense-path control — a real HTTP 404 with a 400-character body, establishing the host is not a catch-all, captured 2026-09-23); https://loglass.co.jp/company (会社概要 — 設立 2019年5月30日, read 2026-09-23); https://loglass.co.jp/about (mission 「管理会計100年の歴史に終止符を打ち、新しいデータ経営の在り方を生み出す。」, read 2026-09-23)
Regional sources: https://ascii.jp/elem/000/004/019/4019188/ (ASCII STARTUP, 2020-07-08 — public launch of Loglass after an April 2020 closed release as 「コーポレート・インテリジェンス・クラウド・ログラス」 with more than ten paying companies); https://prtimes.jp/main/html/rd/p/000000007.000052025.html (Loglass release on PR TIMES — public launch of Loglass together with an ¥80M seed round)