A recognizable identity for websites, documents, and presentations.
Typography, spacing, and alignment establish a clear, precise, understated visual language. Research figures and diagrams are outside the scope of version 1.0. Required institutional and publication conventions take precedence.
Website favicon and touch icons are intentionally unset pending selection of an icon.
I’m an Applied Mathematics and Statistics student at Stony Brook University studying statistics, data science, and quantitative finance.
Clarity through type
One sans-serif family gives headings, reading, and navigation a common voice.
A neutral foundation
White, charcoal, and gray establish the foundation. Blue, teal, and amber have distinct supporting roles.
Structure with space
Alignment and consistent spacing make relationships easy to follow.
Typography
01
Source Sans 3 for headings, prose, and interface labels. JetBrains Mono for code. Website sizes below assume a 16 px browser default and scale with the reader’s font settings.
DisplaySize: 52–80 px Weight: 600 Line height: 1.02
Junseo Lee
Page headingSize: 40–56 px Weight: 600 Line height: 1.16
Research and building
Section headingSize: 32 px Weight: 600 Line height: 1.16
Selected work
SubheadingSize: 24 px Weight: 600 Line height: 1.30
A precise explanation
Profile item titleSize: 18 px Weight: 600 Line height: 1.60
Founder & President, Wolfram Computational Research Club at SUNY Korea
List item descriptionAbout, Projects, Writings Size: 16 px Weight: 400 Line height: 1.60
A faculty-advised research club cultivating computational thinking and technical communication through computational essays in the Wolfram Language.
General copySize: 18 px Weight: 400 Line height: 1.60
I want to explain a method precisely and implement it competently.
Secondary textSize: 14 px Weight: 400 Line height: 1.50
Captions, metadata, tags, and reference annotations share this treatment.
Website typography
General copy uses 1.60 line height; sustained reading uses 1.70. Inline code inherits its paragraph’s line spacing.
Profile entries pair an 18 px semibold title in charcoal with a 16 px regular description in secondary gray. Dates and location labels share 14 px regular type with 1.50 line height. Place each location or venue label directly below its item title, followed by any description, with 8 px between consecutive blocks. Location labels use teal; dates use secondary gray and place names within titles remain charcoal. Section headings stay at 32 px. A 1 px light-gray rule separates consecutive entries within the entry column, with 16 px of space on each side.
About, Projects, and Writings list descriptions share the same 16 px regular type, 1.60 line height, and secondary gray. Archive entries, related-writing cards, and the examples below use that same shared rule.
Website typography
Role
Size
Weight
Line height
Display
52–80 px, fluid
600
1.02
Page heading
40–56 px, fluid
600
1.16
Section heading
32 px
600
1.16
Subheading
24 px
600
1.30
Lead paragraph
22 px
400
1.50
Profile item title
18 px
600
1.60
About, Projects, and Writings item description
16 px
400
1.60
Profile date and location label
14 px
400
1.50
General website copy
18 px
400
1.60
Sustained reading
18 px
400
1.70
Navigation and ordinary interface labels
16 px
400
1.60
Button labels
16 px
500
1.20
Metadata, captions, and tags
14 px
400
1.50
Design-system reference annotations
14 px
400
1.50
Table body
16 px
400
1.50
Table headers
14 px
600
1.50
Code blocks
14 px
400
1.80
Inline code
14 px
400
Inherit surrounding text
Document typography
Document sizes use points. Inline code is 11 pt in ordinary body text and inherits the surrounding line spacing.
Document typography
Role
Size
Weight
Line height
Document title
28 pt
600
1.20
Major section heading
20 pt
600
1.20
Subsection heading
16 pt
600
1.20
Lower-level heading
13 pt
600
1.20
Lead paragraph
14 pt
400
1.40
Body text
12 pt
400
1.50
Captions, metadata, and footnotes
10 pt
400
1.40
Table body
11 pt
400
1.40
Table headers
11 pt
600
1.40
Code blocks
10 pt
400
1.40
Presentation typography
Use 16:9 slides measuring 960 × 540 pt. Inline code matches the surrounding text size. Shorten or distribute content across slides to preserve readable sizes.
Presentation typography
Role
Size
Weight
Line height
Opening title or section-divider title
48 pt
600
1.10
Ordinary slide title
36 pt
600
1.15
Subheading within a slide
28 pt
600
1.20
Main body text and bullets
24 pt
400
1.25
Supporting text
20 pt
400
1.25
Captions, source credits, and metadata
18 pt
400
1.25
Table body
20 pt
400
1.25
Table headers
20 pt
600
1.25
Code blocks
18 pt
400
1.40
Color
02
White and charcoal form the visual foundation. Use secondary gray for supporting information and accents for their assigned roles.
White
#FFFFFF
Page background
Soft gray
#F5F5F5
Code and quiet surfaces
Rule
#DEDEDE
Decorative dividers
Graphite
#595959
Supporting text
Charcoal
#191919
Headings and body text
Charcoal on white17.58:1Graphite on white7.00:1
Accent roles
Blue provides signature emphasis. Teal identifies explanatory callouts. Amber marks occasional important qualifications that affect interpretation or a decision.
Aa
Blue
Foreground: #2358C5 Tint: #EDF3FF
Signature accent, selected references, primary emphasis, and keyboard focus.
On white: 6.41:1 On tint: 5.76:1
Aa
Teal
Foreground: #13776C Tint: #EDF7F5
Explanatory callouts: definitions, worked examples, and supporting explanations.
On white: 5.41:1 On tint: 4.95:1
Aa
Amber
Foreground: #965B13 Tint: #FFF5E7
Occasional important qualifications that materially affect interpretation or a decision.
On white: 5.52:1 On tint: 5.12:1
Primary emphasis
Connect mathematical understanding with implementation.
Use blue selectively. Keep ordinary text and headings charcoal.
An explanation
Teal label and left border, optional tint, charcoal body text.
An important qualification
Illustrative wording. Use amber when the qualification materially affects interpretation.
Ordinary supporting information
Computational essayWolfram Language
Keep metadata, labels, and routine notes neutral. An ordinary scope note does not automatically require amber.
Apply one assigned accent consistently within a callout. Keep its body text charcoal and its meaning explicit in the label. Keyboard focus is always blue.
Links stay recognizable
Inline links are underlined. Hover increases the underline’s weight.
Focus is visible
A blue outline appears for keyboard focus. It has a functional role.
Meaning stays explicit
A meaningful label communicates the purpose of a callout alongside its color.
Layout & spacing
03
A four-pixel base creates a consistent rhythm. Short gaps connect related details; larger gaps separate ideas.
Spacing scale
4 px
8 px
12 px
16 px
24 px
32 px
48 px
64 px
96 px
How it is used
8–12 px Labels, metadata, and closely related items.
16–32 px Text blocks, component padding, and project details.
48–96 px Sections and major changes of subject.
Main content: up to 1,152 px
Reading width: up to 65ch
Outer gutters use 4% of viewport width, from 20 to 64 px. The 65ch reading measure is based on the font’s “0” character, not a literal character count. Columns stack as space narrows; general copy stays 18 px at default settings.
One alignment
Left-align headings, prose, and metadata. Center equations within their reading context.
Restrained corners
Callouts use a 4 px radius and 16 px padding on all four sides. Buttons have fully rounded ends.
Purposeful motion
Brief feedback for hover and focus. Respect reduced-motion preferences.
Website layout
Website layout
Property
Specification
Maximum main content width
1,152 px, centered
Maximum prose width
65ch
Outer horizontal gutters
4% of viewport width, with a minimum of 20 px and a maximum of 64 px
Spacing scale
4, 8, 12, 16, 24, 32, 48, 64, and 96 px
Between prose paragraphs
24 px
Before a major section heading within prose
48 px
Before a subsection heading within prose
32 px
Between a prose heading and its following content
24 px
Document layout
Document layout
Property
Specification
Default page
A4 portrait, 210 × 297 mm
Page margins
25.4 mm on all sides
Main layout
One column
Body alignment
Left aligned
First-line paragraph indent
None
Between body paragraphs
8 pt
Major section heading spacing
24 pt before, 12 pt after
Subsection heading spacing
16 pt before, 8 pt after
Lower-level heading spacing
12 pt before, 8 pt after
Page numbers
Bottom right, using the approved metadata typography
Presentation layout
Presentation layout
Property
Specification
Main content margins
48 pt on all sides
Default alignment
Left aligned
Default layout
One column; two columns for comparisons or paired content
Gap between columns
24 pt
Between the slide title and main content
24 pt
Between distinct content groups
24 pt
Between bullet items
12 pt
Between an illustration or table and its caption
8 pt
Footer placement, when needed
Text box bottom edge 48 pt from the slide’s bottom edge
Footer alignment
Source credits on the left; slide number on the right
Clearance above the footer
At least 24 pt
Components
04
Examples use the site’s navigation, writing, and projects.
Recognition links appear above the title with an 8 px gap. Tags stay below the description. Dates, location labels, recognition labels, and tags share 14 px regular type and 1.50 line height. Tags use compact white styling with secondary-gray text, a 1 px light-gray border, 4 px corner radius, and 0 px vertical / 8 px horizontal padding. Tags are separated by 8 px, and their group sits 16 px below the description.
Profile lists
Use the shared profile list component. Location and venue labels sit directly below item titles and above descriptions, with 8 px between consecutive blocks. Keep Honors & Awards separate from Certificates. Repeated honors’ terms appear on separate lines in the desktop date column and inline, separated by commas, when dates move above entries at 60 rem or less. Allow natural wrapping when needed; do not repeat terms in the description.
Honors & Awards
Spring 2025, Fall 2025, Spring 2026
Term Honor: Dean’s List
Stony Brook University
May 8, 2026
Successful Participant, 2026 Mathematical Contest In Modeling (MCM)
Consortium for Mathematics and its Applications (COMAP)
Blue outline, 2 px thick, offset 5 px from the element
Simple transitions
160 ms with ease timing
Controls grow when labels wrap or text is enlarged. Keyboard focus appears immediately. Essential information and actions remain available without hover. Optional transitions are disabled when reduced motion is requested.
Technical writing
05
Prose, mathematics, code, and tables share a consistent hierarchy. Research figures and diagrams are outside this version’s scope.
Article specimen
We Code to Understand
By Junseo Lee Published on
Formal thinking, the cognitive ability to reason abstractly and logically, is one of the most important aspects of human reasoning. For a long time, the central form this took was mathematical thinking, which involves formulating real-world problems as mathematical expressions and manipulating them symbolically.
The Computational Essay
The text sets up the idea, the description previews the computation, the code specifies it precisely in a manner that both a human can understand and a computer can process, and the output delivers the computed results.
“We code to understand.”
Wolfram Computational Research Club
Excerpts from your existing article. The writing is preserved.
Equations, code, and tables
A small illustrative example shows how a definition, implementation, and result can share a consistent reading rhythm.
(1)
Equations use mathematical typesetting. Surrounding text and equation numbers follow the shared system.
PythonIllustrative example
# A small example of a sample mean.
observations = [1, 2, 3]
sample_mean = sum(observations) / len(observations)
print(sample_mean) # 2.0
Example inputs and result
Quantity
Definition
Value
Observations
Illustrative input values
1, 2, 3
Sample size
Number of observations
3
Sample mean
Sum divided by sample size
2.0
Numeric columns align right and use tabular figures. Wide tables and code blocks scroll within the reading column.
Editorial conventions
Editorial conventions
Area
Convention
Headings and labels
Use sentence case. Preserve the established capitalization of proper names, acronyms, and cited titles.
Metadata
Use natural sentences, separate lines, or labeled fields. Do not use dots to separate metadata items or standalone words and phrases.
Emphasis
Use bold selectively for important wording. Use italics where appropriate for titles, terminology, or established notation.
Lists
Use lists for parallel items or sequential steps. Use connected prose for explanations that develop an argument.
Dates and times
Use unambiguous reader-facing dates, such as “September 6, 2026.” Include a time zone when interpreting a time depends on it.
Links and attribution
Use descriptive link text. Identify sources clearly and retain necessary attribution for borrowed material. Follow required citation conventions.
Numbers and units
State units clearly. Use consistent formatting for comparable values while preserving meaningful precision.
Mathematics and code
Use proper mathematical typesetting. Preserve notation, code characters, and meaningful indentation.
Illustrative examples
Identify examples as illustrative when readers could otherwise mistake them for actual findings or results.
