Solution Kanu

Generated Oct 29, 2026

DESIGN.md for onca.run

onca.run11 colors6 componentsInstrument Sans

Remix

4 screenshots captured· onca.run

1 / 4 · Onca · Solana tools for ZeroClaw agents · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Onca
description: |
  Onca presents a minimalist, tech-forward design system rooted in contrast and
  precision. The visual identity balances a deep, near-black canvas (#050506)
  with bright white surfaces (#FFFFFF), creating sharp visual hierarchy and
  legibility for technical content. Typography is geometric and modern, anchored
  in Instrument Sans with deliberate negative letter-spacing on display sizes
  that conveys sophistication and engineering rigor. The palette favors
  restraint—neutral grays for text hierarchies, a restrained blue link color
  (#3D6FBF), and minimal decorative accent. Shadows are subtle and layered,
  offering barely-perceptible depth rather than dramatic elevation. The overall
  mood is professional, trustworthy, and approachable—designed for developers
  and security-conscious users navigating complex blockchain tooling.
source:
  url: "https://onca.run"
  pagesAnalyzed: 2
  extractedAt: 2026-10-29
  tokensMeasured: true
colors:
  primary: "#18181B"
  link: "#3D6FBF"
  canvas: "#050506"
  surface: "#FFFFFF"
  surface-alt: "#F4F5F7"
  ink: "#9A9AA3"
  body: "#70707A"
  muted: "#63636B"
  faint: "#18181B"
  hairline: "#0C0C0E"
  accent-1: "#6EA8FF"
  neutral-1: "#7C7C86"
typography:
  display-xxl:
    fontFamily: "Instrument Sans"
    fontSize: 288px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -11.52px
  display-xl:
    fontFamily: "Instrument Sans"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -2.16px
  display-lg:
    fontFamily: "Instrument Sans"
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -1.3px
  display-md:
    fontFamily: "Instrument Sans"
    fontSize: 45.6px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1.14px
  heading-lg:
    fontFamily: "Instrument Sans"
    fontSize: 38.4px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.96px
  heading-md:
    fontFamily: "Instrument Sans"
    fontSize: 33.6px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: -0.84px
  heading-sm:
    fontFamily: "Instrument Sans"
    fontSize: 21.6px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.54px
  heading-xs:
    fontFamily: "Instrument Sans"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.45px
  body-xl:
    fontFamily: "Instrument Sans"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: -0.5px
  body-lg:
    fontFamily: "Instrument Sans"
    fontSize: 17.28px
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: 0px
  body-md:
    fontFamily: "Instrument Sans"
    fontSize: 16.8px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-sm:
    fontFamily: "Instrument Sans"
    fontSize: 16.32px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-xs:
    fontFamily: "Instrument Sans"
    fontSize: 15.68px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-xs-2:
    fontFamily: "Instrument Sans"
    fontSize: 14.72px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button:
    fontFamily: "Instrument Sans"
    fontSize: 11.52px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  caption:
    fontFamily: "Instrument Sans"
    fontSize: 11.52px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 1.38px
    textTransform: uppercase
  code-xl:
    fontFamily: ui-monospace
    fontSize: 15.2px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  code-lg:
    fontFamily: ui-monospace
    fontSize: 14.72px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  code-md:
    fontFamily: ui-monospace
    fontSize: 14.08px
    fontWeight: 400
    lineHeight: 2
    letterSpacing: 0px
  code-md-tight:
    fontFamily: ui-monospace
    fontSize: 14.08px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0px
  code-sm:
    fontFamily: ui-monospace
    fontSize: 13.76px
    fontWeight: 400
    lineHeight: 1.85
    letterSpacing: 0px
  code-xs:
    fontFamily: ui-monospace
    fontSize: 12.48px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 18.4px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 28px
  xxxl: 32px
  section: 40px
  band: 56px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px"
  md: "rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px"
  lg: "rgba(0, 0, 0, 0.6) 0px 10px 30px -16px"
  xl: "color(srgb 0.0470588 0.0470588 0.054902 / 0.06) 0px 1px 0px 0px inset"
elevationStrategy: layered-micro
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#F9FBFD"
    surface: "#EFF1F3"
    surfaceRaised: "#E8E9EB"
    text: "#13161A"
    textMuted: "#6A6C6F"
    border: "#D6D8DA"
    accent: "#3D6FBF"
    accentFg: "#FFFFFF"
    focusRing: "#3D6FBF"
    elevation: shadow
  dark:
    bg: "#050506"
    surface: "#FFFFFF"
    surfaceRaised: "#FFFFFF"
    text: "#9A9AA3"
    textMuted: "#70707A"
    border: "#0C0C0E"
    accent: "#3D6FBF"
    accentFg: "#FFFFFF"
    focusRing: "#3D6FBF"
    elevation: "border+surface"
  contrastFailures:
    - "dark: muted on bg = 4.16:1 (needs 4.5:1)"
    - "dark: text on surface = 2.79:1 (needs 4.5:1)"
gradients:
  - context: section
    kind: linear
    value: "linear-gradient(color(srgb 0.969569 0.977412 0.989961), rgb(255, 255, 255) 42%)"
components:
  button-filled:
    textColor: "rgb(245, 245, 247)"
    height: 44px
    padding: "0px 20px 0px 20px"
    fontSize: 15.2px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.6) 0px 10px 30px -16px"
    fontFamily: "Instrument Sans"
    fontWeight: 500
    lineHeight: 1.6
    rounded: "{rounded.md}"
    backgroundColor: "{colors.hairline}"
  button-primary:
    typography: "{typography.code-xs}"
    textColor: "{colors.surface}"
    height: 40px
    padding: "0px 16px 0px 16px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-text:
    typography: "{typography.code-xs}"
    textColor: "{colors.faint}"
    height: 36px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.xs}"
  button-text-2:
    typography: "{typography.code-xs}"
    textColor: "{colors.muted}"
    height: 36px
    padding: "0px 12px 0px 12px"
    rounded: "{rounded.xs}"
  button-icon:
    textColor: "rgb(92, 92, 102)"
    height: 40px
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    rounded: "3.35544e+07px"
  button-filled-sm:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    height: 28.4219px
    padding: "4px 10px 4px 10px"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.hairline}"
  card-featured:
    textColor: "{colors.hairline}"
    border: "1px solid rgba(0, 0, 0, 0.08)"
    fontSize: 17px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px"
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    rounded: "{rounded.lg}"
    backgroundColor: "{colors.surface}"
  card-featured-sm:
    textColor: "{colors.hairline}"
    border: "1px solid rgba(0, 0, 0, 0.08)"
    padding: "12px 20px 12px 20px"
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "rgb(240, 241, 244)"
  card:
    textColor: "{colors.hairline}"
    border: "1px solid rgba(12, 12, 14, 0.08)"
    padding: "40px 0px 40px 0px"
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
  card-lg:
    textColor: "{colors.faint}"
    padding: "24px 24px 24px 24px"
    fontSize: 15.2px
    fontFamily: ui-monospace
    fontWeight: 400
    lineHeight: 1.63
  badge-icon:
    textColor: "{colors.hairline}"
    height: 40px
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    rounded: "3.35544e+07px"
    backgroundColor: "rgba(12, 12, 14, 0.05)"
  badge-icon-2:
    textColor: "rgb(245, 245, 247)"
    height: 40px
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    rounded: "3.35544e+07px"
    backgroundColor: "rgba(255, 255, 255, 0.07)"
  navigation:
    textColor: "{colors.hairline}"
    height: 35.5469px
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
  navigation-2:
    textColor: "rgb(245, 245, 247)"
    height: 35.5469px
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
  footer:
    textColor: "{colors.hairline}"
    border: "1px solid rgba(12, 12, 14, 0.08)"
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "{colors.surface-alt}"
  footer-2:
    textColor: "rgb(245, 245, 247)"
    border: "1px solid rgba(255, 255, 255, 0.08)"
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    backgroundColor: "{colors.canvas}"
  link:
    textColor: "{colors.hairline}"
    fontSize: 17px
    fontFamily: "Instrument Sans"
    fontWeight: 400
    lineHeight: 1.6
    rounded: "3.35544e+07px"
  link-sm:
    typography: "{typography.body-xs-2}"
    textColor: "rgb(92, 92, 102)"
    padding: "6px 12px 6px 12px"
    rounded: "3.35544e+07px"
states:
  button-focus-visible:
    target: button
    state: focus-visible
    rounded: 4px
  other-hover:
    target: other
    state: hover
    opacity: 0.9
breakpoints:
  - width: 375
    containerWidth: 327
    gridColumns: 2
    navLinksVisible: 5
    menuToggleVisible: true
    headingPx: 40
    bodyPx: 17
    sectionPaddingX: 24
  - width: 768
    containerWidth: 704
    gridColumns: 1
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 42
    bodyPx: 17
    sectionPaddingX: 32
  - width: 1024
    containerWidth: 960
    gridColumns: 2
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 56
    bodyPx: 17
    sectionPaddingX: 32
  - width: 1280
    containerWidth: 1152
    gridColumns: 2
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 70
    bodyPx: 17
    sectionPaddingX: 32
  - width: 1440
    containerWidth: 1152
    gridColumns: 2
    navLinksVisible: 9
    menuToggleVisible: false
    headingPx: 72
    bodyPx: 17
    sectionPaddingX: 32
coverage:
  statesFound: 14
  gradientsFound: 1
  rolesUnassigned: 2
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Onca

1. Visual Theme & Atmosphere

Onca presents a minimalist, tech-forward design system rooted in contrast and precision. The visual identity balances a deep, near-black canvas ({colors.canvas} — #050506) with bright white surfaces ({colors.surface} — #FFFFFF), creating sharp visual hierarchy and legibility for technical content. Typography is geometric and modern, anchored in Instrument Sans with deliberate negative letter-spacing on display sizes that conveys sophistication and engineering rigor. The palette favors restraint—neutral grays for text hierarchies, a restrained blue link color ({colors.link} — #3D6FBF), and minimal decorative accent. Shadows are subtle and layered, offering barely-perceptible depth rather than dramatic elevation. The overall mood is professional, trustworthy, and approachable—designed for developers and security-conscious users navigating complex blockchain tooling.

Key Characteristics

High contrast between canvas and surface for clarity and accessibility
Negative letter-spacing on display typography for sophisticated visual rhythm
Minimalist color palette: neutrals + single link blue, no semantic status colors
Layered micro-shadows for imperceptible depth, color-blocking for surface hierarchy
Pill-shaped buttons ({rounded.full} — 9999px) contrasting with sharp card corners
Monospace code typography for technical credibility
Subtle opacity transitions on interactive states
No dark mode derivation—design is intentionally light-on-dark

2. Color Palette & Roles

Primary

Brand / Primary ({colors.primary} — #18181B): Primary CTA fills, brand accent, active states, tertiary placeholder text. Deep near-black used sparingly for emphasis and button backgrounds.

Interactive

Link ({colors.link} — #3D6FBF): Inline link text color. Mid-tone blue for underlined or standalone links in body copy.

Neutral Scale

Canvas ({colors.canvas} — #050506): Default page background. Deepest neutral, nearly pure black.
Hairline ({colors.hairline} — #0C0C0E): 1px borders and dividers. Marginally lighter than canvas for subtle demarcation.
Muted ({colors.muted} — #63636B): Captions, secondary text, disabled or tertiary content.
Body ({colors.body} — #70707A): Body copy and running text. Mid-gray for legibility over light surfaces.
Ink ({colors.ink} — #9A9AA3): Headings and primary text on neutral backgrounds. Lighter gray for sufficient contrast on canvas.
Neutral ({colors.neutral-1} — #7C7C86): Unassigned; used for intermediate text hierarchies.

Surface & Borders

Surface ({colors.surface} — #FFFFFF): Card and panel background. Pure white for cards, featured content, and high-contrast blocks.
Surface Alt ({colors.surface-alt} — #F4F5F7): Alternating section band. Off-white for secondary content areas and section backgrounds; creates rhythm without jarring shifts.

Accent (Decorative)

Accent 1 ({colors.accent-1} — #6EA8FF): No measured role. Treat as decorative; present in the palette but not actively assigned to UI roles.

3. Typography Rules

Font Family

Primary: Instrument Sans (sans-serif)
Fallback: system-ui, -apple-system, sans-serif

Secondary: ui-monospace (monospace)
Fallback: 'Courier New', monospace

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Instrument Sans	288px	600	1.00	-11.52px	Hero headline; extremely tight tracking
Display XL	Instrument Sans	72px	600	1.04	-2.16px	Main page heading; strong negative tracking
Display LG	Instrument Sans	52px	600	1.60	-1.30px	Large hero; flexible line height for wrapping
Display MD	Instrument Sans	45.6px	600	1.08	-1.14px	Section heading
Heading LG	Instrument Sans	38.4px	600	1.10	-0.96px	Subheading; prominent
Heading MD	Instrument Sans	33.6px	600	1.60	-0.84px	Flexible subheading
Heading SM	Instrument Sans	21.6px	500	1.40	-0.54px	Card title, tertiary heading
Heading XS	Instrument Sans	18px	500	1.56	-0.45px	Small section title
Body XL	Instrument Sans	20px	500	1.38	-0.50px	Prominent body; semi-bold
Body LG	Instrument Sans	17.28px	400	1.62	0px	Large body copy
Body MD	Instrument Sans	16.8px	400	1.63	0px	Standard body text
Body SM	Instrument Sans	16.32px	400	1.63	0px	Small body; still readable
Body XS	Instrument Sans	15.68px	400	1.60	0px	Extra-small body text
Body XS 2	Instrument Sans	14.72px	400	1.60	0px	Secondary small text
Button	Instrument Sans	11.52px	400	1.60	0px	Button label text; uppercase capable
Caption	Instrument Sans	11.52px	400	1.60	1.38px	Uppercase captions; increased tracking
Code XL	ui-monospace	15.2px	400	1.60	0px	Large code block
Code LG	ui-monospace	14.72px	400	1.60	0px	Code in lists
Code MD	ui-monospace	14.08px	400	2.00	0px	Standard code block
Code MD Tight	ui-monospace	14.08px	400	1.90	0px	Dense code
Code SM	ui-monospace	13.76px	400	1.85	0px	Inline or tight code
Code XS	ui-monospace	12.48px	400	1.60	0px	Compressed code

Principles

Negative tracking on display: All sizes 45.6px and above use negative letter-spacing (ranging from -0.54px to -11.52px), establishing visual sophistication and engineering credibility.
Consistent line heights: Body text maintains 1.60–1.63 line height for readability; display sizes compress to 1.00–1.10 for tight, intentional layouts.
Monospace for code: ui-monospace family used exclusively for code and technical content; line heights remain loose (1.60–2.00) for clarity.
Weight hierarchy: Display and headings use weight 600; body paragraphs are 400; semi-bold accents (headings under 21.6px) use weight 500.
Letter-spacing: Positive tracking (1.38px) only on uppercase captions; all other text uses 0px or negative values.

4. Component Stylings

Buttons

Primary

Background: #18181B
Text Color: #FFFFFF
Font: ui-monospace, 12.48px, weight 400, line-height 1.60
Padding: 0px 16px
Height: 40px
Border Radius: {rounded.sm} — 8px
Border: none
Box Shadow: none

Filled

Background: #0C0C0E
Text Color: #F5F5F7
Font: Instrument Sans, 15.2px, weight 500, line-height 1.60
Padding: 0px 20px
Height: 44px
Width: 168px
Border Radius: {rounded.md} — 12px
Border: none
Box Shadow: rgba(0, 0, 0, 0.6) 0px 10px 30px -16px

Text

Background: transparent
Text Color: #18181B
Font: ui-monospace, 12.48px, weight 400, line-height 1.60
Padding: 0px 12px
Height: 36px
Border Radius: {rounded.xs} — 6px
Border: none

Text (Muted)

Background: transparent
Text Color: #63636B
Font: ui-monospace, 12.48px, weight 400, line-height 1.60
Padding: 0px 12px
Height: 36px
Border Radius: {rounded.xs} — 6px
Border: none

Icon

Background: transparent
Text Color: #5C5C66
Font: Instrument Sans, 17px, weight 400, line-height 1.60
Padding: 0px
Height: 40px
Width: 40px
Border Radius: {rounded.full} — 9999px
Border: none

Filled Small

Background: #0C0C0E
Text Color: #9A9AA3
Font: Instrument Sans, 11.52px, weight 400, line-height 1.60
Padding: 4px 10px
Height: 28.4px
Border Radius: {rounded.xs} — 6px
Border: 1px solid rgba(255, 255, 255, 0.08)

Cards & Containers

Featured

Background: #FFFFFF
Text Color: #0C0C0E
Border: 1px solid rgba(0, 0, 0, 0.08)
Border Radius: {rounded.lg} — 18.4px
Padding: 0px
Box Shadow: rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px
Font: Instrument Sans, 17px, weight 400

Featured Small

Background: #F0F1F4
Text Color: #0C0C0E
Border: 1px solid rgba(0, 0, 0, 0.08)
Border Radius: {rounded.none} — 0px
Padding: 12px 20px
Box Shadow: none
Font: Instrument Sans, 17px, weight 400

Default

Background: transparent
Text Color: #0C0C0E
Border: 1px solid rgba(12, 12, 14, 0.08)
Border Radius: {rounded.none} — 0px
Padding: 40px 0px
Box Shadow: none
Font: Instrument Sans, 17px, weight 400

Default Large

Background: transparent
Text Color: #18181B
Border: none
Border Radius: {rounded.none} — 0px
Padding: 24px 24px
Box Shadow: none
Font: ui-monospace, 15.2px, weight 400, line-height 1.60

Inputs & Forms

No specific input styling was extracted. Refer to Known Gaps.

Navigation

Default (Light)

Background: transparent
Text Color: #0C0C0E
Font: Instrument Sans, 17px, weight 400, line-height 1.60
Border: none
Border Radius: {rounded.none} — 0px
Padding: 0px

Default (Dark)

Background: transparent
Text Color: #F5F5F7
Font: Instrument Sans, 17px, weight 400, line-height 1.60
Border: none
Border Radius: {rounded.none} — 0px
Padding: 0px

Badges

Icon

Background: rgba(12, 12, 14, 0.05)
Text Color: #0C0C0E
Font: Instrument Sans, 17px, weight 400
Height: 40px
Width: 40px
Border Radius: {rounded.full} — 9999px
Border: none

Icon (Inverse)

Background: rgba(255, 255, 255, 0.07)
Text Color: #F5F5F7
Font: Instrument Sans, 17px, weight 400
Height: 40px
Width: 40px
Border Radius: {rounded.full} — 9999px
Border: none

Footer

Default (Light)

Background: #F4F5F7
Text Color: #0C0C0E
Border: 1px solid rgba(12, 12, 14, 0.08)
Border Radius: {rounded.none} — 0px
Font: Instrument Sans, 17px, weight 400

Default (Dark)

Background: #050506
Text Color: #F5F5F7
Border: 1px solid rgba(255, 255, 255, 0.08)
Border Radius: {rounded.none} — 0px
Font: Instrument Sans, 17px, weight 400

5. Layout Principles

Spacing System

The spacing system uses an 4px base unit scaled logarithmically for readable rhythm:

{spacing.xxs} — 4px: Micro-spacing for tight components, button padding variants
{spacing.xs} — 8px: Small gaps, icon padding
{spacing.sm} — 12px: Compact component spacing
{spacing.md} — 16px: Standard component padding and internal spacing
{spacing.lg} — 20px: Comfortable padding for cards and buttons
{spacing.xl} — 24px: Section padding and spacing within content areas
{spacing.xxl} — 28px: Large block spacing
{spacing.xxxl} — 32px: Extra-large internal card and section spacing
{spacing.section} — 40px: Section vertical rhythm
{spacing.band} — 56px: Major section separation on the page

Grid & Container

Max content width: 1152px (measured at 1280px+ viewports)
Column strategy: Flexible; 2 columns on mobile (375px), collapses to single column at 768px, returns to 2 at 1024px+
Section patterns: Full-width bands alternate between {colors.canvas} and {colors.surface-alt}, with {spacing.section} — 40px vertical padding and {spacing.md} — 16px to {spacing.xxxl} — 32px horizontal padding depending on viewport

Whitespace Philosophy

Onca favors expansive whitespace over dense layouts. Section gaps use {spacing.band} — 56px to establish breathing room. Cards nest content with {spacing.lg} — 20px internal padding, and featured cards use 0px padding with inset content. The system avoids centering text excessively; instead, it left-aligns running copy and centers only headlines and full-width visual blocks.

Border Radius Scale

{rounded.none} — 0px: Cards, footer, default containers (sharp modern aesthetic)
{rounded.xs} — 6px: Input fields, text buttons, small UI controls
{rounded.sm} — 8px: Primary buttons, small modals
{rounded.md} — 12px: Filled buttons, featured card containers
{rounded.lg} — 18.4px: Large featured cards with soft corners
{rounded.full} — 9999px: Icon buttons, badges, pill-shaped navigation elements, links

Border Widths

Thin: 1px (cards, dividers, subtle borders)

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow; transparency or color blocking only	Default cards, navigation, text containers
Micro	`rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px`	Featured white cards; inset top-light + soft outer shadow
Button	`rgba(0, 0, 0, 0.6) 0px 10px 30px -16px`	Filled button hover/active states; subtle lift
Custom	`rgba(0.047, 0.047, 0.054, 0.06) 0px 1px 0px 0px inset`	Fine inner border effect; minimal depth

Shadow Philosophy
Onca employs a layered-micro elevation strategy. Depth comes primarily from color-blocking (white surfaces on dark canvas, alternating backgrounds) rather than shadows. When shadows appear, they are barely-there—composed of many near-transparent layers stacked to suggest imperceptible lift. This avoids the aggressive depth cues of traditional multi-level systems, maintaining the minimal aesthetic while preserving visual hierarchy.

Opacity Levels

45% (0.45): Used for subtle backgrounds or disabled elements
50% (0.50): Mid-transparency for overlays or secondary content
55% (0.55): Featured card inset highlights
80% (0.80): Near-full opacity for secondary text or borders

Z-index / Layering

base: 1 — Default stacking
dropdown: 10 — Dropdown menus and overlays
dropdown (high): 50 — Higher-priority dropdowns or modals

7. Do's and Don'ts

Do

Use negative letter-spacing on all display type (45.6px and above) to maintain the sophisticated, engineered feel; never set display tracking to 0.
Contrast surfaces using color, not shadow. Rely on {colors.surface} (#FFFFFF) cards on {colors.canvas} (#050506) for hierarchy; reserve subtle shadows for featured cards only.
Keep button border-radius consistent within intent: pill buttons ({rounded.full}) for icons and small CTAs; sharper radius ({rounded.sm}, {rounded.md}) for primary filled buttons.
Apply {spacing.band} — 56px as the primary rhythm between major sections; nest component spacing using smaller units ({spacing.md}, {spacing.lg}) within cards.
Use the neutral ramp intentionally: {colors.ink} (#9A9AA3) for headings on canvas, {colors.body} (#70707A) for body on surfaces, {colors.muted} (#63636B) for secondary or disabled text.
Reference the link color ({colors.link} — #3D6FBF) for all inline links; do not invent new link colors.
Test card borders with 1px solid rgba(0, 0, 0, 0.08) on light surfaces and 1px solid rgba(255, 255, 255, 0.08) on dark; adjust opacity if contrast is insufficient.
Keep padding inside cards at {spacing.lg} or {spacing.xl} (20–24px) to avoid cramped layouts; featured cards may use 0px padding with inset image/content.

Don't

Do not round card corners to {rounded.md} or beyond unless the card is explicitly featured or highlighted; default cards use {rounded.none} (0px) for sharp, modern lines.
Do not invent shadow values; use only the measured shadows from the Elevation table or omit shadows entirely (flat cards are acceptable).
Do not use the secondary accent ({colors.accent-1} — #6EA8FF) for interactive states or status roles; it has no assigned role in the system.
Do not apply positive letter-spacing to body or heading text; positive tracking (1.38px) is reserved for uppercase captions only.
Do not mix pill and sharp border-radius randomly; icon buttons and badges are always {rounded.full} (9999px), while content cards and text buttons maintain sharpness.
Do not add drop shadows to text buttons or flat cards; these should rely on color contrast and borders only.
Do not override the monospace font in code blocks; ui-monospace is mandatory for technical content to maintain credibility.
Do not center-align large blocks of running copy; Onca uses left alignment by default, reserving center alignment for headlines and visual focal points only.

8. Responsive Behavior

Breakpoints

Viewport Width	Content Column	Grid Columns	Nav Links Visible	Menu Toggle	Largest Heading	Body Font	Section Padding-X
375px (mobile)	327px	2	5	yes	40px	17.28px	24px
768px (tablet)	704px	1	9	no	42px	17.28px	32px
1024px (desktop)	960px	2	9	no	56px	17.28px	32px
1280px (wide)	1152px	2	9	no	70px	17.28px	32px
1440px (ultra-wide)	1152px	2	9	no	72px	17.28px	32px

Key observations:

Content column remains constrained to 1152px maximum; it does not grow beyond 1280px.
Navigation menu is always visible on tablets and above (768px+); mobile uses a toggle.
Heading sizes increase with viewport, climbing from 40px at mobile to 72px at 1440px; body text remains constant at ~17px across all sizes.
Horizontal padding adjusts from {spacing.xl} (24px) on mobile to {spacing.xxxl} (32px) on tablet and above.
Grid shifts from 2-column on mobile to 1-column at 768px, then back to 2-column at 1024px+; this reflects asymmetric responsive design prioritizing single-column readability at tablet sizes.

Touch Targets

Minimum size: 40px × 40px for icon buttons and interactive badges
Button targets: 44px height (filled buttons); 40px height (primary buttons)
Link and text button targets: 36px height with minimum {spacing.sm} (12px) horizontal padding for comfortable touch on mobile

Collapsing Strategy

Mobile (375px): Single column within 327px content width; navigation menu collapses to toggle; font sizes scale down (headings to 40px). Section horizontal padding set to {spacing.xl} (24px).
Tablet (768px): Content expands to 704px; primary navigation links return to visible state. Headings slightly larger (42px); section padding increases to {spacing.xxxl} (32px). Grid shifts to 1-column for legibility.
Desktop (1024px+): Full-width layout constrained to 1152px max-content-width. 2-column grid active. Headings continue scaling (56–72px). All UI features visible; no truncation or hiding.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Brand Accent: {colors.primary} — #18181B (dark fills, active states)
Page Background: {colors.canvas} — #050506 (nearly pure black)
Card Surface: {colors.surface} — #FFFFFF (pure white)
Section Band: {colors.surface-alt} — #F4F5F7 (off-white alternation)
Body Text: {colors.body} — #70707A (mid-gray on light surfaces)
Heading Text: {colors.ink} — #9A9AA3 (lighter gray on dark canvas)
Secondary Text: {colors.muted} — #63636B (captions, disabled)
Links: {colors.link} — #3D6FBF (mid-tone blue for inline references)
Borders: {colors.hairline} — #0C0C0E (dividers, subtle strokes)

Iteration Guide

Set a deep canvas and high-contrast surfaces: All pages open on {colors.canvas} (#050506); card content floats on {colors.surface} (#FFFFFF). No other background colors are used without explicit section band breaks.
Apply negative letter-spacing to display typography: Any heading above 45px gets negative tracking (scale: -0.54px to -11.52px depending on size). Never omit this—it is the defining trait.
Use pill-shaped buttons only for icons and small actions: Icon buttons and badges are always {rounded.full} (9999px). Primary CTAs and filled buttons use {rounded.sm} (8px) or {rounded.md} (12px).
Reference the monospace font for code only: ui-monospace is mandatory for code blocks, command examples, and technical tokens. Body and headings are always Instrument Sans.
Avoid inventing shadows: Use rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px for featured white cards only; all other cards are flat (no shadow).
Space major sections with {spacing.band} (56px) vertically; nest internal padding using {spacing.md} through {spacing.xxxl} (16–32px).
Color-block instead of shadow-elevate: Hierarchy comes from {colors.surface} cards on {colors.canvas} background, not shadow depth.
Keep navigation pill-shaped on small viewports; collapse to menu toggle at mobile (375px). No hamburger animation required; toggle presence/absence.
Test link colors on both light and dark: {colors.link} (#3D6FBF) on {colors.canvas} should have sufficient contrast; on {colors.surface}, use the same blue or darken to #18181B if needed.
Apply opacity via HSL or RGBA layers, not via CSS opacity property alone (CSS opacity affects entire element). Use rgba(12, 12, 14, 0.05) for badge backgrounds and rgba(255, 255, 255, 0.07) for inverse badges.

10. Known Gaps

No semantic status colors were measured on the site. Error, success, warning, and info states do not appear in the extracted styles. If status colors are needed, they must be added outside this system definition.
Input & form components: No specific styling for text inputs, textareas, selects, or form labels was extracted. Refer to component reference if form elements are required.
Interaction states (incomplete): Hover, focus, and active states were partially inferred from CSS rules but not exhaustively tested across all component types. Specifically:
- Button :hover → backgroundColor: var(--btn-hover) (variable name, actual color not extracted)
- Link :hover → Color and opacity changes recorded, but specific hover color values not provided for all link types
- No :focus states recorded except button :focus-visible → outline: 2px solid var(--signal) (signal color undefined)
- Disabled button states not explicitly measured
Dark mode / theme derivation: The extracted tokens represent a single measured theme (light surfaces on dark canvas). A derived dark mode was not captured; if the site offers true dark-mode switching, it was not analyzed.
Decorative accent color ({colors.accent-1} — #6EA8FF) has no assigned UI role; its intended use is unclear from the extraction.
Neutral color ({colors.neutral-1} — #7C7C86) has no measured role; it appears in the palette but is not actively assigned to a UI function in the documented system.
Animation and transition timings were not extracted. No duration, easing, or motion curves are defined.
Responsive images, aspect ratios, and media queries for specific component behavior (e.g., card image scaling, hero image resizing) were not captured.
Content behind authentication or unpublished pages was not visited; the extraction covers only publicly available pages (2 total: homepage and documentation).
Gradients are present (e.g., section band gradient: linear-gradient(color(srgb 0.969569 0.977412 0.989961), rgb(255, 255, 255) 42%)) but limited to one observed use case; broader gradient library not extracted.
Z-index values above 50 were not observed; modal and toast stacking may differ from the recorded scale.
Print styles were not extracted; this system is optimized for screen rendering only.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from onca.run

Primary

#18181B

Primary CTA, brand accent, active state; Tertiary / placeholder text

#3D6FBF

Inline link colour

#6EA8FF

Accent / decorative

Neutral

#050506

Default page background

#FFFFFF

Card / panel background

#F4F5F7

Alternating section band

#9A9AA3

Headings / primary text

#70707A

Body copy

#63636B

Captions, secondary text

#0C0C0E

1px borders and dividers

#7C7C86

Neutral

Typography · Instrument Sans

body16.32px · 400 · 26.52px

body15.68px · 400 · 25.088px

display288px · 600 · 288px

body17.28px · 400 · 28.08px

body20px · 500 · 27.5px

h172px · 600 · 74.88px

h245.6px · 600 · 49.248px

h321.6px · 500 · 30.24px

link14.72px · 400 · 23.552px

body16.8px · 400 · 27.3px

heading38.4px · 600 · 42.24px

body13.76px · 400 · 22.36px

body16px · 500 · 22px

caption11.52px · 400 · 18.432px

body15.2px · 500 · 24.32px

body17px · 400 · 27.2px

h152px · 600 · 83.2px

h233.6px · 600 · 53.76px

h318px · 500 · 28px

link17px · 400 · 27.2px

button11.52px · 400 · 18.432px

body15.2px · 400 · 24.32px

body14.72px · 400 · 23.552px

body19.2px · 600 · 30.72px

body14px · 400 · 20px

body14.72px · 500 · 23.552px

Typography · ui-monospace

code15.2px · 400 · 24.32px

body14.08px · 400 · 28.16px

button12.48px · 400 · 19.968px

code13.76px · 400 · 25.456px

list-item14.72px · 400 · 23.552px

code14.08px · 400 · 26.752px

code12.8px · 400 · 20.48px

code13.44px · 400 · 21.504px

code26.4px · 400 · 35.2px

code13.12px · 400 · 22.304px

nav-link13.12px · 400 · 20.992px

table-header11.84px · 400 · 18.944px

code16.32px · 400 · 26.52px

code17px · 400 · 27.2px

code12.48px · 400 · 19.968px

Spacing

56px

40px

12px

4px

32px

8px

16px

24px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.55) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.55) 0px 28px 64px -18px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.6) 0px 10px 30px -16px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, color(srgb 0.0470588 0.0470588 0.054902 / 0.06) 0px 1px 0px 0px inset

Components · 6

Remixes of onca.run

Latest remixes

No public remixes yet. Be the first to make one.

Remix it