IMAYO 今与

京都的珠寶商今与（IMAYO）的官網（日文）。頁首是一條懸在頂端、白底、2px 圓角的細長條：左邊黑色的「IMAYO」字樣，中間一排很小的大寫導覽（ABOUT、BRANDS、SHOP、COMPANY、CAREERS、NEWS、CONTACT），右邊「JA EN」和一顆淺灰的「Menu ●」。第一屏是滿版的人像特寫：側臉和一只鑲滿寶石的球形耳環，右邊直排一個很大的白色「IMAYO」，左下角一個圓形的家紋。

往下是白底：左邊一張圓窗外的櫻花、一張珠寶的照片錯開放，右邊明體的「今に、未来に、輝きを与える」、說明和一顆黑色的長方形按鈕「今与について →」；「BRANDS」四張直式的人像，上面壓著各品牌的白色字樣（kagayoi、Hyacca、ICHAROI、SHINCA）；再一張滿版的深色人像；半透明白底的公司資訊、採用資訊兩塊；最新消息一列一則；最下面深黑（#141414）的頁尾，右邊又是直排的「IMAYO」。

整體是安靜的精品：白、黑、灰，照片是有光影的人像和珠寶特寫，標題用 Adobe Garamond 和小塚明朝，按鈕是直角的黑色長條。

• Canvas（#FFFFFF）：白底。

• Text／Primary（#000000）：字和主要按鈕的黑。

• Surface（#F1F1F1）：「Menu」按鈕的淺灰。

• Inverse（#141414）：頁尾的深黑；#373737 是品牌照片的深灰底。

• Text muted（#999999）：麵包屑、頁尾的灰字。

• Border（#0000001A、#00000033）：消息列之間的淡分隔線。

• 照片自己帶出淺藍灰、粉紅、深綠這些柔和的顏色，介面本身沒有彩色。

標題和英文用 adobe-garamond-pro（Adobe Fonts，日文接小塚明朝），內文和導覽用 helvetica-neue-lt-pro（日文接 YakuHanJPs 約物）；兩套都不在 Google Fonts。

• 段落標題「今に、未来に、輝きを与える」30px／400 的明體、行高 51px。

• 選單、頁尾的連結 16px 的 Garamond。

• 段落名「BRANDS」「NEWSROOM」15px／500 大寫。

• 內文 13.85px、行高 23.5px；導覽 12px 大寫；版權這種小字 9.9px。

• 頁首是一條懸在頂端、左右留一點空隙的白色細長條，固定在最上面。

• 第一屏和品牌之間的大照片都是滿版。

• 內容區最寬約 1140px：照片在左（兩張錯開）、文字和按鈕在右。

• 品牌是四張一樣寬的直式照片，貼齊畫面兩邊。

• 公司資訊、採用資訊是兩塊半透明白底的面板，疊在滿版照片上。

• 最新消息：左邊日期、右邊標題，一列一則，中間一條淡的細線。

• 頁尾深黑，左邊兩欄連結（Site menu、Our brands），右邊直排的大「IMAYO」。

Responsive

• 375px 寬時，頁首剩「IMAYO」、「JA EN」和「Menu」；第一屏是直式的珠寶特寫，右下直排的「IMAYO」照樣在。

沒有陰影。層次靠滿版照片的光影、半透明白的面板疊在照片上，和白底、深黑底的段落交替。

• 按鈕和面板是直角；頁首的細長條和「Menu」按鈕是 2px 的小圓角。

• 唯一的圓是家紋和圓窗的照片。

• 主要按鈕：黑底白字 13.85px，直角，高 60px，左邊 10px、右邊 20px 內距，文字在左、右邊一個白色的 → 箭頭（今与について、店舗案内、会社概要）。

• Menu 按鈕：#F1F1F1 淺灰底、黑字 12px，2px 圓角，高 24px，字後面一個小黑點。

• 頁首：白底、2px 圓角的細長條，12px 的大寫導覽置中。

• 品牌卡片：滿高的直式人像照片，上面置中一個白色的品牌字樣。

• 資訊面板：半透明白底，小標、說明和一顆黑色的主要按鈕。

• 最新消息：日期和標題一列，下面一條 10% 黑的細線。

• 要讓照片（光影、人像、珠寶特寫）當主角，介面只用白、黑、灰。

• 標題用 Garamond 和明體；導覽和按鈕用小的大寫無襯線字。

• 按鈕要是直角的黑色長條，字在左、箭頭在右。

• 不要加陰影和彩色；需要層次就用半透明白的面板疊在照片上。

• 「IMAYO」直排的大字是品牌的記號，可以放在照片和頁尾上。