01_FOUNDATIONS
01.0 Design Character | Confirmed 🟩
From digital demand to physical products.
01.1 Colors 🟩
The same core grey can be used for text, backgrounds, borders, buttons, and icons.
Core
Primary /
goof Grey
#382427
primary /
WHITE
#FFFFFF
Neutral 70
secondary text
#
Neutral 55
metadata
#
Neutral 20
borders
#
Neutral 04
subtle grouping
#
Brand / CAMPUS
PRIMARY /
CAMPUS bluE
#004fa3
Secondary /
deep blue
#183966
Secondary /
Medium Blue
#486ab2
Brand / zine
PRIMARY /
zine orange
#f36a30
Secondary /
BURNT
#963F14
Secondary /
SOFT
#486ab2
ACCENT /
OCHRE
#D6A23C
Accent
#E82323
#FFD500
#4F8F42
#07D2E8
01.2 Typography | Confirmed 🟨
Typeface Decision
English: Noto Sans
日本語: Noto Sans JP
Use only two weights initially.
Regular: 400
Bold: 700
Do not introduce Medium or Semibold until the live designs demonstrate a real hierarchy problem.
B. EN and JP Styles
Text / EN / Display
Text / EN / H1
Text / EN / H2
Text / EN / H3
Text / EN / Body Large
Text / EN / Body
Text / EN / Body Small
Text / EN / Label
Text / EN / Micro
Text / JP / Display
Text / JP / H1
Text / JP / H2
Text / JP / H3
Text / JP / Body Large
Text / JP / Body
Text / JP / Body Small
Text / JP / Label
Text / JP / Micro
Framer lets you add Desktop, Tablet, and Mobile settings inside a text style.
However, page-level text-style breakpoints do not automatically respond inside components because components cannot read the page breakpoint. For component headings that genuinely need different sizes, use explicit Desktop/Tablet/Mobile component variants or a controlled size property.
C. Type Hierarchy
Display / Statistic
89,008,026
56 / 1.05 / Bold
Heading 1
From digital demand to physical products.
40 / 1.15 / Bold
Heading 2
How digital demand becomes physical products.
28 / 1.2 / Bold
Heading 3
Connect production to your workflow.
20 / 1.3 / Bold
Body Large
goof connects digital demand with physical production through GEMiNX.
18 / 1.6 / Regular
Body
Use actual copy to test line length, density, mixed scripts, and responsive behavior.
16 / 1.6 / Regular
Nav / Button Labels
GEMiNX | Do The Right Things | Contact Us
16 / 1.6 / Bold
Body Small
Use actual copy to test line length, density, mixed scripts, and responsive behavior.
14 / 1.6 / Regular
Label
CAMPUS REPORT 001
14 / 1.4 / Bold
Micro
Footnotes or captions. Image descriptions, etc.
14 / 1.4 / Bold
01.4 Layout, Grid & Spacing
Layouts
Breakpoint
Reference Width
Columns
Gutter
Outer Margin
Desktop
1440px
12
24px
80px
Tablet
1024px
8
24px
40px
Mobile
390px
4
12px
16px
EX. At 1440px, a 1280px container creates 80px margins.
Spacing
Token
Value
Use
Space / 04
Optical adjustment
Space / 08
Closely related items
Space / 12
Label to heading
Space / 16
Same content group
Space / 24
Default component gap
Space / 32
Generous component gap
Space / 40
Section intro to content
Space / 48
Module groups
Space / 64
Compact section
8px: Belongs together
16px: Same content unit
24px: Separate elements in one component
32–48px: Separate groups within one module
64–120px: Separate sections or major ideas
01.5 Borders & Components
Border scale
Description
Value
Use
Hairline
1.5px
Default rules, cards, fields
Emphasis
2.5px
Selected, error, or focus-states
None
0px
Open editorial arrangements
examples
Default Primary
Core Grey + Core White
Secondary
Error / Attention
Persistent border; not hover dependent
Disabled
Reduced prominence and non-interactive
components
Primary
Button
→
Secondary
Button
→
Tertiary
Button
02_PRIMITIVES
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
03_COMPONENTS
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.
COLORS
From digital demand to physical products.