cora.computer DESIGN.md

Overview

cora.computer presents a mix of light and dark surfaces in the captured pages. The system is anchored by #000000, #ffffff, and #117bc8, with typography led by Switzer, Times, and Signifier. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site’s private source code or a complete responsive specification.

Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site’s variable names.

Colors

token	value	observed use
color.text	#000000	text on page content
color.text	#ffffff	text on page content
color.surface	#117bc8	surface on page content
color.surface	#38bdf8	surface on page content
color.surface	#0ea5e9	surface on page content
color.border	#7dd3fc	border on page content
color.text	#7d7d7d	text on page content in the main
color.border	#dadada	border on page content in the main
color.surface	#ebebeb	surface on page content in the main
color.text	#1d1b20	text on page content in the main
color.text	#a1a1a1	text on page content in the main

Typography

token	font family	size	weight	line height	letter spacing	observed use
type.body-16px	Switzer	16px	400	24px	normal	<div>, <button> in the button, and <a>
type.body-16px	Times	16px	400	normal	normal	<div> in the main, <a> in the main, <li> in the main, <ul> in the main, <div>, <div> in the footer, <a> in the footer, and <button> in the button
type.heading-14px	Switzer	14px	600	17.36px	normal	<button> in the button and <h4> in the button
type.display-55px	Signifier	55px	300	64.9px	normal	<h1> in the main
type.utility-12px	Switzer	12px	500	14.88px	normal	<p> in the main, <span> in the main, and <div> in the main
type.body-14px	Switzer	14px	400	20px	normal	<p>
type.body-18px	Switzer	18px	400	22.32px	normal	<p> in the main
type.body-14px	Switzer	14px	500	17.36px	normal	<p> in the main
type.display-36px	Signifier	36px	400	43.2px	normal	<p> in the main, <h2> in the main, and <h3> in the footer
type.body-14px	Switzer	14px	400	22.75px	normal	<p>
type.body-22px	Switzer	22px	400	27.28px	normal	<p> in the main
type.body-14px	Switzer	14px	400	17.36px	normal	<span> in the main
type.heading-20px	Switzer	20px	600	20.4px	normal	<h3> in the main
type.body-16px	Switzer	16px	400	normal	normal	<div> in the main
type.heading-22px	Switzer	22px	600	27.28px	normal	<span> in the main
type.display-45px	Signifier	45px	400	45.9px	normal	<h2> in the main
type.utility-12px	Switzer	12px	400	16px	normal	<span>
type.body-15px	Switzer	15px	400	18.6px	normal	<p> in the footer
type.body-20px	Switzer	20px	400	20px	normal	<a> in the nav
type.heading-18px	Switzer	18px	600	28px	-0.45px	<span> in the button

Spacing

value	property	observed element
0px 16px	padding	page content
64px 16px	padding	page content
75px 98px	padding	page content
14px 16px	padding	page content
100px 0px	padding	page content
48px	padding	page content
0px 0px 32px	margin	page content
16px 0px 0px	margin	page content

Shape and depth

The captured pages use 0px none 35px, 1px solid 16px, 0px none 10px, 1px solid 8px, 1px solid 8px, 0px none 24px, 0px none 9999px, and 5px solid 25px border treatments. Recorded gradients include linear-gradient(rgba(245, 248, 254, 0) 0%, rgb(245, 248, 254) 12%, rgb(245, 248, 254) 88%, rgba(245, 248, 254, 0) 100%). Recorded shadows include rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.2) 0px -2px 4px 0px inset, rgba(0, 0, 0, 0.14) 0.48px 0.48px 0.48px 0px, rgba(0, 0, 0, 0.145) 3.86px 5.78px 7.71px 0px, rgba(0, 0, 0, 0.125) -3.86px -0.64px 7.71px 0px, rgba(0, 0, 0, 0.07) 0px 4px 10px 0px, and rgba(0, 0, 0, 0.25) 4.77778px 7.16667px 8px 0px, rgba(0, 0, 0, 0.25) -4px -6px 8px 0px.

Colors

The visual system is predominantly dark surface treatment. Surface colors include #117bc8, #38bdf8, and #0ea5e9. Text colors include #000000, #ffffff, and #7d7d7d. Keep image-derived colors separate from interface colors.

Typography

The captured type system uses Switzer, Times, and Signifier. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

Layout

The captured pages use values such as 0px 16px, 64px 16px, 75px 98px, 14px 16px, and 100px 0px for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

Visual language

The captured visual language is predominantly dark surface treatment. Surface treatment centers on #117bc8, #38bdf8, #0ea5e9, and #ebebeb. Depth is supported by the returned gradients and shadows.

Components and states

The captured pages include repeated styling on <div>, <p>, <button>, <a>, <span>, <h1>, <h3>, and <li> elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

Practical implementation guidance

• Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment.
• Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
• Keep the captured font families separate from licensing decisions.
• Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
• Avoid introducing gradients or shadows beyond the captured treatment; the returned evidence includes those treatments.

Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.