01_FOUNDATIONS
01.0 Design Character | Confirmed
From digital demand to physical products.
01.1 Colors | Confirmed
The same core grey can be used for text, backgrounds, borders, buttons, and icons.
Core
Primary /
goof Grey
#383437
primary /
WHITE
#FFFFFF
Neutral 70
2-RY / METADATA
#383437 / 70%
Neutral 55
MUTED / NON-ESSEN
#383437 / 55%
Neutral 20
borders
#383437 / 20%
Neutral 04
subtle grouping
#383437 / 4%
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
12 / 1.4 / Bold
Caption
Caption
12 / 1.4 / Regular
Micro
Footnotes or captions. Image descriptions, etc.
11 / 1.4 / Regular or Bold
01.3 Imagery & Media
Photography
Real, documentary, operational. Prioritize production, machines, materials, physical outputs, testing, inspection, packing, and real working environments.
illustration
Use when a system, workflow, or abstract relationship cannot be explained clearly through photography. Bespoke system illustration is preferred over generic marketing illustration.
Geometry
Square corners. No default decorative radius or shadow.
Cropping
Intentional crops. Media may remain contained or bleed beyond the content grid when the composition calls for stronger physical presence.
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
Space / 80
Generous section spacing
Space / 96
Standard major section spacing
Space / 120
Large chapter / page transition
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 & Interaction
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
01.6 Accessibility
Contrast
Normal informational text must meet 4.5:1.
Neutral 70 is the lowest approved neutral for ordinary small text on white.
interaction
Focus must be visible on both light and dark surfaces. Important controls must not rely on hover or color alone.
Light surface: goof Grey
Dark surface: White
touch
Aim for approximately 44×44px interactive areas on mobile where practical.
Structure
Preserve semantic heading hierarchy and a clear main-content landmark.
Motion
Provide a reduced-motion equivalent when motion conveys meaning.
Images
Meaningful images require descriptive alt text.
02_PRIMITIVES
02.1 Buttons
Primary / Secondary / Inverse Primary / Inverse Secondary.
Variants—Light Surface
Variants—Dark Surface
Button
Inverse Primary
Button
→
Inverse Secondary: with arrow
Button
Inverse Primary: disabled
Scroll Jump
0.2.2 Tags
Variants—Light
Printology
Variants—Dark
Printology
Tags stay single-line. Content this long is a sign it should be Micro/metadata text instead of a Tag.
0.2.3 Status
Variants—Light
Coming Soon
New
Updated
Beta
Closed
Variants—Dark
Coming Soon
New
Updated
Beta
Closed
Tags stay single-line. Content this long is a sign it should be Micro/metadata text instead of a Tag.
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.