Raksul DESIGN.md

Design System Inspiration of Raksul

Overview

Visual Theme & Atmosphere

Raksul is a Japanese online printing and customer-acquisition platform. It connects orders to spare capacity at partner printing companies, and also offers newspaper inserts and posting services. Its company history records establishment in September 2009 and the launch of the printing and customer-acquisition platform in March 2013. Official service description, history.

The corporate identity connects that business to printing history. In its September 2021 logo announcement, Raksul described retaining the B42 lettering behind its R symbol while refining its shape for visibility across sizes and applications. The uppercase corporate logotype was intended to convey stable quality; rounded letterforms and space express approachability and openness. Those are documented corporate-logo intentions, distinct from the measured storefront's interface typography. Official logo announcement.

The live storefront is dense, white and practical: a wide search field, two compact account actions, blue navigation, a left product directory, promotional imagery and a three-column product grid. The measured account pair gives that density a clear hierarchy: blue #0264bf for login and orange #e7560d for registration. Product prices use cyan #009fe7 on very light grey cards. This is an interpretation of the captured homepage, rather than a published brand principle.

The product continues to expand around the preparation of print work. Raksul's June 2026 announcement introduced a design-production service for enterprise customers, with editable delivered designs and templates shared across locations. That provides current product context; the component measurements below come from the public storefront. Official announcement.

The measured homepage is the Japanese storefront at raksul.com/, with HTML lang="ja"; the capture did not redirect to another regional edition.

Brand Narrative

Raksul's stated vision is “仕組みを変えれば、世界はもっと良くなる” — changing systems can make the world better. Its corporate site connects that vision to bringing the internet into traditional industries. The B42-derived corporate symbol gives the printing business a historical reference, while the present storefront puts search, prices and specifications close together. Corporate site, logo announcement.

Principles

For an implementation based on this measured surface, distinguish account actions by colour, expose product details alongside prices, and keep product panels flat. These are design observations from the homepage. The corporate logo's documented intentions are stable quality, approachability and openness. Official logo announcement.

Personas

No persona study was opened; no persona model is inferred from this capture.

Colors

These names describe measured reference roles. Raksul did not expose a global first-party colour-token scale in the captured custom-property census. The values below come from computed product controls, their children and the rendered census, rather than from framework or widget variables.

The paragraph census is mixed: rgb(0, 159, 231) appears on 73 paragraphs, black on 59 and white on 6. The cyan count includes price paragraphs; it should not replace black as the descriptive-copy colour. Census totals also include embedded content and are not a clean brand palette.

Typography

Official product use: no opened first-party source names a storefront text face. The official logo announcement documents B42 in the corporate symbol; that establishes logo context, without establishing an interface-font role. B42 was not in the live loaded-face list and receives no specimen.

Live-loaded: the census reports Roboto 400 normal, Roboto 700 normal, and kamii-icon normal normal. Roboto is the only text family promoted to the family token. A measured product-card container declares Roboto; the capture does not establish the font rendering each Japanese glyph. Roboto's serving URL was not resolved by this census. The icon face has an @font-face source list containing relative @raksul/kamii-icon/dist/kamii-icon.woff2 and .woff URLs; it is an icon resource, with no text-family role.

Official distributed assets: no font distribution or licence page was opened and verified.

Declared-only faces and stack context: body and h1 declare Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, Arial, sans-serif; Roboto's loaded status is established above. The census's button declaration is "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, Arial, sans-serif. The measured header controls declare Hiragino Kaku Gothic ProN. Those Japanese families and Arial were absent from the loaded-face list and receive no specimen. A KARTE ranking control also declares Noto Sans JP; it is excluded with that embed and was not reported loaded.

Unresolved: Japanese glyph-level rendering, Roboto's serving mechanism and storefront font licensing. Substitute: none chosen.

The loaded 700 face does not prove that the measured 600 declarations use a separately loaded 600 face. No heading scale is inferred from these controls.

Layout

The captured desktop has a sticky header measured at 1440 × 109px. Search and account controls form its upper row; service navigation occupies the next row. The first-party root property --width-container-outer is 1156px; this is a declared container setting, rather than a measurement of every rendered section.

The survey places a 220px-wide left directory at x=158 and an 880px main heading/link at x=402. Popular-product cards begin at x=402, 698 and 995, each approximately 287.5px wide. Preserve the distinction between the left directory, the promotional region and the product grid when using this desktop composition as a reference.

Responsive Behavior

Only the 1440 × 1000 desktop viewport was measured; mobile layouts, breakpoints and touch states are unverified.

Elevation & Depth

The six selected product controls are shadowless at rest. The search assembly has a 1px solid #c0c7d1 border on an ancestor. The measured account actions use a 4px radius; the navigation link and product card are square. No general elevation scale was verified.

Motion & Easing

The design-navigation link's raw computed transition is all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s; the business-card link's is all 0.1s linear 0s. These are declarations captured at rest. The card's transition does not establish its unmeasured pointer-state effect. Signup, login, the search input and search category each report all 0s ease 0s at rest. No site-wide motion scale is inferred.

Components

The four declared components each have a measured authored state. The following dimensions are the observed desktop identities, rather than a responsive sizing prescription. All six selected controls have border: none and box-shadow: none on the element itself at rest.

The registration action is a link. Its hover background is #d14904; login uses #00529e. The search field changes to #eef0f4, and its category button to #8e98a3. Exact pressed and keyboard-focus observations appear in the States table.

Two further controls remain useful visual references in prose. The デザインサービス navigation link is 143.4 × 40px, square, with 12.8px 8px padding, a white background and blue label. Its container is 16px/400, while its visible label is 16px/600. Its only measured focus change was browser auto, and hover and press showed no computed change within the probe's comparison scope.

The 名刺 popular-product card link is 287.5 × 131px, square, with 9px padding, a #fafafa background and a 14px/400 container. Product-name and descriptive children are black; the price paragraph is #009fe7; the 10px/600 print-category label is #222222. Both state calls left its hover and press unmeasured. Its keyboard ring was browser auto, so it is absent from the structured component list.

States

The solid outlines disappear after blur; the probe records no persistent focus changes. Pressed results combine :active, pointer hover and the focus acquired on pointer down; they do not establish a separate active-only colour rule. For the navigation link, “no compared change” covers self, its pseudo-elements, one descendant and its pseudo-elements, and three ancestor levels with pseudo-elements. The comparison includes colours, border, drawn outline, shadow, opacity, transform, filter, visibility, size, text decoration, backgrounds, masks and image/SVG attributes. It does not establish pixel-level absence of change outside that scope.

Disabled states were not captured as measured states.

Do's and Don'ts

• Use the measured blue login and orange registration pair with white labels and compact 32px heights.
• Keep price cyan separate from black product descriptions.
• Preserve the search assembly's asymmetric corners and the distinction between container and visible-label typography.
• Retain the solid authored focus ring on the three controls where it was measured.
• Exclude Tailwind internals, KARTE rankings, the survey popup and chat widgets from the product-token palette.
• Leave unavailable font faces without specimens. Substitute: none chosen.

Voice & Tone

The captured labels are task-specific: “商品一覧”, “デザインサービス”, “印刷テンプレート”, “再注文・増刷” and the search examples “チラシ、Tシャツ、ダンボール”. Product cards combine the product name, quantity, price, tax notation and print specifications. Use that concrete information hierarchy as the writing reference; no separate voice guideline was verified.

Agent Prompt Guide

“Create a Raksul storefront header using the measured 32px account actions: a 100px orange registration link at #e7560d and a 79.2px blue login button at #0264bf, both with white 14px/600 labels and 4px corners. Darken their hover backgrounds to #d14904 and #00529e; preserve the measured solid focus outline. Keep Japanese font selection unresolved. Substitute: none chosen.”

“Build a product-information layout using square #fafafa panels, black descriptions and #009fe7 price paragraphs. The measured card identity is 287.5 × 131px with 9px padding. Card hover and pressed behaviour remain unspecified.”

Governance

Known Gaps

• Contrast, signup-link. Text #ffffff on #e7560d measures 3.66:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, search-category. Text #ffffff on #a6afba measures 2.22:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.