# POLARIS — Style Reference
> An electric-blue story-game storefront with concentric rings, cinematic photographs, and a white purchase seal floating above the page.
**Website:** [polaris.game](https://polaris.game/)
**Original URL:** https://polaris.game/
**Final URL:** https://polaris.game/
**Theme:** white structural surfaces, black typography and rules, saturated blue graphic fields.
**Inspected:** October 2, 2026, at 04:15 JST; supplied retrieval timestamp: October 1, 2026, at 19:15:03.605 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current homepage, including product showcases, an intervening media panel, the brand introduction, player comments, guide and social links, lower media sections, the photographic grid, and the footer. Product details, checkout, authentication, destination pages, and the opened mobile navigation were not inspected.
POLARIS combines a game-label identity with a working storefront. Its homepage gives large graphic and photographic panels most of the space, while shopping and informational links remain compact. The opening composition layers a dimensional, illustrated Inside Blue package over a deep violet-blue field, with a cropped bilingual title band crossing its center. A small product identifier sits near the upper-left corner. The contrast between this small label and the large artwork is fundamental to the hierarchy.
The rest of the page alternates photographic scenes, oversized concentric circles, narrow text bands, player testimonials, and ruled rectangular sections. White space is sometimes an entire grid cell. The purchase action is a pointed white seal that remains visible near the lower-right corner in multiple captures. Rounded cards, soft shadows, and conventional product-card grids are not the organizing system.
## How to Read This Reference
- **Measured** means a value comes from the supplied rendered DOM, element bounds, computed styles, or custom properties. These are measurements of the supplied browser inspection, not a separate live visit.
- **Estimated** means a value is visually approximated from the original-page screenshots. In particular, the deep hero blue is not present in the supplied computed-color records.
- **Calculated** means a relationship is derived from measured dimensions. A matching ratio does not establish the original CSS implementation.
- **Recommended** means an implementation choice for a new build. The CSS, breakpoint, accessible navigation example, and proposed animation timing below are adaptations.
- Named tokens are descriptive aliases unless explicitly identified as source properties. Computed font stacks establish declared families, but do not prove which font rendered every glyph.
- The desktop opening, middle, and footer captures and the mobile opening and footer captures establish appearance. DOM evidence also describes sections that are not fully visible in those screenshots; their unseen imagery and interactions remain unverified.
## Tokens — Colors
### Default Palette
| Name | Value | Evidence | Suggested token | Role |
| --- | --- | --- | --- | --- |
| Paper White | `#ffffff` | Measured: page and footer backgrounds; source `--color-bg` and `--color-body` | `--paper` | Navigation, testimonials, footer, negative space, and purchase seal |
| Graphic Black | `#000000` | Measured on navigation, product captions, and quote text; visually present in rings and rules | `--ink` | Main visible typography and graphic structure |
| Electric Blue | `#0000ff` | Measured on the guide tile background and social heading text | `--blue` | Guide panel and blue interface accents; the comments band visually uses a similar blue |
| Deep Product Blue | Approximately `#2600b5` | Screenshot estimate only | `--hero-blue` | Inside Blue showcase field; visibly darker and more violet than Electric Blue |
| Quiet Gray | `#bcbcbc` | Measured: testimonial author text | `--muted` | Names and occupations below comments |
| Default Text Gray | `#3a3a3a` | Measured body color; source `--color-text` | `--text-default` | Inherited theme text, overridden by black in many visible components |
| Body Text Gray | `#333232` | Measured copyright color; source `--color-body-text` | `--text-secondary` | Copyright and secondary inherited text |
**Keep the two blues distinct.** The saturated guide panel is exactly `rgb(0, 0, 255)` in the supplied measurements. The opening artwork sits against a different, darker violet-blue field. Using pure blue everywhere would flatten this distinction.
The pink skin tones, navy hair, cyan details, and muted green-gray photography belong to the imagery. They do not establish additional interface accent tokens.
### Theme Variables Versus Visible Design
The page exposes general commerce-theme properties such as `--color-border: #ebebeb`, `--color-sale-text: #EA0606`, and button colors based on `#3a3a3a`. Their presence does not establish their use in the captured homepage composition. Do not introduce red sale badges or pale card borders merely because those variables exist.
No selectable color theme or dark-mode interaction was demonstrated.
## Tokens — Typography
### Latin Utility Typography
**Declared computed family:** `neue-haas-grotesk-display, sans-serif`.
This family is specified for desktop navigation, product labels, the brand-introduction caption, the social heading, mobile navigation links, and copyright. Weight is `400` in the measured examples. The visual character is compact and neutral, allowing the artwork and circles to supply expression.
Use this family when available, with a sans-serif fallback. Do not substitute a heavy display face for all English labels.
### Japanese Body Typography
**Declared source stack:** `'Gothic Medium BBB', -apple-system, 'BlinkMacSystemFont', '游ゴシック', '游ゴシック体', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif`.
The computed body stack resolves the system-family portion to `system-ui`. The body uses `15px / 22.5px`, weight `400`. Player comments override this to `18px / 27px` with `-1px` letter spacing. Author lines are smaller and much lighter in color.
The supplied evidence does not independently confirm font-file loading or the Japanese fallback used for every mixed-script label.
### Serif Guide Heading
The measured `How to play POLARIS >` heading uses `TimesNewRoman, 'Times New Roman'`, weight `700`. This is an intentional typographic exception within the measured interface: a large, tightly tracked serif phrase within the blue guide tile.
Its desktop size is `65px`; mobile size is `33px`. Both use a `1.5` line-height ratio and approximately `-0.03em` tracking.
### Type Scale
| Role | Desktop | Mobile | Weight and tracking | Evidence |
| --- | --- | --- | --- | --- |
| Body default | `15px / 22.5px` | Same | `400`, normal | Measured |
| Desktop navigation | `17px` | Replaced by mobile navigation presentation | `400`, normal | Measured |
| Product and brand captions | `15px / 22.5px` | `14px / 21px` | `400`, normal | Measured |
| Large bilingual product title | Approximately `60–64px` | Approximately `28–30px` | Visually regular | Screenshot estimate; text-rendering method unverified |
| Player quote | `18px / 27px` | Same | `400`, `-1px` | Measured |
| Player name and occupation | `13px / 19.5px` | Same | `400`, normal | Measured |
| Guide heading | `65px / 97.5px` | `33px / 49.5px` | `700`, `-1.95px` / `-0.99px` | Measured |
| Social heading | `17px / 40px` | `17px / 47px` | `400`, normal | Measured |
| Footer links | `14px` | Same | `400`, normal | Measured |
| Copyright | `15px / 22.5px` | `14px / 21px` | `400`, normal | Measured |
| Mobile navigation links | Not applicable | `40px / 40px` | `400`, normal | Measured while positioned outside the viewport |
| Purchase-seal lettering | Approximately `32px` | Approximately `28px` | Compact, two lines | Screenshot estimate; no matching text element supplied |
The desktop navigation anchors report a `6.8px` computed line height, and footer anchors report `5.6px`, despite larger visible inline boxes. Treat these as implementation-specific inline metrics. A new implementation should use sensible line boxes inside appropriately sized navigation targets rather than reproducing those tiny line heights literally.
The source also exposes generic heading-size variables. They are not evidence that the large white product title uses those variables.
## Tokens — Spacing & Shapes
**Spacing character:** small fixed insets around very large panels. There is no evidence of a universal spacing-unit formula.
### Spacing Scale
| Use | Value | Status |
| --- | --- | --- |
| Gallery gap | `1px` | Measured |
| Section and cell rules | Approximately `1px` | Visible; several desktop sections also measure 1px taller than their linked media area |
| Social-heading left inset | `10px` | Measured |
| Quote-to-author gap | `16px` | Calculated from measured paragraph bounds |
| Product-caption inset | `20px` from top and left | Measured at both viewports |
| Desktop navigation gap | `40px` between consecutive labels | Calculated from measured anchor positions |
| Desktop footer side inset | `40px` | Measured |
| Mobile footer left inset | `35px` | Measured |
| Testimonial text width | `300px` | Measured at both viewports |
| Testimonial horizontal repeat pitch | `530px` | Calculated from consecutive text-block positions |
| Testimonial row pitch | `156.5px` | Calculated from measured row starts |
| Desktop lower-media outer space | `150px` above and below | Calculated from section bounds |
| Mobile copyright bottom padding | `60px` | Measured |
### Shape Vocabulary
| Element | Treatment | Evidence |
| --- | --- | --- |
| Major panels and photographs | Square corners, edge-to-edge placement | Screenshots; sampled sections have `0px` radius |
| Logo and recurring brand motif | Nested concentric rings | Screenshots |
| Player portraits | Circular crops with a fine blue outline | Screenshot estimate |
| Purchase action | Many-pointed white starburst with black two-line lettering | Screenshots |
| Large brand graphic | Oversized black-and-white rings cropped by panel boundaries | Desktop middle capture |
| Testimonial side panel | Repeating, slightly irregular black ring marks on white | Desktop middle capture |
The circles have several distinct jobs: identity, background pattern, oversized graphic, and portrait crop. They should not become a general rounded-card treatment.
### Key Dimensions
| Element | Desktop | Mobile | Status |
| --- | --- | --- | --- |
| Header strip | `50px` high | No separate top strip; main begins at `y=0` | Measured |
| Visible navigation mark | Approximately `32px` diameter | Approximately `44px` diameter | Screenshot estimate; desktop logo link box is `62 × 32px` |
| First product media area | `1440 × 810px` | `390 × 693.328px` | Measured |
| Product-section total height | `811px` | `693.328px` | Measured |
| Comments patterned side panel | Approximately `360px`, or one quarter of viewport | No equivalent reserved gutter in measured quote positions | Desktop visual estimate; mobile treatment not visually captured |
| Portrait disk | Approximately `114px` diameter | Not visually confirmed | Desktop screenshot estimate |
| Purchase-seal graphic | Approximately `144px` square | Approximately `125px` square | Screenshot estimate, supported by measured anchor widths |
| Footer | `76px` high | `272px` high | Measured |
The purchase link itself reports an inline box only `18px` high. That is not the visible starburst height. Size the graphic and its interactive target deliberately rather than treating the inline rectangle as the whole component.
## Components
### Desktop Header
**Role:** brand identification and direct access to shopping and information.
A white strip spans the viewport. The small black concentric-ring mark appears approximately 30px from the left edge. The right-aligned navigation reads `GAME`, `ABOUT`, `HOW TO PLAY`, `CART(0)`, and `LOGIN`, with 40px between labels and a 40px right inset.
The header occupies 50px before the main content begins. It is visible in the opening capture and absent from the supplied lower-page captures; persistent desktop positioning is not established.
Use real links. The supplied destinations include the game collection, About, How to Play, cart, and customer-authentication redirect. Their destination-page behavior was not exercised.
### Mobile Navigation Mark
**Role:** compact navigation access without consuming a separate header row.
A black ring mark sits approximately 20px from the top and right edges. It remains at that corner in both supplied mobile captures, consistent with a persistent viewport control.
The mobile DOM contains `TOP`, the desktop destinations, and social links. The measured text links are outside the visible viewport at `x=488px`, each approximately 370px wide, with 40px typography. This establishes a separate mobile navigation structure, but not its opened appearance, transition, dismissal behavior, or focus handling.
**Recommended implementation:** a named button controlling a navigation panel, or a native `details` disclosure. Keep closed navigation out of keyboard focus and the accessibility tree. The disclosure example in Quick Start is an adaptation, not a reconstruction of a tested open state.
### Product Showcase
**Role:** make a game release the dominant entry point.
The first product section links to `/products/insideblue`. Its anatomy is:
1. A full-width saturated background field.
2. A small upper-left identifier, `PLRS-02 : インサイドブルー >`.
3. A centrally placed dimensional package illustration.
4. A white bilingual title band crossing the middle, with ring separators and content clipped at the viewport edges.
The desktop product object is tilted and nearly fills the panel vertically. In the mobile capture, its visible bounds are approximately 260 × 308px, centered inside the much taller panel. The title band crosses approximately halfway down the panel in both captures.
The full measured product anchor covers the media area. Preserve a large link target with a clear accessible product name. Keep repeated decorative title copies out of the accessibility tree.
A second measured product section links to `/products/redline` and carries `PLRS-01 : RED LINE >`. Its existence, destination, and section dimensions are established. Its detailed artwork and palette are not visible in the supplied original-page screenshots, so they should not be invented from the product name.
### Intervening Media Panel
**Role:** connect the graphic product world with the experience of playing together.
An unlabeled media section follows the first showcase. Its measured size matches the product media area: 1440 × 810px on desktop and 390 × 693.328px on mobile. A photographic scene is visible at the beginning of this panel in the opening captures.
The evidence does not identify whether the displayed content is a still image, video, or another media implementation. Playback, audio, autoplay, and controls are unverified.
### Brand Introduction and Oversized Rings
**Role:** explain the label while extending its graphic identity.
The measured introduction link reads `POLARIS IS A NEW “STORY GAME” LABEL.` followed by `ABOUT >`. It occupies another large panel and links to `/pages/about`. The caption retains the same 20px upper-left inset as the product identifiers.
The desktop middle capture shows an enormous black-and-white concentric-ring graphic immediately above the testimonials. Rings extend beyond the frame and are cropped rather than neatly fitted inside a logo container. Preserve that scale relationship: the motif becomes an environment, while the descriptive copy stays small.
The full internal composition of the introduction panel is not visible in the supplied screenshots.
### Player-Comments Section
**Role:** show individual reactions while maintaining the page's graphic rhythm.
On desktop, a patterned ring panel occupies approximately the left quarter. The right side contains a narrow blue band repeating `COMMENTS FROM PLAYERS`, followed by three horizontally extended testimonial rows.
Each testimonial pairs a circular portrait with a 300px-wide text block. Quotes use black `18px / 27px` Japanese type with `-1px` tracking. The author and occupation follow after a measured 16px gap, in `13px / 19.5px` light gray. The portraits appear desaturated with a faint blue cast and a thin blue perimeter; the processing technique is not supplied.
Consecutive copy blocks begin 530px apart. Row starts are 156.5px apart. A practical approximate item anatomy is a 114px portrait, a 26px image-to-copy gap, 300px of copy, and approximately 90px between items. Only the copy width and repeat pitch are measured; the internal image spacing is a reconstruction estimate.
The DOM repeats testimonial sequences and positions many items far beyond the viewport. This supports a looping-track structure. Exact speed, direction, pause behavior, and input controls are not established.
On mobile, quote typography and 300px copy width remain unchanged. Do not shrink the comments into tiny type to fit more items across the screen. The measured row positions also remain separated by 156.5px.
### Guide and Social Blocks
**Role:** offer the next informational and community destinations.
On desktop, the guide and social areas form two equal 720px-wide halves below the testimonial rows.
The guide link is 720 × 560px, with a measured pure-blue background. Its large Times New Roman heading sits toward the lower part of the tile. A white circular graphic is partially visible at the top of this tile in the middle capture; the rest of that graphic is not shown.
The social half begins with a 41px-high ruled heading strip: blue `FOLLOW US!` text, 17px type, and 10px left padding. Below it, two linked areas are each 360 × 518px, leading to the supplied Twitter and Instagram profiles. Their complete icon artwork is not visible in the supplied captures.
On mobile, these become a vertical sequence: a 390 × 590.797px guide tile, a 48px social heading strip, and two 390 × 253.188px social-link areas. The guide heading reduces to 33px. Its measured vertical placement also changes; this is more than a simple proportional shrink of the desktop tile.
### Lower Media Section
**Role:** an additional visual interval before the final photographic grid; its specific content is not established.
The desktop DOM measures an unlabeled section at approximately 1344.95 × 511.20px, centered with 47.52px side offsets and 150px separation from neighboring blocks. The mobile counterpart spans 390 × 844px and reports 115px left padding.
These measurements establish a substantial responsive change, but the supplied screenshots do not show the section clearly enough to describe its contents. Do not assign it a carousel, logo animation, or product function without further evidence.
### Photographic Grid
**Role:** make the story-game experience tangible through people, printed materials, and shared attention.
The desktop grid uses four measured 360px column tracks and a 1px gap. Visible photographs span multiple columns: the lower capture shows two broad photographs above a final row with a white quarter-width cell and a photograph spanning the remaining three quarters.
Photography is tightly cropped and flush with its cell edges. The scenes show people reading game materials and leaning into a group activity. Thin black divisions make the montage feel like an editorial layout rather than a gallery of independent cards.
The measured gallery height is 1500px on desktop and 1266px on mobile. These equal 1.5 times the respective viewport heights, though the original height declaration is not included.
Mobile changes the container from grid to flex. The final group photograph occupies the full width, followed by a visible white area of roughly 190px before the footer. Retain the observed empty region when matching this capture; do not assume it is an unloaded image or fill it with invented content.
### Persistent Purchase Seal
**Role:** keep the shopping destination available across the long page.
A white starburst with black `BUY NOW!` lettering sits near the lower-right corner in desktop and mobile captures. The text is split across two compact lines. The seal is approximately 144px wide on desktop and 125px on mobile, with an observed right offset close to 2vw.
Its position across captures is consistent with a fixed control. A fixed implementation is appropriate for an adaptation, but the source positioning declaration is not supplied.
The corresponding link destination is `/collections/game`. Do not implement it as an unverified direct checkout or add-to-cart action.
Over a white footer, the white points visually disappear into the background while the black lettering remains visible. The evidence does not require a special alternate footer state.
### Footer
**Role:** provide support, policy, and legal destinations with minimal visual ceremony.
The desktop footer is a 76px-high white strip with a fine top rule. Four links sit at the left with a 40px inset and approximately 40px separation; copyright is aligned near the right edge. Links are 14px, while copyright is 15px.
On mobile, the footer grows to 272px and switches to a vertical arrangement. Links begin 35px from the left and approximately 53px below the top boundary. The copyright sits below the links and retains 60px of bottom padding. The purchase seal continues to occupy the lower-right area.
The visible labels are `お問い合わせ`, `FAQ`, `プライバシーポリシー`, and `特定商取引法に基づく表記`. The footer reads `(c) 2022, POLARIS`; that is source copy, not the inspection year.
## Tokens — Motion & Interaction
| Treatment | Supplied evidence | What remains unverified |
| --- | --- | --- |
| Dimensional product presentation | Different visible artwork poses in desktop and mobile captures | Whether rotation is animated; rendering technology, timing, direction, and trigger |
| Bilingual title band | Repeated labels, clipped at both horizontal edges | Whether and how the band moves |
| Player-comment tracks | Repeated DOM sequences, offscreen items, fixed repeat pitch | Velocity, direction, pause controls, drag behavior, and loop boundaries |
| Repeated comments heading | Multiple copies of the same heading in a narrow band | Its animation implementation and timing |
| Mobile navigation | A visible ring control and offscreen navigation links | Open/close transition, gesture support, focus behavior, and panel appearance |
| Purchase seal | Similar lower-right placement at multiple scroll positions | Exact positioning rule and hover state |
| Slideshow instruction | Page text mentions arrow navigation and mobile swiping | Which component it belongs to and whether either input was successfully exercised |
| Media panels | Photographic frames in the captures | Video playback, audio, autoplay, and media controls |
The sampled text elements report `animation: none`. That does not prove the whole page is static: animation could occur on ancestors, media, drawing surfaces, or through scripts. Likewise, a computed `transition: all` without a recorded duration does not establish a visible transition.
**Recommended motion defaults for a new implementation:** use a slow linear title track, with 30 seconds as an initial tuning value; use approximately 160ms for simple control-state changes; keep dimensional artwork static until an appropriate asset or rendering method is available. These timings are not measured source values. Provide a pause mechanism for sustained motion and a static, readable reduced-motion presentation.
## Surfaces
| Surface | Appearance | Purpose |
| --- | --- | --- |
| Structural canvas | White with black rules | Connects navigation, comments, social areas, and footer |
| Product field | Deep saturated violet-blue | Isolates the illustrated package and white title band |
| Guide field | Pure blue `#0000ff` | Creates a large navigational landmark |
| Ring graphic | Black and white, at multiple scales | Carries identity across otherwise different content types |
| Testimonial region | White, black copy, pale author lines, circular portraits | Keeps dense content open and readable |
| Photo grid | Full-cell photography separated by fine dark lines | Shows the social experience of play |
| Purchase seal | Flat white starburst with black lettering | Remains visually distinct over colored and photographic regions |
There is no visible general-purpose shadow or elevation scale. Separation comes from color fields, one-pixel divisions, hard image crops, and scale.
## Imagery
The homepage combines three visual registers: illustrated product artwork, optical geometry, and documentary-style photography.
**Product artwork:** the Inside Blue image features a close-up illustrated face, dark flowing hair, pink skin, strong blue passages, and dense black linework. It is presented with perspective and visible package-like planes. Preserve the artwork's proportions and detail. The evidence does not establish whether the result is a rendered video, an image sequence, a precomposed still, CSS geometry, or a real-time 3D object.
**Optical graphics:** concentric circles appear as a tiny identity mark, large cropped rings, separators in title bands, and a repeated pattern. Their repetition unifies the page. The patterned side panel looks slightly rougher than a perfectly uniform CSS-generated motif.
**Photography:** use close, human scenes of reading, handling printed materials, and group concentration. The original captures have soft daylight, cool neutral surroundings, restrained saturation, and tight framing. Faces and hands often extend beyond the crop. Avoid replacing these with isolated product packshots throughout the page.
### Observed Asset References
No usable URLs for the principal illustration, logo, portraits, or photography are included in the supplied asset evidence. The following references identify visible roles rather than inventing filenames.
| Asset role | Original-page evidence | Reuse guidance |
| --- | --- | --- |
| Inside Blue dimensional artwork | Desktop and mobile opening captures | Use an authorized transparent render or suitable media asset; retain the illustrated face and package proportions |
| Concentric-ring mark | Header, mobile control, title band | Prefer the actual brand artwork when available; CSS rings are an approximation |
| Oversized rings and repeated pattern | Desktop middle capture | Preserve cropping, scale changes, and the pattern's slightly irregular character |
| Player portraits | Desktop middle capture | Circular crops; restrained blue-gray appearance; do not invent identities |
| Play-session photography | Opening edges and desktop/mobile lower captures | Use responsive crops while preserving the people and printed game materials |
| Purchase seal | All supplied page positions | White pointed silhouette with live, accessible text in a new build |
The few asset-related custom properties in the evidence concern a loader and a select icon. They do not identify the principal homepage imagery.
## Layout & Responsive Behavior
### Panel Proportions
The two inspected widths establish a major change in media geometry:
- Desktop: `1440 × 9 / 16 = 810px` of media height.
- Mobile: `390 × 16 / 9 = 693.333px`, matching the measured `693.328px` after layout rounding.
This is consistent with switching from landscape `16:9` panels to portrait `9:16` panels. The original CSS formula and breakpoint were not supplied. Do not describe the mobile panels as full viewport height: 693.328px is shorter than the inspected 844px viewport.
### Measured Page Map
Positions below are document coordinates, rounded to two decimals. Guide and social blocks are contained within the broader comments section in the supplied DOM.
| Region | Desktop start / height | Mobile start / height |
| --- | --- | --- |
| Header allocation | `0 / 50px` | No separate allocation |
| Inside Blue section | `50 / 811px` | `0 / 693.33px` |
| Intervening media | `861 / 810px` | `693.33 / 693.33px` |
| Red Line section | `1671 / 811px` | `1386.66 / 693.33px` |
| Brand introduction | `2482 / 811px` | `2079.98 / 693.33px` |
| Comments, guide, and social group | `3293 / 1123px` | `2773.31 / 1694.67px` |
| Guide link within group | `3856 / 560px` | `3322.81 / 590.80px` |
| Unlabeled lower media section | `4566 / 511.20px` | `4467.98 / 844px` |
| Photographic grid | `5227.20 / 1500px` | `5426.98 / 1266px` |
| Footer | `6727.20 / 76px` | `6692.98 / 272px` |
| Total document height | `6803.20px` | `6964.98px` |
### Desktop Composition
The page uses the full browser width. Large panels establish the vertical rhythm; quarter-width and half-width subdivisions organize the lower regions. The comments retain a patterned quarter-width side area, while the guide/social row splits into equal halves. Photographs span multiple grid columns.
The measured gallery tracks are four times 360px, alongside a declared 1px gap. For a new implementation, use fractional tracks that account for the gaps instead of copying four fixed widths and adding extra overflow.
### Mobile Composition
The desktop header strip gives way to the corner ring control. The hero retains its small 20px-inset caption, but places a smaller product object within a portrait field. The bilingual band continues beyond both edges.
The comment copy does not scale down: it remains 18px with a 300px text width. The guide and social links stack vertically, and the photo grid becomes a flex layout. Footer links also stack, with more vertical breathing room.
The mobile comments sidebar and complete lower-media arrangement are not shown in the supplied screenshots. Their DOM geometry establishes reflow, but not every visual decision.
Only two widths were inspected. The 48rem breakpoint in Quick Start is a recommended starting point, not an extracted source breakpoint. Tablet layouts, landscape phones, zoom behavior, safe-area handling, and intermediate-width transitions require separate verification.
## Do’s and Don’ts
### Do
- Preserve the contrast between tiny utility labels and large artwork.
- Keep the deep product blue distinct from the measured pure-blue guide panel.
- Use edge-to-edge panels, square photographic cells, and fine dark divisions.
- Repeat the ring motif at dramatically different scales.
- Maintain the bilingual product-title band and its horizontal cropping.
- Keep player quotes at a readable size on mobile.
- Preserve the measured serif exception in the guide heading.
- Treat the purchase seal as a persistent link to the game collection.
- Retain the shopping, informational, social, and policy destinations appropriate to this homepage.
- Use white space as part of the grid composition, including the observed empty lower cell.
### Don’t
- Don’t turn every section into a rounded card with a shadow.
- Don’t replace all blue surfaces with one approximate color.
- Don’t assume generic theme variables describe visible homepage components.
- Don’t identify the artwork renderer as WebGL, video, or CSS 3D without evidence.
- Don’t invent animation timing, hover states, or a tested mobile-menu transition.
- Don’t treat repeated testimonial copies as additional distinct reviews.
- Don’t shrink all mobile typography in proportion to viewport width.
- Don’t implement `BUY NOW!` as a direct checkout when the observed destination is the collection.
- Don’t fill unseen sections with imagined artwork or derive a product palette from its title.
- Don’t use the inline purchase-anchor height as the size of the visible seal or its hit target.
## Recommended Implementation Additions
These are recommendations for a new implementation, not verified features of the original:
- Give the ring navigation control and image-only links explicit accessible names. Keep closed navigation unavailable to keyboard focus.
- Expose a meaningful page heading and product names independently of decorative or media-rendered title bands.
- Hide duplicate marquee copies from assistive technology while keeping one readable copy of every testimonial.
- Provide pause controls and reduced-motion alternatives for any continuous tracks or animated product presentation.
- Improve the contrast of the source's pale author text where readability is required. Keep `#bcbcbc` as a reference token, with a darker accessible alternative for production text.
- Review black captions on saturated blue backgrounds. A white caption or a small contrasting backing is an adaptation that may improve legibility.
- Preserve keyboard focus around the whole purchase link, rather than clipping its focus outline to the starburst.
- Allow mobile footer links to remain reachable without obstruction from the fixed seal, especially with larger text or browser zoom.
- Supply appropriate image alternatives and responsive crops. Decorative avatars can have empty alternative text when the adjacent author line already identifies the person.
- Reserve media dimensions before loading and ensure a useful static presentation remains when animation or advanced rendering is unavailable.
## Agent Prompt Guide
### Quick Color Reference
- Structural surfaces and purchase seal: `#ffffff`.
- Main text, rings, and dividing rules: `#000000`.
- Guide tile and measured blue social text: `#0000ff`.
- Opening product field: approximately `#2600b5`; verify against an authorized original asset before color-critical reproduction.
- Testimonial author text: measured `#bcbcbc`; use a darker alternate when improving accessibility.
- Photographic and illustration colors remain inside the media rather than spreading across the interface.
### Overall Prompt
“Create a story-game label homepage with integrated shopping navigation, inspired by the observed POLARIS composition. Use white structural surfaces, black typography and one-pixel rules, a deep violet-blue product showcase, and a separate pure-blue guide panel. Build large edge-to-edge media sections, with 16:9 proportions on desktop and approximately 9:16 on mobile. Place a small product identifier at a 20px inset, a dimensional illustrated package in the center, and a white bilingual title band across its middle. Repeat concentric-ring graphics at logo, pattern, and oversized scales. Add three horizontal player-comment rows with circular portraits, 18px Japanese text, small gray author lines, a serif guide heading, a ruled photographic montage, and a white starburst purchase link near the lower-right corner. Preserve accessible navigation and static alternatives. Treat motion timing and the mobile-menu open state as implementation choices rather than verified source behavior.”
### Example Component Prompts
1. **Product showcase:** “A full-width deep violet-blue product panel with a small black release identifier at top left, a large illustrated package shown in perspective, and a horizontally cropped white band reading Inside Blue and インサイドブルー with concentric-ring separators. Keep generous empty blue space on mobile. Use a supplied product asset; do not invent a renderer.”
2. **Player comments:** “A white testimonial region with a black-and-white ring-pattern column occupying one quarter of the desktop width. Put a narrow pure-blue repeating heading strip above three horizontally extended quote rows. Use circular portraits, 300px copy blocks, 18px text with 27px leading, and small pale author lines. Provide a readable static mode.”
3. **Guide and social block:** “Two ruled desktop halves: a pure-blue guide tile with a bold Times New Roman heading, and a white social section with a narrow blue FOLLOW US! label and two large linked cells. Stack the guide and both social cells on mobile.”
4. **Purchase seal:** “A flat white starburst containing compact black BUY NOW! text on two lines. Use approximately 144px on desktop and 125px on mobile, positioned near the lower-right corner. Link to the collection and keep an unclipped keyboard-focus outline.”
5. **Photographic grid:** “An editorial grid of close photographs of people reading printed game materials and concentrating together. Use quarter-width columns, multi-column image spans, one-pixel dark divisions, square corners, and one deliberate white cell. Reflow into full-width mobile photographs without stretching faces.”
## Quick Start
### CSS Custom Properties
The following CSS is a practical adaptation, not extracted source code. It preserves measured type sizes and major geometry while using estimated artwork bounds and a recommended 48rem breakpoint. The starburst and ring graphics are approximations. It does not recreate unseen media or assert an original animation framework.
```css
:root {
/* Measured interface colors */
--paper: #ffffff;
--ink: #000000;
--blue: #0000ff;
--muted: #bcbcbc;
--text-default: #3a3a3a;
--text-secondary: #333232;
/* Visual estimate, not a measured source color */
--hero-blue: #2600b5;
/* Declared families; font files must be supplied separately */
--font-latin: 'neue-haas-grotesk-display', Arial, sans-serif;
--font-jp: 'Gothic Medium BBB', -apple-system, system-ui,
'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
Meiryo, sans-serif;
--font-guide: 'Times New Roman', Times, serif;
--text-body: 15px;
--text-nav: 17px;
--text-caption: 15px;
--text-quote: 18px;
--text-author: 13px;
--text-footer: 14px;
--text-guide: 65px;
--rule: 1px;
--inset: 20px;
--header-height: 50px;
--quote-copy-width: 300px;
--portrait-size: 114px;
--seal-size: clamp(125px, 10vw, 144px);
/* Recommended timing, not measured source timing */
--ticker-duration: 30s;
--control-duration: 160ms;
}
* { box-sizing: border-box; }
body {
margin: 0;
color: var(--text-default);
background: var(--paper);
font: 400 var(--text-body)/1.5 var(--font-jp);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
padding-inline: 30px 40px;
color: var(--ink);
background: var(--paper);
border-bottom: var(--rule) solid var(--ink);
}
.desktop-nav {
display: flex;
align-items: center;
gap: 40px;
font: 400 var(--text-nav)/1.2 var(--font-latin);
}
.desktop-nav a,
.site-footer a {
text-decoration: none;
}
/* Approximation; replace with authorized brand artwork when available. */
.ring-mark {
display: block;
width: 32px;
aspect-ratio: 1;
border-radius: 50%;
background: repeating-radial-gradient(
circle,
currentColor 0 1.4px,
transparent 1.4px 2.8px
);
}
.mobile-navigation { display: none; }
.feature-panel {
position: relative;
border-bottom: var(--rule) solid var(--ink);
}
.feature-link {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--hero-blue);
color: var(--ink);
text-decoration: none;
}
.feature-caption {
position: absolute;
z-index: 3;
top: var(--inset);
left: var(--inset);
margin: 0;
font: 400 var(--text-caption)/1.5 var(--font-latin);
}
.feature-art {
position: absolute;
top: 5%;
left: 50%;
width: 45%;
height: 90%;
object-fit: contain;
transform: translateX(-50%);
}
.feature-band {
position: absolute;
z-index: 2;
inset-inline: 0;
top: 50%;
overflow: hidden;
transform: translateY(-50%);
color: var(--paper);
font: 400 clamp(28px, 4.45vw, 64px)/1 var(--font-latin);
pointer-events: none;
}
.marquee-track {
display: flex;
width: max-content;
}
.marquee-group {
display: flex;
flex: none;
align-items: center;
gap: 0.8em;
padding-inline-end: 0.8em;
white-space: nowrap;
}
.feature-band .ring-mark { width: 1em; }
/* Requires two identical groups and an accessible pause control. */
.has-motion .marquee-track {
animation: title-drift var(--ticker-duration) linear infinite;
}
.is-paused .marquee-track { animation-play-state: paused; }
@keyframes title-drift {
to { transform: translateX(-50%); }
}
.comments {
display: grid;
grid-template-columns: 1fr 3fr;
color: var(--ink);
border-bottom: var(--rule) solid var(--ink);
}
.pattern-panel {
grid-column: 1;
grid-row: 1 / 3;
border-right: var(--rule) solid var(--ink);
background-color: var(--paper);
background-image: var(--ring-pattern-image, none);
}
.comments-heading {
grid-column: 2;
height: 40px;
overflow: hidden;
color: var(--paper);
background: var(--blue);
font: 400 15px/40px var(--font-latin);
white-space: nowrap;
}
.testimonial-lanes {
grid-column: 2;
min-width: 0;
display: grid;
gap: 40px;
padding-block: 40px 53.5px;
overflow: hidden;
}
/* Static horizontal access is the default in this adaptation. */
.testimonial-row {
overflow-x: auto;
scrollbar-width: thin;
}
.quote-track {
display: flex;
gap: 90px;
width: max-content;
}
.quote-item {
display: grid;
grid-template-columns: var(--portrait-size) var(--quote-copy-width);
gap: 26px;
flex: 0 0 440px;
min-height: 116.5px;
}
.quote-avatar {
width: var(--portrait-size);
aspect-ratio: 1;
object-fit: cover;
border: var(--rule) solid var(--blue);
border-radius: 50%;
}
.quote-text {
margin: 0;
font-size: var(--text-quote);
line-height: 27px;
letter-spacing: -1px;
}
.quote-author {
margin: 16px 0 0;
color: var(--muted);
font-size: var(--text-author);
line-height: 19.5px;
}
.guide-social {
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: var(--rule) solid var(--ink);
}
.guide-tile {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 560px;
padding: 40px 0;
background: var(--blue);
color: var(--ink);
text-align: center;
text-decoration: none;
}
.guide-title {
margin: 0;
font: 700 var(--text-guide)/1.5 var(--font-guide);
letter-spacing: -0.03em;
}
.social-heading {
height: 41px;
margin: 0;
padding-left: 10px;
border-bottom: var(--rule) solid var(--ink);
color: var(--blue);
font: 400 17px/40px var(--font-latin);
}
.social-links {
display: grid;
grid-template-columns: 1fr 1fr;
}
.social-links a {
display: grid;
place-items: center;
min-height: 518px;
border-left: var(--rule) solid var(--ink);
}
/* Grid grammar; supply the appropriate cells and image spans. */
.photo-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: var(--rule);
height: 150vh;
background: var(--ink);
}
.photo-cell {
min-width: 0;
min-height: 0;
margin: 0;
overflow: hidden;
background: var(--paper);
}
.photo-cell--half { grid-column: span 2; }
.photo-cell--wide { grid-column: span 3; }
.photo-cell img {
width: 100%;
height: 100%;
object-fit: cover;
}
.buy-seal {
position: fixed;
z-index: 80;
right: 2vw;
bottom: calc(30px + env(safe-area-inset-bottom, 0px));
display: grid;
place-items: center;
width: var(--seal-size);
aspect-ratio: 1;
color: var(--ink);
text-align: center;
text-decoration: none;
font: 400 clamp(28px, 2.23vw, 32px)/0.95 var(--font-latin);
letter-spacing: -0.04em;
}
/* Approximate pointed silhouette; keep the anchor itself unclipped. */
.buy-seal::before {
content: '';
position: absolute;
inset: 0;
background: var(--paper);
clip-path: polygon(
50% 0%, 55% 12%, 65% 2%, 67% 15%, 79% 10%,
78% 24%, 90% 21%, 85% 34%, 98% 35%, 88% 44%,
100% 50%, 88% 56%, 98% 65%, 85% 66%, 90% 79%,
78% 76%, 79% 90%, 67% 85%, 65% 98%, 55% 88%,
50% 100%, 45% 88%, 35% 98%, 33% 85%, 21% 90%,
22% 76%, 10% 79%, 15% 66%, 2% 65%, 12% 56%,
0% 50%, 12% 44%, 2% 35%, 15% 34%, 10% 21%,
22% 24%, 21% 10%, 33% 15%, 35% 2%, 45% 12%
);
}
.buy-seal span { position: relative; }
.site-footer {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 76px;
padding-inline: 40px;
border-top: var(--rule) solid var(--ink);
background: var(--paper);
color: var(--ink);
}
.footer-links {
display: flex;
gap: 40px;
font-size: var(--text-footer);
}
.copyright {
margin: 0;
color: var(--text-secondary);
font: 400 15px/1.5 var(--font-latin);
}
/* Recommended focus treatment, not a measured source state. */
:where(a, button, summary, [tabindex]):focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}
@media (max-width: 48rem) {
:root {
--text-caption: 14px;
--text-guide: 33px;
--seal-size: 125px;
}
.site-header { display: none; }
.mobile-navigation {
position: fixed;
z-index: 100;
top: 20px;
right: 20px;
display: block;
color: var(--ink);
}
.mobile-navigation summary {
position: relative;
z-index: 2;
list-style: none;
cursor: pointer;
}
.mobile-navigation summary::-webkit-details-marker { display: none; }
.mobile-navigation .ring-mark { width: 44px; }
/* Recommended disclosure presentation; original open state unverified. */
.mobile-navigation nav {
position: fixed;
z-index: 1;
inset: 0;
display: flex;
flex-direction: column;
padding: 140px 20px 40px;
overflow-y: auto;
background: var(--paper);
}
.mobile-navigation:not([open]) nav { display: none; }
.mobile-navigation nav a {
padding-bottom: 10px;
font: 400 40px/40px var(--font-latin);
text-decoration: none;
}
.feature-panel { border-bottom: 0; }
.feature-link { aspect-ratio: 9 / 16; }
.feature-art {
top: 25%;
width: 67%;
height: 50%;
}
/* Sidebar removal is an adaptation; its mobile appearance was not captured. */
.comments { grid-template-columns: minmax(0, 1fr); }
.pattern-panel { display: none; }
.comments-heading,
.testimonial-lanes { grid-column: 1; }
.testimonial-lanes { padding-bottom: 40px; }
.guide-social { grid-template-columns: 1fr; }
.guide-tile {
min-height: 151.5vw;
justify-content: flex-start;
padding-top: 90px;
}
.social-heading { height: 48px; line-height: 47px; }
.social-links { grid-template-columns: 1fr; }
.social-links a {
min-height: 65vw;
border-left: 0;
border-bottom: var(--rule) solid var(--ink);
}
.photo-grid {
display: flex;
flex-direction: column;
height: auto;
}
.photo-cell { height: 280px; flex: none; }
.photo-cell--empty { height: 190px; }
.buy-seal {
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
.site-footer {
display: block;
padding: 50px 35px 60px;
}
.footer-links { display: block; }
.footer-links a { display: block; line-height: 22.5px; }
.copyright { margin-top: 50px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.has-motion .marquee-track {
animation: none;
transform: none;
}
}
```
The mobile guide and social height formulas above approximate the inspected 390px layout; they are not recovered source formulas. The photo-grid CSS expresses the observed span system, while the exact unseen cell sequence must be supplied separately. No global `image-rendering: pixelated` treatment is appropriate for the photography.
### Minimal Semantic Wiring
This excerpt demonstrates the accessible product link, a native mobile disclosure, and the collection action. `inside-blue-art.webp` is a project-local placeholder for an authorized asset, not an observed original-site filename. Include a separate desktop header using the measured navigation labels.
```html
BUY NOW!
```
For a complete implementation, include the observed login destination or the new storefront's equivalent. Add `tabindex='0'` and an accessible label to each manually scrollable testimonial row. Leave motion disabled until its pause control and reduced-motion behavior are implemented.
### Tailwind v4 Token Mapping
Optional aliases for a project already using Tailwind v4. Define the custom properties above first. This does not imply that the original website uses Tailwind.
```css
@theme inline {
--color-paper: var(--paper);
--color-ink: var(--ink);
--color-electric-blue: var(--blue);
--color-product-blue: var(--hero-blue);
--color-author: var(--muted);
--font-utility: var(--font-latin);
--font-body: var(--font-jp);
--font-editorial: var(--font-guide);
--text-utility: 17px;
--text-testimonial: 18px;
--text-attribution: 13px;
--spacing-panel-inset: 20px;
--spacing-quote-copy: 300px;
--spacing-portrait: 114px;
--radius-panel: 0px;
}
```
## Sources & Evidence
- [POLARIS homepage](https://polaris.game/): original and final URL; supplied response status `200`; page title `POLARIS`.
- Supplied browser retrieval: `2026-10-01T19:15:03.605Z`, equivalent to October 2, 2026, at 04:15:03.605 JST.
- Desktop evidence: 1440 × 1000 CSS-pixel viewport, opening/middle/footer captures, and rendered document height approximately 6803.20px.
- Mobile evidence: 390 × 844 CSS-pixel viewport, opening/footer captures, and rendered document height approximately 6964.98px.
- Supplied rendered DOM and computed styles: element coordinates, font declarations, text sizes, line heights, colors, section dimensions, gallery layout, custom properties, and link destinations. Linked pages were not inspected.
- The capture process waited for document loading, image readiness, and sampled layout/text stability; perpetual animations were temporarily paused during readiness checks and then resumed. SharedWorkers and service workers were disabled. These checks do not establish semantic completeness, animation timing, or the behavior of unexercised controls.
This reference describes the current homepage supported by those captures. Exact hero color, principal asset URLs, animation implementation, hover states, opened mobile navigation, and unseen media details remain unverified. CSS approximations and accessibility additions are explicitly recommendations.
